Antes de avançar com as novidades do CSS 3, e para aqueles que pela primeira vez estão a ler sobre o assunto, vou iniciar este artigo fazendo uma breve introdução ao que é o CSS. Caso já estejas dentro do assunto podes começar a ler aqui.
Introdução ao CSSO CSS, abreviatura utilizada para o termo Cascading Style Sheet, é um mecanismo que nos permite definir estilos, que podemos posteriormente utilizar sempre que necessário ao longo de uma página de código. A utilização de CSS para além de permitir um código mais limpo, vai permitir também uma melhor automatização do trabalho e facilita futuras alterações a nível do aspecto do website. Vou então demonstrar um exemplo básico para que se perceba como utilizar o CSS.
/* Isto é uma folha de estilo. É aqui que se definem as formatações
que vamos utilizar no nosso ficheiro home.html */
/* Formatação dos titulos H1 */
h1{
color:#FF0000;
}
/* Formatação dos paragrafos */
p {
font-size:16px;
color:#000000;
}
No exemplo demonstrado, utilizámos a nossa folha de estilos (Cascading Style Sheet) para formatar os títulos H1 e os parágrafos do nosso documento.
Novidades do CSS 3Se o CSS 2 já facilitava bastante a vida de todos aqueles que fazem página na Internet, o CSS 3 fez jus ao seu antecessor e inovou ainda mais. Na lista seguinte pode verificar as novas propriedades do CSS 3.
Borders (border-color/border-image/border-radius/box-shadow);
Backgrounds (background-origin and background-clip/background-size/multiple backgrounds);
Color (HSL colors/HSLA colors/opacity/RGBA colors);
Text effects (text-shadow/text-overflow/ word-wrap);
User-interface (box-sizing/resize/outline/nav-top, nav-right, nav-bottom, nav-left);
Selectors (attribute selectors);
Basic box model (overflow-x/overflow-y);
Generated Content (content);
Other modules (media queries/multi-column layout/Web fonts/speech);
Para que possam perceber algumas destas novas propriedades disponíveis com o CSS 3, vou deixar alguns exemplos da sua utilização.
Cantos arredondadosFormatar uma div para que se apresente com os cantos arredondados. Verifique de seguida:
#conteudo {
background-color:#CCCCCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
}
Caso prefira configurar os cantos de forma individual utilize os seguintes códigos:
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
Opacidade das coresCom esta propriedade pode, através de css, tirar partido da opacidade das cores. Verifique de seguida:
#conteudo {
background: rgb(255, 0, 0) ; opacity: 0.8;
padding: 10px;
}
Multiplos backgrounds Agora pode utilizar várias imagens como background, para isso basta apenas separar as mesmas com vírgulas. Verifique de seguida:
#conteudo {
padding: 10px;
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
}
Termino assim este artigo. Muitos outros efeitos podem ser agora reproduzidos com o CSS 3. Quem sabe, talvez volte a abordar este assunto.
