Elaborar um código CSS3 - Vol. 1 Efeitos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Elaborar um código CSS3 - Vol. 1 Efeitos

Mensagem por seender em 31/12/12, 07:44 pm

CSS3 Efeitos

O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento. CSS3 é a mais nova versão da famosa da linguagem utilizada para personalização do layout de páginas da web, CSS, onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas.

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))
EaseEspecifica 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-inEspecifica um efeito de transição com um início lento (equivalente a cúbico-bezier(0.42,0,1,1))
Ease-outEspecifica um efeito de transição com uma extremidade lenta (equivalente a cúbic-bezier(0,0,0.58,1))
Ease-in-outEspecifica 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.



© Fórum dos Fóruns


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

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum