Elaborar um código CSS3 - Vol. 1 Efeitos

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

Astúcia Elaborar um código CSS3 - Vol. 1 Efeitos

Mensagem por seender em 31.12.12 21:44

Elaborar um código CSS3 - Vol. 1 Efeitos Sem_t123   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.
Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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.

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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).

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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).

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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;
Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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.

Elaborar um código CSS3 - Vol. 1 Efeitos Logo @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.

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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.
Elaborar um código CSS3 - Vol. 1 Efeitos Cssbor10
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.

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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.
Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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:
Elaborar um código CSS3 - Vol. 1 Efeitos Exempl10

Elaborar um código CSS3 - Vol. 1 Efeitos Logo 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


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

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


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