Categorias
X
    Cabeçalho Rotativo 18 de maio de 2017

    Esse é o primeiro cabeçalho cabeçalho rotativo e talvez seja o único que eu não precise acrescentar nenhuma palavra à poesia (música) a qual me inspirei pra criá-lo.


  • O nome desse código é Outline e dependendo da foto, eu acho que dá um ar mais romântico.

    A estrutura do código é a seguinte:

    img {
    outline: 1px solid white;
    outline-offset: -12px;
    }

    Sendo que:

    • 1px é a espessura dessa linha;
    • solid é estilo da linha. Solid corresponde a essa linha reta, mas você pode usar qualquer estilo de linha;
    • White, a cor. Você pode escrever a cor por extenso, usar o código código Hex ou, ainda, o usar o código RGBA! Basta substituir o white pelo código desejado.
    • Outline-offset corresponde a distância que essa linha vai ter em relação a borda, tendo em mente que valores positivos levam a linha pra fora da imagem e valores negativos levam a linha pra dentro da imagem.

    E é justamente o valor negativo que faz esse efeito de moldura.

    Se você usar o exemplo que dei, todas as imagens do seu blog irão ter essa moldura (inclusive imagens de propagandas etc). Então recomendo que você especifique no css qual imagem vai querer esse efeito.

    Por exemplo, se quer usar só nas imagens do cabeçalho do seu blog, então seu código pode ficar assim:

    header img {
    outline: 1px solid white;
    outline-offset: -12px;
    }

    Você só não pode esquecer de colocar o img após a classe ou id do seu cabeçalho. Se você não colocar, o que vai estar com moldura é o cabeçalho inteiro.

    Nesse site você pode simular todos essas propriedades do outline antes de colocar no seu blog. Depois é só copiar o código que o site te deu e colar no seu style conforme expliquei acima.



    ← voltar

    assine a newsletter e receba toda semana muito amor e dicas pra fazer seu blog crescer e deixá-lo ainda mais com sua cara, além de acesso grátis a:

  • Templates de banners
    Vários templates lindos de diversos estilos e temas pra você usar nos posts do seu blog, no Instagram e no Pinterest. É só baixar e editar!
  • E-books & Tutoriais
    Conteúdos exclusivos pra te ajudar em várias áreas do seu blog, sem contar com as listas de tutoriais e códigos pra deixar seu blog mais dinâmico
  • Gráficos diversos
    Se você acha que não tem dom pra montar elementos gráficos pra suas fotos, pode deixar comigo que eu crio e você usa ;)