15/02/2011 - 12:09:43
A proposta da W3C é tornar “CrossBrowser” estas propriedades, de modo que funcionem em todos os navegadores sem diferença. Isso ainda não é realidade nos navegadores atuais, mas não se preocupe, em breve, com a chegada do HTML5 as coisas mudarão. Já estão mudando!
Bordas
Seletores por atributos, igual jQuery. Lembra? Exemplo:
Terá como definirmos se a barra de rolagem horizontal ou vertical deve aparecer, sem o uso de JavaScript (Graças ao CSS3).
Círculo usando border-radius:
Sintaxe:
Exemplo:
Então aguarde. Em breve será lançado o fantástico curso de HTML5 e CSS3 do TreinaWeb, com todas as propriedades atuais do CSS3, Canvas com HTML5, os novos elementos do HTML 5 e etc.
Principais propriedades do CSS3
CSS é a sigla para Cascading Style Sheets, traduzido em português para Folhas de Estilo em Cascata. Folhas de estilo nada mais são do que documentos em que são definidas as regras de formatação e de estilos a serem aplicadas aos elementos estruturais de marcação de texto (Exemplos de aplicação do CSS: HTML e XML).
Faça o curso de CSS3 Básico
A Wikipédia descreve bem o que é:
CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.
A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
Compatibilidade
Não são todas as versões dos navegadores que suportam.- Internet Explorer 7 e 8 – Muito pouco ou quase nenhum suporte.
- Internet Explorer 9 – Suporta muito bem.
- Firefox 3 – Suporta razoavelmente bem.
- Firefox 4 – Suporta muito bem.
- Safari, Chrome e Opera – Suportam muito bem.
Prefixos CSS3
O CSS3 ainda não está completamente implementado e muito menos os Browsers seguem o mesmo padrão para cada propriedade. Por este motivo, algumas propriedades devem ser precedidas de um prefixo que indica que, àquela propriedade, se trata de uma extensão que somente aquele navegador específico interpretará.- Safari e Chrome: -webkit-
- Firefox: -moz-
A proposta da W3C é tornar “CrossBrowser” estas propriedades, de modo que funcionem em todos os navegadores sem diferença. Isso ainda não é realidade nos navegadores atuais, mas não se preocupe, em breve, com a chegada do HTML5 as coisas mudarão. Já estão mudando!
Principais novidades do CSS3
O artigo será breve, mostraremos na prática apenas algumas propriedades. Mas veja a lista das principais novidades do CSS3:Bordas
- border-radius
- border-color
- box-shadow
- border-image
- text-shadow
- word-wrap
- @font-face
- text-overflow
- background-clip
- background-origin
- background-size
- - Múltiplos backgrounds (Vários backgrounds)
- HSL
- HSLA
- RGBA
- - Opacidade
- box-sizing
- resize
- outline
- nav-top
- nav-right
- nav-bottom
- nav-left
Seletores por atributos, igual jQuery. Lembra? Exemplo:
a[id="link-site"]
Overflow / Barra de rolagem
Terá como definirmos se a barra de rolagem horizontal ou vertical deve aparecer, sem o uso de JavaScript (Graças ao CSS3).
- overflow-x
- overflow-y
- Media Queries
- Web Fonts
- Criação de múltiplas colunas de texto
- Etc.
CSS3 na prática
Agora vamos brincar um pouco com CSS3. Os exemplos mostrados aqui foram executados nos navegadores Firefox 4 e Google Chrome 9.border-radius
Permite arredondar os cantos de um elemento HTML, comumente usado em Divs. Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreinaWeb CSS3</title>
<style>
.box-radius{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #234666;
color: #FFFFFF;
padding: 0.5em;
width: 170px;
}
</style>
</head>
<body>
<div class="box-radius">TreinaWeb Cursos - CSS3</div>
</body>
</html>
Resultado:
Círculo usando border-radius:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreinaWeb CSS3</title>
<style>
.box{
border-radius: 50px 50px 50px 50px;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
display: -webkit-box;
text-align: center;
width: 100px;
height: 100px;
background-color: #234666;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">TreinaWeb</div>
</body>
</html>
Resultado:
box-shadow
Aplica o efeito de “sombra” ou “profundidade” nas caixas.Sintaxe:
box-shadow: x-offset y-offset blur cor;
Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreinaWeb CSS3</title>
<style>
.box{
border-radius: 50px 50px 50px 50px;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
display: -webkit-box;
-webkit-box-shadow: 1px 2px 5px #234666;
-moz-box-shadow: 1px 2px 5px #234666;
box-shadow: 1px 2px 5px #234666;
text-align: center;
width: 100px;
height: 100px;
background-color: #FFFFFF;
color: #234666;
font-weight: bold;
}
.box2{
-webkit-box-shadow: 1px 2px 5px #A3A3A3;
-moz-box-shadow: 1px 2px 5px #A3A3A3;
box-shadow: 1px 2px 5px #A3A3A3;
padding: 1em;
margin: 1em;
width: 110px;
}
</style>
</head>
<body>
<div class="box">TreinaWeb</div>
<div class="box2">CSS3 TreinaWeb</div>
</body>
</html>
Resultado:
text-shadow
Aplica sombra ao texto de um elemento. Nesta propriedade não temos a necessidade de usar os famosos “prefixos”.Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreinaWeb CSS3</title>
<style>
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.box{
-webkit-box-shadow: 1px 2px 5px #A3A3A3;
-moz-box-shadow: 1px 2px 5px #A3A3A3;
box-shadow: 1px 2px 5px #A3A3A3;
padding: 0.5em;
width: 350px;
}
.box h1{
text-shadow: 0 1px 1px #234666;
color: #B1CCE4;
font-size: 35px;
}
.box2{
text-shadow: 0 1px 0 #234666, 0 -1px 0 #234666, 1px 0 0 #234666, -1px 0 0 #234666;
padding: 0.5em;
margin-top: 1em;
font-size: 35px;
width: 335px;
color: #FFFFFF;
background-color: #B1CCE4;
}
</style>
</head>
<body>
<div class="box">
<h1>TreinaWeb CSS3</h1>
</div>
<div class="box2">Cursos TreinaWeb</div>
</body>
</html>
Resultado:
Conclusão
Vimos aqui apenas um pouco do que pode ser feito com CSS3. Mas já dá pra ter dimensão do que em breve poderemos trabalhar, não é verdade?Então aguarde. Em breve será lançado o fantástico curso de HTML5 e CSS3 do TreinaWeb, com todas as propriedades atuais do CSS3, Canvas com HTML5, os novos elementos do HTML 5 e etc.
