Cascading

Algumas imagens em PNG para links. Todas são gratuitas e foram achadas aqui.

Todos os icons a seguir foram achados no Google e são de licença free. Apenas os deixei em um lugar de fácil acesso. 

Aqui tem apenas os de redes sociais principais, mas deixei os links de onde eu peguei os ícones para que vocês possam olhar os outros.

Pacote #01 (créditos)

As vezes pode vir a ser útil.

Exemplo

Podemos fazer um degradê de cores nos fundos de elementos. O código geral é:

background:linear-gradient(direção, cor 1,  cor 2);

Podemos ter degradês com as seguintes direções:

to right: para a direita

to left: para a esquerda

to top: para cima

to bottom: para baixo

to top right: do canto inferior esquerdo para o superior direito

to top left: do canto inferior direito para o superior esquerdo

to bottom right: do canto superior esquerdo para o inferior direito

to bottom left: do canto superior esquerdo para o inferior direito

Basta inserir o código com a direção e cores desejadas na div onde o degradê é necessário ou criar

O degradê pode conter quantas cores você quiser, basta adicionar uma vírgula seguido do código da cor. No exemplo abaixo, o degradê está de acordo com o arco íris:

.deg4 {width:500px; height:50px; background:#eee; background:linear-gradient(to right,#9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000);}

Não se esqueça de adicionar também as variações de navegadores e também um background “default” para caso o navegador não suporte este efeito.

O código abaixo e suas variações são referentes ao primeiro exemplo.

background:#eee;  background:linear-gradient(to right,#f29de8, #9ddaf2);  background:-webkit-linear-gradient(to right,#f29de8, #9ddaf2);  background:-o-linear-gradient(to right,#f29de8, #9ddaf2);  background:-moz-linear-gradient(to right,#f29de8, #9ddaf2);

Olá! Gosto muito de sombrear textos, dá um aspecto interessante.

Exemplo

O código abaixo pode ser inserido em qualquer div que contenha um texto:

text-shadow: 5px 3px 2px #696969;

Este código informa que a sombra do texto será posicionada 5 pixels para a direita, 3 pixels para baixo, será borrado 2 pixels e terá a cor cinza.

As variações dos pixels podem ser negativas para posicionar a sombra para a direita e para cima. Quanto maior o valor do último pixel, mais borrada a sombra ficará.

É possível inserir o sombreamento no hover dos textos e ainda criar mais sombras em um único texto, como no efeito 3D do exemplo. Neste caso, o código usado foi:

.texto4 {width:auto; height:auto; padding:5px; font-family:georgia; font-size:30px; font:#696969; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;} .texto4:hover { text-shadow: -3px 0px #E86060, 3px 0px #54d2cb;}

Olá! Quando queremos selecionar apenas alguns elementos específicos de um menu, por exemplo, não é necessário criar uma nova div apenas para os elementos que você quer manipular.

Com a ajuda de uma pseudo-classe do tipo seletor, podemos selecionar apenas os elementos que queremos alterar.

Exemplo

No primeiro exemplo, temos uma div chamada .menu1, onde queremos selecionar apenas os links pares. 

Lembrando que, por se tratar de links, utilizei a pseudo-class .menu1 a para que apenas os links desta div sejam manipulados, e não a div como um todo.

O código abaixo representa a div em que os links se encontrarão.

.menu1 {width:300px; height:auto; padding:5px; } 

A parte abaixo representa apenas os links desta div, para isso utilizamos a letra a depois do nome da mesma. 

.menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;}

O código abaixo representa os links pares.

.menu1 a:nth-child(even) {background:#e17e66;}

O código abaixo refere-se ao hover de todos os links.  

.menu1 a:hover {opacity:.7}

Código inteiro:

.menu1 {width:300px; height:auto; padding:5px; } .menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;} .menu1 a:nth-child(even) {background:#e17e66;} .menu1 a:hover {opacity:.7}

Existem códigos para cada seleção:

Elementos Pares

.div:nth-child(even)

Elementos Ímpares

.div:nth-child(odd)

Primeiro Elemento

.div:first-child

Último Elemento

.div:last-child

Elemento N

.div:nth-child(n)

Três Primeiros Elementos

.div:nth-child(-n+3)

Três Últimos Elementos

.div:nth-last-child(-n+3)

Olá! As vezes, é legal deixar a primeira letra de uma frase ou uma palavra com outra fonte. Geralmente, títulos e quotes utilizam essa técnica.

Exemplo

Vamos supor que temos uma div para título que é assim:

.titulo {width:300px; height:auto; padding:10px; font-family:georgia; font-size:15px;}

Queremos que a primeira letra deste título seja maior, com outra fonte e de outra cor. Podemos adicionar uma div “filha” desta primeira, logo abaixo dela, ficando assim, utilizando :first-letter:

.titulo {width:300px; height:auto; padding:10px; font-family:georgia; font-size:15px;}

.titulo:first-letter {font-family:'Great Vibes', cursive; font-size:30px; color:#e17e66;} 

Neste caso, apenas a primeira letra deste título ficará com a fonte Great Vibes, com o tamanho 30px e com a cor rosa.

Agora, queremos que a primeira linha de uma frase fique diferente. A div desta frase é a seguinte:

.quote2 {width:500px; height:auto; padding:10px; font-family:georgia; font-size:15px;} 

Para que fique como queremos, basta adicionar a div filha :first-line.

.quote2 {width:500px; height:auto; padding:10px; font-family:georgia; font-size:15px;} .quote2:first-line {color:#e17e66;}

A primeira linha da frase ficará com a cor rosa.

Olá! Esta propriedade é ótima para imagens.

Exemplo

Existem 8 tipos desta propriedade, sendo eles:

Grayscale

Blur

Brightness

Contrast

Drop Shadow

Hue Rotation

Invert

Opacity

O corpo do código deste efeito está descrito abaixo. Deve-se colocar as adaptações para outros navegadores, como descrito no último parágrafo deste tutorial:

filter: [tipo](opção);

Basta adicionar o código descrito no exemplo no elemento em que se deseja o efeito.

Observação: É interessante inserir as propriedades de imagem, quando estas estão dentro de uma div qualquer, como no exemplo abaixo:

.div img {width; height; [...]; filter: [tipo](opção); }

(Lembrando que .div é o nome da sua div)

Olá! A propriedade Transform, alinhado com hover e transição, dá um efeito bem legal.

Exemplo

Existem 5 tipos de transform:

Rotate (Rotação)

Translate (Movimento)

Scale (Escala, Zoom)

Matrix (”Torcido” complexo)

Skew (”Torcido”)

O corpo do código deste efeito está descrito abaixo. Deve-se colocar as adaptações para outros navegadores, como descrito no último parágrafo deste tutorial:

transform: [tipo](opção);

Olá! Vou falar um pouquinho sobre a seleção colorida, que é quando você seleciona um texto com o mouse e esta seleção é personalizada.

Exemplo

É bem simples. Basta inserir o código abaixo em qualquer lugar entre as tags <style> e </style>, ou seja, no CSS.

::selection {color:#eee; background:#e17e66}; ::-moz-selection {color:#eee ;background:#e17e66;} ::-webkit-selection {color:#eee; background:#e17e66};

A seguinte parte muda a cor que a letra deve tomar ao ser selecionada.

color:#eee;

A seguinte parte muda a cor do fundo que a seleção deve tomar.

background:#e17e66

Lembrando que são 3 códigos praticamente iguais para que funcione em todos os navegadores.

Olá! Hoje vou ensinar como utilizar fontes personalizadas do Google.

Exemplos

As fontes podem ser encontradas aqui.

https://fonts.google.com/

Neste site, é possível fazer uma live preview de como a palavra/frase fica com a fonte desejada (1) .

Podemos selecionar uma ou várias delas para inserir no layout (2).  As informações das fontes (tamanhos, formatações, etc) são mostradas em (3).

Os códigos das fontes selecionadas são mostrados ao clicarmos na barra preta com a quantidade de fontes selecionadas.

A seguinte parte deve ser inserida logo abaixo de <head>, no código.

<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Bungee+Inline|Indie+Flower|Poiret+One|Shadows+Into+Light" rel="stylesheet">

Observação: Em alguns layouts, como o Blogger, deve ser inserido uma barra (/) ao final do código, depois de  “ rel="stylesheet", ficando assim:

<link href  [...]  rel="stylesheet" />

As fontes podem ser aplicadas em elementos da seguinte maneira. Podem ser definidos tamanho e formatação normalmente:

font-family: 'Amatic SC', cursive;

Exemplo

Olá! Continuando com a propriedade border, existe a possibilidade de colocar imagens nas bordas com o seguinte código na div em que se deseja o efeito:

border: 10px solid transparent;  padding: 15px; border-image: url( IMAGEM) 50 stretch;  -webkit-border-image: url( IMAGEM) 50 stretch;  -o-border-image: url(IMAGEM) 50 stretch; 

Em “IMAGEM” deve ser inserida uma url de uma imagem.

A parte “50 stretch” informa que a imagem será “esticada” em 50. O intervalo varia entre 1 e 100 e a palavra “stretch” pode ser substituída por “round” para repetir a imagem na borda.

Olá! Vim trazer um facilitador de vidas:

border-radius.com

Este site é um gerador de bordas arredondadas para aqueles que, como eu, tem uma preguiça danada de ficar alterando borda por borda. O site já gera os códigos adaptados para todos os navegadores. Mão na roda!

Exemplos

Dá para fazer coisas bem legais com bordas utilizando hover e transição, como expliquei aqui.

Olá! Vou tentar explicar detalhadamente esses efeitos.

Exemplos

Hover

Hover: Hover é o estado que um elemento irá tomar quando passarmos o mouse em cima dele. Você pode aplicar hover em um elemento, qualquer que seja ele, para que ele mude de cor, de tamanho, de largura, de opacidade [...]

Como Inserir um Hover

Para inserir um hover em um elemento, você deve adicionar no código, de preferência abaixo do estilo do elemento, o nome que foi dado a ele seguido de :hover

Por exemplo:

Se você possui uma div class de um elemento que se chama .elemento, ela seria algo parecido com

.elemento {  width:50px, height:30px; [...]  }

Adicionando o hover para deixar o elemento opaco em 50% abaixo desta div, ficamos com:

.elemento {  width:50px,  height:30px; [...]  } 

.elemento:hover {  opacity:0.5 }

Não é necessário repetir todo o código da div de cima, pois o hover é como se fosse uma extensão desta. É importante que não haja espaço entre os dois pontos e a palavra “hover”.

Transição

Transição: Transição é o tempo que o elemento vai levar para atingir o estado final do hover. A mudança não é súbita, e sim sutil. Aqui temos uma tabela em inglês com todas as propriedades que suportam transição e aqui temos outra tabela contendo quais navegadores podem utilizá-la.

Como inserir transição

Para utilizar a transição, insira o seguinte código na div em que se deseja o efeito.

transition:0.5s ease-in;   -moz-transition:0.5s ease-in;  -webkit-transition:0.3s ease-in;  -o-transition:0.5s ease-in; 

A parte “0.5s” representa o tempo de transição e pode variar entre 0.1 (mais devagar) e 1 (mais rápido).

O código em si é apenas este:

transition:0.5s ease-in;

Os outros são adaptações para todos os navegadores:

 -moz para mozilla, 

-webkit para safari, google chrome e opera

-o para opera

Espero que tenha ajudado!