sexta-feira, 16 de março de 2012

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, XHTML, XML e etc).

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.
A tendência é que em pouco tempo os usuários, até mesmo os leigos, atualizem seus navegadores, principalmente pela chegada do HTML5.

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-
Vale ressaltar que estes prefixos não são hacks, são recursos do browser.

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
Texto
  • text-shadow
  • word-wrap
  • @font-face
  • text-overflow
Background
  • background-clip
  • background-origin
  • background-size
  • - Múltiplos backgrounds (Vários backgrounds)
Cores
  • HSL
  • HSLA
  • RGBA
  • - Opacidade
Interface
  • box-sizing
  • resize
  • outline
  • nav-top
  • nav-right
  • nav-bottom
  • nav-left
Seletores 
 
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
Outros Recursos
  • 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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>INFO Capi - Criação de Sites</title>

  <style>
  .box-radius{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #234666;
    color: #FFFFFF;
    padding: 0.5em;
    width: 200px;
  }
  </style>

</head>

<body>

    <div class="box-radius">INFO Capi - Criação de Sites</div>

</body>

</html>
Resultado:

 
Círculo usando border-radius: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>INFO Capi - Criação de Sites</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">INFO Capi</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 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>INFO Capi - Criação de Sites</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">INFO Capi</div>
    <div class="box2">Criação de Sites</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 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>INFO Capi - Criação de Sites</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>INFO Capi</h1>
    </div>

    <div class="box2">Criação de Sites</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.
Postado por às

Nenhum comentário:

Postar um comentário

"Ajude com nossas INFOrmações. Retribua com bons comentarios."

Assinar: Postar comentários (Atom)

Postagens populares