sexta-feira, 17 de dezembro de 2010

O PODER DO CSS3

Criar efeitos como borda arredondada, sombra e degradê nunca foi tarefa fácil. Antes do css3 isso só era possível em imagens estáticas (o que exigia domínio de outras ferramentas como fireworks, photoshop, etc...) ou a partir de plugins específicos (ex:jquery).

Abaixo alguns exemplos de aplicação desse poderoso código:

BORDA ARREDONDADA


.sua_classe ou #seu_id {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

SOMBRA

Exemplo de BOX SHADOW

.sua_classe ou #seu_id {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

DEGRADÊ:


.sua_classe ou #seu_id {
background-color: #333; /* cor do bg, caso o browser não tenha suporte ao CSS3. Ex: IE*/
background-image: -moz-linear-gradient(100% 100% 90deg, #333, #efefef); /* para o mozzila */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/
}

Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...