Categorias
X
    Clube do Secretariado - Identidade Visual por Ella Jardim
    Portfólio 9 de agosto de 2017

    O Clube das Secretárias é um ideia criada pela Alessandra para “facilitar a vida das secretárias na procura por empresas, prestadores de serviços, cursos e tudo relacionado ao dia a dia delas. O objetivo é ser uma referência nessas buscas, fazer parcerias, construir relacionamentos e direcionar a carreira.”

    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.


  • Uma cor em html é definida por um código chamado Hex (#000 por exemplo), mas você não consegue colocar opacidade nessa cor (fazê-la ficar transparente). Pra que você tenha esse efeito, você precisa usar o código RGBA, que é no seguinte formato:

    rgba(255, 255, 255, 0.89)

    Veja que temos 4 conjuntos de números diferentes. O primeiro corresponde a quantidade de Vermelho, o segundo é quantidade de verde e o terceiro a quantidade de azul que essa sua nova cor vai ter. Já o quarto corresponde a porcentagem de opacidade.

    Pra escolher a cor, você pode usar esse site.
    Escolha a cor que deseja usar em background color. A mágica acontece quando você desliza esse botãozinho ao lado de opacity.
    Veja que no exemplo a cor que você escolheu vai ficando transparente!

    Agora, como usar no seu blog?
    Você pode usar como cor de fonte ou como fundo de algum elemento (fundo do rodapé, da sidebar, etc.).
    Eu acho legal usar quando tem alguma imagem no fundo, porque aí a cor se difunde com a imagem.
    O resultado do código que exemplifique, ficaria assim:

    codigos-interessantes-decorativos-para-blog-opacidade-ella-jardim

    Códigos interessantes e decorativos para blog: Opacidade em fontes.

    Escolheu a cor? A porcentagem de opacidade?
    Então vamos ao código.

    Abra o editor do CSS e procure pelo código do elemento que você deseja colocar opacidade. Vamos supor que quer colocar o fundo da sidebar branco, mas com 50% de transparência.
    Então o código deve ser assim:

    #sidebar {
    background: rgba(255, 255, 255, 0.80);
    }

    Dependendo do tema, o id correspondente da sidebar pode estar com outro nome, então procure com cuidado.

    Agora vamos supor que suas fotos são sempre num tom escuro e que queira colocar a legenda das imagens sempre na cor branca, com transparência de 80%:

    .wp-caption-text {
    color: rgba(255, 255, 255, 0.50);
    }

    .wp-caption-text é a classe que o WordPress gera automaticamente para legendas em imagens, então toda vez que você digitar uma legenda pra sua imagem, o texto vai estar com a porcentagem de transparência que você definiu.

    Alguma dúvida? Deixa nos comentários que vou ter o maior prazer em respondê-la!



    ← 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 ;)