Olá caros leitores,
Vamos falar um pouco de css3, mais especificamente duas coisas que usamos bastante:
sombras e cantos arredondados.
Mas antes de explicar como se faz isso com css3 é bom lembrar da época em que fazer isso era difícil (isso nos ajuda a ter apreço pelas coisas novas que foram feitas para simplificar)
Não tinha jeito, para fazer sombra (de qualidade) com cantos arredondados precisávamos de um software gráfico de apoio. Os cantos e partes da sombra eram imagens que, com a propriedade de background-image, fazia-se uma gambiarra para fazer uma div com cantos arredondados.
Mas isso é coisa do passado.
Vamos às novidades:
Uma div com sombra:
div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
-o-box-shadow: -5px 5px 6px gray;
-ms-box-shadow: -5px 5px 6px gray;
}
renderizando fica assim (Espero que seu browser tenha suporte!):
Agora vamos adicionar os cantos arredondados:
div{
width:200px;
height:200px;
box-shadow: -5px 5px 6px gray;
-webkit-box-shadow: -5px 5px 6px gray;
-moz-box-shadow: -5px 5px 6px gray;
border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
Renderizando:
Talvez você tenha notado os prefixos: -o, -webkit, -moz, -ms
Isso se refere ao tipo de browser
-webkit (browsers baseados em webkit)
-o (opera)
-ms (Microsoft IE)
-moz (mozilla)
É que nem todos interpretarão se você colocar apenas: box-shadow ou border-radius
Bem melhor do que antigamente,
Fica a dica
Gustavo Marques
Nenhum comentário:
Postar um comentário