← Conversa Geral

O que nos traz de novo o CSS 3?

Lida 3836 vezes

Offline

Flieger 
Membro
Mensagens 198 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

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 CSS

O 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.





Código: (Ficheiro estilo.css) [Seleccione]
/* 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 3

Se 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 arredondados

Formatar uma div para que se apresente com os cantos arredondados. Verifique de seguida:




Código: (Ficheiro estilo.css) [Seleccione]
#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:

Código: [Seleccione]
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;

Opacidade das cores

Com esta propriedade pode, através de css, tirar partido da opacidade das cores. Verifique de seguida:




Código: (Ficheiro estilo.css) [Seleccione]
#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:




Código: (Ficheiro estilo.css) [Seleccione]
#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.