Elaborar um código CSS3 - Vol. 1 Efeitos

Border Radius

1. Estrutura das propriedades:

Classe {
Propriedades;
}

No local de vermelho é de extrema importância o preenchimento, este local implica em dizer a todo o código que será num determinado local que todas as propriedades serão aplicadas. Para mais informações sobre elaboração de novos códigos, consulte o tutorial: Elaborar um código CSS

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-border-radius-topleft: Xpx;
Safari, Chrome, Android, Internet 9+	-webkit-border-top-left-radius: Xpx;

Vermelho -> Aonde irá ser definido se será modificado a parte de cima (top) ou a parte de baixo (bottom) da div ou de outros códigos html que definam uma classe css.
Verde -> Poderá ser o valor left (Esquerda) ou right (Direita), este será aonde a borda será modificado, no caso acima será modificada a parte de cima da borda (top) no lado esquerdo.
Laranja -> Local aonde terá de adicionar a quantidade que a borda ficará redonda, quanto maior o valor, maior será o arredondamento.

Box Shadow

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-box-shadow: Xpx Xpx Xpx #000000;
Safari, Chrome, Android, Internet 9+	-webkit-box-shadow: Xpx Xpx Xpx #000000;
Comum a todos	box-shadow: Xpx Xpx Xpx #000000;

Vermelho -> Local aonde irá definir o valor do comprimento horizontal, quanto maior o valor mais a sombra da classe irá para a direita e quanto menor for o valor mais a sombra irá para a esquerda.
Verde -> Local aonde irá definir o valor do comprimento vertical, quanto maior o valor mais a sombra da classe irá para baixo e quanto menor for o valor mais a sombra irá para cima.
Laranja -> Definirá neste local o desfoque da sombra, quanto maior for o valor maior desfoque a sombra terá, sendo assim, se espalhando mais, obviamente, quanto menor for o valor menos desfoque a sombra terá.
Violeta -> Local aonde irá definir a cor de fundo da sombra (em hexadecimal).

Text Shadow

Código
Propriedades para cada navegador
Comum a todos	text-shadow: Xpx Xpx Xpx #000000;

Vermelho -> Local aonde irá definir o valor do comprimento horizontal, quanto maior o valor mais a sombra da classe irá para a direita e quanto menor for o valor mais a sombra irá para a esquerda.
Verde -> Local aonde irá definir o valor do comprimento vertical, quanto maior o valor mais a sombra da classe irá para baixo e quanto menor for o valor mais a sombra irá para cima.
Laranja -> Definirá neste local o desfoque da sombra, quanto maior for o valor maior desfoque a sombra terá, sendo assim, se espalhando mais, obviamente, quanto menor for o valor menos desfoque a sombra terá.
Violeta -> Local aonde irá definir a cor de fundo da sombra (em hexadecimal).

Text Rotation

Código
Propriedades para cada navegador
Mozilla, Gecko	-moz-transform: rotate(Xdeg); writing-mode: lr-tb;
Safari, Chrome, Android, Internet 9+	-webkit-transform: rotate(Xdeg); writing-mode: lr-tb;
Comum a todos	-o-transform: rotate(Xdeg); writing-mode: lr-tb;

Background RBGA

 

Antes de aprendermos sobre o código, há algo interessante a se adquirir como conhecimento, o título RBG já dá o nome do que iremos trabalhar no código, observe: R -> red, G -> Green e B -> Blue.

Código
Propriedades para cada navegador
Comum a todos	background-color: rgba(X, X, X, X); background: rgba(X, X, X, X); color: rgba(X, X, X, X);

Vermelho -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor vermelha.
Verde -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor verde.
Azul -> Será definido um número de 0 a 255 que estará relacionado com a intensidade da cor azul.
Laranja -> Será definido um número de 0 a 1 (passando por 0.1, enfim...) que estará relacionado com a opacidade do fundo da classe.

@Fonte Face

 

Este código não precisa ser adicionado no lugar de propriedades como foi dito no começo do tópico, ele por si só em uma folha estilo CSS já fará o efeito.

Código
Propriedades para cada navegador
Comum a todos	@font-face { font-family: Nome da fonte; src: url(Endereço-da-fonte); }

Laranja -> Neste local irá adicionar simplesmente o nome da fonte que irá utilizar.
Vermelho -> Modifique adicionando o link da onde a fonte estará hospedada. Lembre-se, não é para colocar o link para download da fonte e sim ela já baixada e extraída, normalmente em um formato .otf.

