Introdução as novidades do CSS3

Veja neste artigo algumas novidades da nova versão de Cascading Style Sheets, o CSS3.

por Ricardo Arrigoni

Olá pessoal, no artigo de hoje vou dar uma breve introdução sobre CSS3, mas antes de começarmos a falar sobre o css3, é necessário ter um breve conhecimento sobre CSS2, para começar eu sugiro que leiam bastante o manual de css: http://www.w3schools.com/css/. O site é em inglês mas é bem simples de entender e vai te ajudar a ter uma noção maior do que é CSS.

O CSS nada mais é do que uma linguagem de customização de elementos seja ele HTML, javascript, XML, etc. Com o seu uso é possível estilizar praticamente qualquer coisa em um website.

O avanço dos CSS

Vamos falar um pouco sobre o avanço dos estilos css, abaixo vai uma lista com algumas considerações sobre o css1 e o css2, depois vamos começar a falar sobre o css3.

O CSS1 significou um avanço muito importante na hora de construir websites, permitindo que os desenvolvedores pudessem ter muito mais controle sobre os elementos da página, mas mesmo com esse avanço todo, sempre existe uma coisa ou outra que o desenvolvedor sente necessidade de fazer e que essa versão não permitia que ele fizesse.

Com a chegada do CSS2, algumas novidades interessantes foram incorporadas, o que melhorou e muito a qualidade dos websites desenvolvidos, mas assim como o que aconteceu com o CSS1, após um tempo tornou-se necessário que tivesse algo a mais para ser acrescentado, pois já haviam algumas coisas que a versão 2 já não estava suprindo, foi aí então que surgiu o CSS3.

Com o css3 muitas novas propriedades foram inseridas, abaixo vou listando elas e mostrando como usá-las.

Obs.: Neste artigo não vou explicar a fundo o que cada uma delas faz, vou dar apenas uma leve introdução do que se trata, nos próximos artigos eu venho explicando mais a fundo o que cada uma delas faz.

Bordas

• border-color - É possível definir a cor da borda
• border-image - É possível definir uma imagem como borda
• border-radius - É possível arredondar os cantos das bordas
• box-shadow - É possível colocar uma sombra em um determinado Box, elemento ou imagem.

Listagem 1: Exemplo de como usar propriedades de bordas

div{
	border-color: #00000;
	border-image: url(border.png) 27 27 27 27 stretch stretch;
	border-radius: 10px 5px 2px 15px;
	box-shadow: 10px 10px 5px #55555;	
}

Background

• background-origin - Quando colocamos uma imagem de fundo em um elemento de HTML .
• background-clip - Onde o background começa a ser desenhado.
• background-size - Tamanho do background.

Listagem 2: Exemplo de como usar propriedades de background

div {
    background-image: url(background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }

Cor

• cores HSL - Abreviação de hue, saturation e luminosity.
• cores HSLA - Abreviação de Hue, saturation, luminosity e alfa
• cores RGB - Abreviação de red, Green, blue.
• Opacidade - Define a transparência do elemento.

Listagem 3: Exemplo de como usar propriedades de cores

div {
   color: rgb(100%, 100%, 0%);
}
div{
color: hsl(0, 100%, 30%);
}
div{
background: hsla(0, 0%, 0%, 1);
 }
div{
opacity:0.5;
}

Texto

• text-shadow - Sombra do texto
• text-overflow - Definir o que acontece com o texto que sobra na div, ou seja, quando o texto é maior do que o espaço reservado para ele. Bastante comum em sites de artigos/blogs em que exibem na home apenas uma parte do conteúdo.

Listagem 4: Exemplo de como usar propriedades de textos

div{
text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black
 }
div.teste{
text-overflow:ellipsis;
}

Interface

• box-sizing: Indica que o tamanho do Box levará em consideração possíveis bordas que você venha incluir.
• resize - Especifica se um element é ou não redimensionável pelo usuário.
• outline - Define uma segunda borda por fora na div.
• nav-top, nav-right, nav-bottom, nav-left: Essa propriedade especifica para onde vai ocorrer a navegação ao usar uma seta para esquerda ou direita por exemplo. Atualmente está sendo suportada apenas pelo navegador Opera

Listagem 5: Exemplo de como usar propriedades de textos

div{
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
 div{
resize:both;
overflow:auto;
}
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
button#b1{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}

Seletores

• Seletores por atributos: Além dos seletores mais comuns como os de tag’s, classes e id’s, existem os seletores de atributos como um href, por exemplo.

Listagem 6: Exemplo de como usar propriedades de seletores

[href] {
  color: rgb(102,0,0);
  border-bottom: 1px dotted rgb(102,0,0);
}

Modelo de box

• overflow-x, overflow-y: Utilizada para realizar recortes nas bordas do eixo x e y.

Listagem 7: Exemplo de como usar propriedades de modelos de box

div{
overflow-x:hidden;
}

Outros

• media queries: Definem algumas condições para o uso de css específicos.

Listagem 8: Exemplo de como usar propriedades de media queries

 <link rel="stylesheet" href="estilo.css" media="screen and (color)" />

Para entenderem um pouco mais sobre esse assunto, eu tenho um artigo explicando mais sobre os : Media Queries

Bom pessoal, nesse artigo eu quis apenas mostrar algumas das novidades do css3, nos próximos artigos vou explicar mais a fundo cada uma dessas novidades.

Espero que tenham gostado, até a próxima.

Ricardo Arrigoni - Desenvolvedor Front-end