Desenvolvimento web
CSS
Propriedade Box Shadow do CSS3
21/06/10
Conforme o próprio nome indica, a propriedade box-shadow do CSS3 serve para criar sombras em “caixas”.
Atualmente [21/06/2010] a propriedade só é suportada em navegadores baseados no Webkit ou no Firefox, através das propriedades -webkit-box-shadow e -moz-box-shadow, respectivamente. No entanto, implementei-os em um projeto pessoal, e percebi que a renderização se tornou lenta no scroll de textos longos.
Traduzindo a documentação da W3C:
A propriedade ‘box-shadow’ anexa uma ou mais sombras à caixa. A propriedade é uma lista de sombras separadas por vírgulas, cada uma especificada por 2 a 3 medidas de largura, uma cor opcional, e uma palavra-chave ‘insert’ opcional. Larguras omitidas são iguais a zero; cores omitidas são iguais à cor escolhida pelo usuário.
Onde
<sombra> = inset? && [ <largura>{2,4} && <cor>? ]
Os parâmetros informados para cada sombra são:
- inset – indica que a sombra é “interna”, isto é, fica dentro da caixa. [opcional]
- deslocamento horizontal, à direita. Utilize valores negativos para deslocar à esquerda.
- deslocamento vertical, para baixo. Utilize valores negativos para deslocar a sombra para cima.
- raio de desfoque: o quão “borrada” ficará a sombra. O padrão é 1 pixel. [opcional]
- raio de propagação: o quão distante a sombra se expandirá além da caixa. [opcional]
- cor: a cor da sombra. [opcional]
Um exemplo vale mais do que mil palavras:
#box {
background: #ff0;
box-shadow: 2px 2px 6px 3px #f00;
-moz-box-shadow: 2px 2px 6px 3px #f00;
-webkit-box-shadow: 2px 2px 6px 3px #f00;
padding: 10px;
width: 150px;
}
O código acima irá renderizar:
Um exemplo de sombra interna:
#box2 {
background: #ccc;
box-shadow: inset 2px 2px 5px #000;
-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
width: 150px;
}
Resultado 2:
Múltiplas sombras, de diversas cores:
#box3 {
background: #000;
color: #fff;
box-shadow: -5px -5px 10px #f00,
-5px 5px 10px #00f,
5px -5px 10px #ff0,
5px 5px 10px #0f0
;
-moz-box-shadow: -5px -5px 10px #f00,
-5px 5px 10px #00f,
5px -5px 10px #ff0,
5px 5px 10px #0f0
;
-webkit-box-shadow: -5px -5px 10px #f00,
-5px 5px 10px #00f,
5px -5px 10px #ff0,
5px 5px 10px #0f0
;
padding: 10px;
width: 150px;
}
Resultado 3:
Exemplo do quarto parâmetro “spread”:
#box4 {
background: #000;
color: #fff;
box-shadow: 0 0 1px 10px #f00,
0 0 1px 20px #00f,
0 0 1px 30px #ff0,
0 0 1px 40px #0f0
;
-moz-box-shadow: 0 0 1px 10px #f00,
0 0 1px 20px #00f,
0 0 1px 30px #ff0,
0 0 1px 40px #0f0
;
-webkit-box-shadow: 0 0 1px 10px #f00,
0 0 1px 20px #00f,
0 0 1px 30px #ff0,
0 0 1px 40px #0f0
;
padding: 10px;
width: 150px;
}
Resultado 4:
Divirta-se!
Desmistificando @rules CSS
15/06/10
Regras at-rules (ou @rules) CSS são assim chamadas porque elas utilizam o caractere @ (“at”). Elas não são muito utilizadas como os outros elementos CSS, então se você estiver confuso sobre elas, aqui vai um guia rápido:
@charset
É usado para especificar o charset de sua folha de estilos (externa). É encontrada no topo de seu arquivo, e geralmente se parece com isso:
@charset “iso-8859-1″;
@import
É usado para importar uma outra folha de estilos, da seguinte forma:
@import url(novafolhadeestilos.css);
@import geralmente é usado para ocultar estilos de browsers antigos, que não os reconhecem muito bem. Desta forma é usado em conunto com a tag <link>.
@media
Aplicará seu conteúdo apenas ao tipo de mídia especificado. Algumas de suas opções são:
- all – qualquer mídia
- aural – sintetizadores de voz
- braille – braile
- handheld – para dispositivos portáteis
- print – para impressoras
- screen – para telas de computadores
Por exemplo, eu poderia especificar que para as impressoras, todo o texto deve ser negrito em uma fonte com serifa. Eu faria isso:
@media print { body {font-family:serif; font-weight:bold;} }
@font-face
É um método de especificar e embudir fontes de sua escolha no design de seu site. Para saber mais, consulte o Google Font Directory.
Este artigo é uma tradução livre de: http://www.devlounge.net/code/demystifying-css-at-rules