Outline Offset

 

Código
Propriedades para cada navegador
Comum a todos	outline-style: solid; outline-width: Xpx; outline-color: #000000; outline-offset: Xpx;

Vermelho -> Será a textura da borda, pode ser substituído por dotted, dashed, solid, double, groove, ridge,inset, hidden (Oculta), outset, none (Sem definição), inherit (Este valor será o valor herdado de seu elemento pai), cada uma com estilos diferentes.
Laranja -> Quanto maior o valor maior será o valor da grossura da borda.
Violeta -> Neste local irá definir a cor da borda, lembre-se sempre que o valor a ser definido será um valor hexadecimal.
Verde -> Quanto maior for o valor maior será o espaço da borda em relação a classe escolhida.

Transitions

 

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe { -moz-transition:All 0.001s linear; -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe { -webkit-transition:All 0.001s linear; -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe { -ms-transition:All 0.001s linear; -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe { -o-transition:All 0.001s linear; -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Estes serão os atributos em modo normal, este tipo de efeito se relaciona com o seletor :hover, ou seja a propriedade transition diz como a classe irá passar para o modo hover.

• Modo hover
  

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe:hover { -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe:hover { -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe:hover { -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe:hover { -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Vermelho -> Estará literalmente relacionado a velocidade e o modo como será executado a animação, poderá ser trocado por: linear, ease, ease-in, ease-out, ease-in-out, veja mais abaixo para que serve qualquer uma.
Negrito -> Rotate: O quanto a classe irá rodar, Scale: O tamanho da classe, Skew: O quanto a classe irá se distorcer, Translate: Localização da classe - quanto maior for o valor mais para a direita ela irá, quanto menor mais para a esquerda.
Laranja -> Valor do cúbico-bezier, entenda mais...

Linear	Especifica um efeito de transição com a mesma velocidade do início ao fim (equivalente ao cúbico-bezier(0,0,1,1))
Ease	Especifica um efeito de transição com um início lento, em seguida, rapidamente, em seguida, acabar lentamente (equivalente a cúbico-bezier(0.25,0.1,0.25,1))
Ease-in	Especifica um efeito de transição com um início lento (equivalente a cúbico-bezier(0.42,0,1,1))
Ease-out	Especifica um efeito de transição com uma extremidade lenta (equivalente a cúbic-bezier(0,0,0.58,1))
Ease-in-out	Especifica um efeito de transição com um início lento e no final (equivalente ao cúbico bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	O cúbico bezier defini seus próprios valores, que são valores numéricos possíveis de 0 a 1.

CSS Gradient

 

Este código não precisa ser adicionado no lugar de propriedades como foi dito no começo do tópico, ele por si só em uma folha estilo CSS já fará o efeito.

Código
Propriedades para cada navegador
Comum a todos	background:-moz-linear-gradient(0% 20% 359deg, #000, #FFF 40%)

Vermelho -> Local aonde a cor primária irá começar, quanto menor for o valor mais para esquerda e quanto maior mais para a direita.
Verde -> Local aonde a cor secundária irá começar, este valor só fará diferença caso a cor primária esteja em 98%, dai caso o valor de verde for diminuído prevalecerá a cor secundária.
Laranja -> Será o angulo que o efeito será reproduzido.
Rosa -> Cor primária.
Preto -> Cor secundária.
Azeitona -> O quanto a cor secundária ficará esfumassada.

O local em negrito irá definir se o fundo será reproduzido com o efeito radial ou linear, veja a imagem para entender melhor:

CSS Transform

 

Código
Propriedades para cada navegador
Mozilla, Gecko	Classe { -moz-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Safari, Chrome, Android, Internet 9+	Classe { -webkit-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Navegador MS IE 8	Classe { -ms-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }
Comum a todos	Classe { -o-transform: rotate(Xdeg) scale(X) skew(Xdeg) translate(Xpx); }

Negrito -> Rotate: O quanto a classe irá rodar, Scale: O tamanho da classe, Skew: O quanto a classe irá se distorcer, Translate: Localização da classe - quanto maior for o valor mais para a direita ela irá, quanto menor mais para a esquerda.

Considerações finais: É importante ressaltar que é imprescindível que tenha plenos conhecimentos sobre a estrutura de códigos css, veja o tutorial: Elaborar um código CSS.

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Apostila CSS3 - Vol. 1