Manuais e recursos para desenvolvimento web www.criarweb.

com

CSS 3

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Miguel Angel Alvarez Traduo de JML
(9 captulos)

Miguel Angel Alvarez Traduo de Celeste Veiga

(1 captulo)

Sara Alvarez Langa Traduo de Celeste Veiga

(2 captulos)

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Introduo a CSS3
Desde que CSS comeou passaram muitos anos e j vamos pela especificao de CSS3, que incorpora uma srie de novidades que vamos tratar de resumir neste artigo. O que CSS Se voc no sabe o que CSS provavelmente lhe interessaria comear lendo nosso manual de CSS ou a seo de CSS a fundo. No obstante, caberia dizer que CSS uma linguagem para definir o estilo ou a aparncia das pginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o contedo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparncia das pginas. Com CSS3, mais controle sobre a forma O objetivo inicial de CSS, separar o contedo da forma, se cumpriu j com as primeiras especificaes da linguagem. Entretanto, o objetivo de oferecer um controle total aos designers sobre os elementos da pgina foi mais difcil de cobrir. As especificaes anteriores da linguagens tinham muitas utilidades para aplicar estilos s webs, porm os desenvolvedores ainda continuam usando truques diversos para conseguir efeitos to comuns ou to desejados como as bordas arredondadas ou a sombra de elementos na pgina. CSS 1 j significou um avance considervel na hora de desenhar pginas web, trazendo muito maior controle dos elementos da pgina. Porm, como ainda ficaram muitas coisas que os designers desejavam fazer, mas que CSS no permitia especificar, estes deviam fazer uso de truques para o design. O pior destes truques que muitas vezes implica alterar o contedo da pgina para incorporar novas etiquetas HTML que permitam aplicar estilos de uma maneira mais elaborada. Dada necessidade de mudar o contedo, para alterar o desenho e fazer coisas que CSS no permitia, estava-se acabando com algum dos objetivos para os que CSS foi criado, que era o de separar por completo o contedo da forma. CSS 2 incorporou algumas novidades interessantes, que hoje j utilizamos habitualmente, porm CSS 3 ainda avana um pouco mais na direo, de dar mais controle sobre os elementos da pgina. Sendo assim, a novidade mais importante que traz CSS 3, para os desenvolvedores de webs, consiste na incorporao de novos mecanismos para manter um maior controle sobre o estilo com o qual se mostram os elementos das pginas, sem ter que recorrer a truques ou hacks, que a muitas vezes complicavam o cdigo das webs. Propriedades novas em CSS3 Segue aqui uma lista das principais propriedades que so novidade em CSS3. Bordas border-color border-image border-radius box-shadow

Fundos background-origin background-clip background-size

2

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Cor Texto

fazer camadas com mltiplas imagens de fundo

cores HSL cores HSLA cores RGBA Opacidade

text-shadow text-overflow Ruptura de palavras longas

Interface box-sizing resize outline nav-top, nav-right, nav-bottom, nav-left

Seletores Seletores por atributos

Modelo de caixa bsico overflow-x, overflow-y

Outros media queries criao de mltiplas colunas de texto propriedades orientadas a discurso ou leitura automtica de pginas web Web Fonts

Esta lista de novas propriedades de CSS3 foi tirado de: http://www.css3.info/preview/. um site em ingls, mas pode ser bom visitar para ir conhecendo mais detalhes sobre CSS3. Em futuros artigos daremos algumas chaves e explicaes sobre vrias destas propriedades, pelo menos as mais interessantes, com especificaes detalhadas, assim como exemplos que sirvam para ir conhecendo esta nova especificao de CSS. Artigo por Miguel Angel Alvarez - Traduo de JML

Atributo gradiente de cores em borda com CSS e Firefox

Investigando um pouco algumas das propriedades novas que vai trazer CSS 3, para completar a informao do artigo Introduo a CSS 3 , me deparei com um atributo para mudar a cor da
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 3

Manuais e recursos para desenvolvimento web www.criarweb.com

borda dos elementos da pgina, que nos permite definir a cor com uma sucesso de distintos valores de cores. Atualmente, com CSS podemos definir separadamente as cores da borda de um elemento, de cima, direita, abaixo e esquerda. Porm, no nos referimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar vrias cores distintas a uma parte, por exemplo, parte de cima da borda. Vi esta propriedade comentada em algum lugar como de CSS 3, porm segundo vejo no rascunho da especificao de CSS 3 para bordas e fundos, publicado pelo W3C, no aparece esta nova caracterstica como parte do novo padro. Por isso, temos que ressaltar que esta propriedade no de CSS 3, e sim que se trata de um atributo no padro de CSS, criado por Mozilla e que, portanto, se pode ver em seu navegador mais conhecido: Firefox. Dito de outra forma, uma extenso de CSS realizada por Mozilla. Na pgina de Mozilla podemos encontrar mais informao sobre esta extenso de CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors Os atributos aos que nos referimos que permitem definir vrias cores para cada uma das partes da borda so os seguintes:
-moz-border-top-colors -moz-border-right-colors -moz-border-bottom-colors -moz-border-left-colors

Em cada um dos atributos se define a cor, podendo especificar uma lista de cores, separadas por espaos, que se aplicaro a cada uma das partes da borda, de dentro para fora. Claro que a borda tem que ter uma largura maior que 1 para que se vejam as distintas cores. Com uma largura de 2 pixel se podero ver 2 cores diferentes, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente. Para ver uma das possibilidades que daria o uso deste atributo podemos ver um exemplo em uma pgina parte. (Porm, h que ter em conta que s se ver corretamente em Firefox). O cdigo para criar esse gradiente de cores seria o seguinte:
<style type="text/css"> .coresborda{ border-style: solid; border-width: 10px; -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; } </style>

uma pena que seja um atributo unicamente desenvolvido por Mozilla, embora se o suporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, talvez em algum momento se converta em um padro de CSS. No momento no passa de uma mera curiosidade e possibilidade de personalizao especial para os usurios de Firefox e outros navegadores baseados em Mozilla. Artigo por Miguel Angel Alvarez - Traduo de JML

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Bordas arredondadas em CSS 3

CSS 3 incorpora novas propriedades para o controle de bordas dos elementos. Agora se permitem bordas com as esquinas arredondadas, bordas com imagens (inclusive pode-se utilizar vrias imagens para definir o aspecto da borda, sombras, etc. Neste artigo vamos explicar como realizar bordas arredondadas com CSS3. Temos a propriedade border-radius, que permite definir bordas arredondadas nas esquinas, especificando as medidas do radio que devem dar curva das esquinas
border-radius: 5px;

Definiria um radio de 5 pixels no arredondamento das esquinas do elemento. At agora Mozilla adotou este atributo com um nome especial, que vlido para produtos como Firefox, enquanto que as especificaes de CSS3 no tiverem alcanado o estado "Candidate Recommendation", que quando se supe que os diferentes navegadores devem implementlas. O nome do atributo por enquanto :
-moz-border-radius

Quanto Internet Explorer h que dizer que ainda no suporta este atributo de CSS 3, porm esperemos que o pessoal de Microsoft possa implementar em breve no navegador, ou que as especificaes de CSS3 passem rpido ao estado "Candidate Recommendation", que seria a chamada para que se implementem na generalidade dos navegadores. Por enquanto, para navegadores Mozilla, o atributo border-radius se utilizaria, por exemplo, assim:
DIV { border: 1px solid #000000; -moz-border-radius: 7x; padding: 10px; }

Com isto conseguimos que todos os div tenham uma borda arredondada nas esquinas de radio de 7pixels. Podemos ver o exemplo em uma pgina a parte. Porm, h que lembrar que s se ver o efeito utilizando Firefox ou navegadores baseados em Mozilla. Contudo, o atributo border-radius tem outras possveis configuraes, na qual se podem definir os valores para o radio das quatro esquinas separadamente. Desta maneira:
-moz-border-radius: 7px 27px 100px 0px;

Assim estaramos definindo uma borda arredondada com radio de 7 pixel para a esquina superior esquerda, logo 27px para a esquina superior direita, de 100px para a inferior direita e 0px para a inferior esquerda. (H que explicar que um border-radius de 0px uma borda com esquina em ngulo reto) Podemos ver este ejemplo em uma pgina a parte.
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 5

Manuais e recursos para desenvolvimento web www.criarweb.com

As bordas arredondadas com CSS 3, como se poder imaginar, s so vistas se tiver sido definida alguma borda visvel ao elemento que as atribumos, seja solid, dotted, etc. Isso o que define as especificaes de CSS3, embora no momento de escrever o artigo devo assinalar que inclusive Mozilla ou Firefox (o nico que at agora suporta este atributo de CSS3) no funciona inteiramente corretamente com isto e s mostra as bordas arredondadas com solid. Outra coisa que definem as especificaes de CSS e que por enquanto no est funcionando inteiramente bem, que as imagens de fundo devem se ajustar s bordas arredondadas. Ocorre, at este momento, que as imagens de fundo saem por fora das bordas arredondadas. Confiamos em que no futuro isto possa ser revisado e otimizado, para que tudo funcione corretamente. Devemos lembrar que no momento de escrever o artigo ainda se tm que terminar de definir as especificaes de CSS 3 e depois, os navegadores web deveram se atualizar em um certo espao de tempo para suport-las completamente.
Nota: Oferecemos uma lista das caractersticas principais de CSS 3 no artigo Introduo a CSS3.

Artigo por Miguel Angel Alvarez - Traduo de JML

Mltiplas imagens de fundo com CSS

Com o atributo background-image podemos conseguir que um elemento da pgina tenha um fundo de imagem. Isto devemos saber, visto que algo bsico das folhas de estilo em cascata (CSS). Porm, neste artigo de CriarWeb.com vamos mostrar como poderamos conseguir que um elemento da web tivesse vrias imagens de fundo ao mesmo tempo. Colocar vrias imagens de fundo a um elemento princpio no se pode com CSS, por isso mostraremos como faz-lo com uma simples tcnica alternativa. Mas tambm veremos que em SS 3 existe a possibilidade de configurar vrios fundos ao mesmo tempo em um elemento, com uma declarao de background-image e sem a necessidade de realizar nenhum tipo de tcnica alternativa.
Referncia: Para conhecer um pouco da recente especificao de CSS3 seria bom ler o artigo Introduo a CSS 3.

Em CSS normal (CSS 1), como dissemos, podemos colocar um nico fundo a um elemento da pgina. Isto algo suportado por todos os navegadores. Como no podemos colocar mais de 1 fundo por elemento, para colocar vrios fundos ao mesmo tempo, temos que utilizar vrios elementos. A cada elemento lhe colocaremos um nico fundo, porm ao se mostrar os elementos no mesmo espao, conseguiremos o efeito desejado de ter vrios fundos de imagem ao mesmo tempo. Em nosso caso, vamos utilizar vrias camadas DIV aninhadas e cada uma ter seu fundo de imagem. O cdigo HTML que utilizaramos para aninhar vrias camadas DIV seria como segue:
<div id="fundo1"> <div id="fundo2"> <div id="fundo3"> contedo do elemento que vai ter 3 fundos de imagem distintos ... </div>

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

</div> </div>

Como se pode ver, podemos aninhar camadas DIV e cada uma ter um identificador, ou se preferirmos uma classe, para atribuir estilos por CSS. Ao estar aninhados, todos os elementos DIV se mostraro um em cima do outro. Agora vejamos o cdigo CSS para lhe dar fundos a cada um destes elementos DIV:
<style type="text/css"> #fundo1{ background-image: url(fundo1.gif); width: 300px; } #fundo2{ background-image: url(fundo2.png); background-repeat: no-repeat; background-position: bottom right; } #fundo3{ background-image: url(fundo3.png); background-repeat: no-repeat; background-position: center; } </style>

Os fundos iro se sobrepor uns aos outros, sendo o fondo1 o que ser visto mais abaixo e o fundo3 o que se ver mais acima. O resultado deste exemplo se pode ver em uma pgina parte. princpio todos os navegadores visualizaro perfeitamente os fundos, porm como utilizei imagens transparentes em formato PNG e Internet Explorer 6 tem problemas com a transparncia dos arquivos PNG, podemos encontrar algum defeito, mas os fundos dos elementos DIV se vero.

Colocar vrios fundos de imagem a um elemento com CSS 3

Uma das novas caractersticas de CSS 3 consiste na possibilidade de declarar vrios fundos de imagem a um elemento da pgina. O que antes vimos que possvel, criando vrios elementos aninhados e colocando um fundo em cada um, se pode fazer em CSS 3 com um s elemento, ao que aplicaremos vrios fundos distintos. O HTML do exemplo de vrias imagens de fundo seria o seguinte:
<div id="fundos"> texto de um nico elemento ... </div>

Agora vejamos o CSS 3 vlido para este exemplo:

<style type="text/css"> #fundos{ background: url(fundo3.png) bottom right no-repeat, url(fondo2.png) center no-repeat, url(fundo1.gif) center repeat; width: 300px; } </style>

S cabe comentar que as diferentes imagens de fundo se tm que escrever na declarao CSS separadas por vrgulas. Ademais, as imagens que declaramos se vo colocando de modo que a
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 7

Manuais e recursos para desenvolvimento web www.criarweb.com

primeira aparece sobre as seguintes. Sendo assim, nesta declarao, fundo1.gif, que est colocada como ltimo fundo, a que aparece atrs de tudo. De momento, a possibilidade de incluir vrios fundos de imagem a um elemento s est disponvel no navegador Safari, porm esperemos que em breve outros navegadores vo incorporando esta funcionalidade de CSS 3. Este exemplo se pode ver em uma pgina parte. Artigo por Miguel Angel Alvarez - Traduo de JML

Cores RGBA em CSS 3

Como sabemos, as cores em HTML se expressam em valores RGB, igual que em CSS, que admite diversas notaes para definir a cor, atravs de nmeros em hexadecimal e inclusive em decimal. Tudo isto supomos que no ser um mistrio para os leitores, que sem dvida j tero experimentado com CSS e provavelmente estejam familiarizados com as distintas notaes para especificar cor nas folhas de estilo. Agora queremos falar de uma nova notao, que no simplesmente uma maneira nova de expressar o mesmo, e sim uma maneira que nos permite definir cores por meio de valores adicionais. Trata-se da notao RGBA, que a partir de CSS 3 est disponvel para os desenvolvedores. A notao RGBA uma maneira de especificar cores na qual se definem quatro valores. Os trs primeiros so os bem conhecidos canais RGB (vermelho, verde e azul) e o quarto parmetro o canal Alpha, que no mais que o grau de transparncia ou opacidade da cor. O canal Alpha um valor entre zero e um, sendo 0 totalmente transparente e 1 totalmente opaco. No mundo do desenho talvez j tenhamos visto outros formatos ou sistemas que suportam cores com canal Alpha e por isso pode ser que j estejamos familiarizados com este parmetro. O formato de imagem PNG, que tanto nos gosta por suportar transparncia que se v corretamente em todos os fundos possveis, implementa justamente este canal alpha na definio da cor para conseguir uma transparncia ideal. Agora, por meio das cores em RGBA em CSS 3, poderemos aplicar novas transparncias s cores que especificamos com CSS, abrindo novas possibilidades aos designers sem a necessidade de se complicar com pequenos truques como o uso de imagens de fundo semitransparentes em PNG, etc. Ademais, como as cores RGBA se podem aplicar a qualquer elemento que suporte atribuio de cor, as aplicaes aumentam ainda mais. O nico porm, pelo menos no momento de escrever este artigo, que CSS 3 no est amplamente suportado por todos os navegadores. Por exemplo, Internet Explorer 8 no o suporta por enquanto.
Nota: Em CriarWeb.com publicamos vrios artigos sobre CSS 3, que se podem acessar atravs do seguinte link: introduo a CSS3.

Notao de cor RGBA

Para definir uma cor RGBA, se devem especificar quatro valores, da seguinte maneira:
rgba(255, 125, 0, 0.5); CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 8

Manuais e recursos para desenvolvimento web www.criarweb.com

Os trs primeiros valores so nmeros em sistema decimal, que correspondem com os valores de vermelho, verde e azul. Sempre tm que ser nmeros entre 0 e 255. O quarto valor um nmero entre 0 e 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparncia ao 50%, ou seja, metade opaco e metade transparente.

Exemplos de estilos CSS com cores definidos por RGBA

Agora vejamos vrios exemplos de cores definidos com CSS e a notao RGBA.
<div style="background-color: rgba(0, 0, 255, 0.1);">Esta camada tem fundo azul, quase transparente</div> <span style="color: rgba(0,255,0,0.8);">Este texto verde e tem um pouco de transparncia</span>

Porm, parte destes exemplos, o ideal ver o efeito de transparncia em funcionamento, para poder termos uma idia mais aproximada das possibilidades. Para isso, construmos uma pgina onde se mostram vrias camadas com cores e transparncias, tanto no fundo como no texto. Ver exemplo de cores CSS RGBA. Porm, novamente chamamos a ateno dos leitores sobre o fato que, dependendo do navegador que se utilize, se vero ou no as distintas cores, visto que as CSS 3 no so compatveis com todos os sistemas. Este exemplo funcionar bem em navegadores que cumpram os padres, como Firefox, Chrome ou Safari, porm no em navegadores como Internet Explorer, que fazem a guerra por sua conta. O cdigo do anterior exemplo o seguinte:
<html> <head> <title>Cores RGBA com CSS 3</title> <style type="text/css"> div.quadrado{ width: 150px; height: 40px; border: 1px solid #dddddd; margin: 5px; } div.textogrande{ font-family: verdana, arial, helvetica; font-weight: bold; font-size: 40pt; } </style> </head> <body> <h1>Cores RGBA com CSS 3</h1> <h2>Exemplo de camadas com fundo azul e vrias transparncias</h2> <div class="quadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div> <div class="quadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div> <div class="quadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div> <div class="quadrado" style="background-color: rgba(0, 0, 255, 1);"></div> <h2>Exemplo de camadas com fundo verde e vrias transparncias, sobre uma camada com fundo amarelo</h2> <div style="background-color: #ff3; padding: 10px;"> <div class="quadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div> <div class="quadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div> <div class="quadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div> CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 9

Manuais e recursos para desenvolvimento web www.criarweb.com

<div class="quadrado" style="background-color: rgba(0, 255, 0, 1);"></div> </div> <h2>Exemplo de camadas com fundo laranja e vrias transparncias, sobre uma camada com uma imagem de fundo</h2> <div style="background-image: url(http://www.criarweb.com/artigos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;"> <div class="quadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div> <div class="quadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div> <div class="quadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div> <div class="quadrado" style="background-color: rgba(255, 125, 0, 1);"></div> </div> <h2>Exemplo de texto de cor vermelha e vrias transparncias, sobre uma camada com uma imagem de fundo</h2> <div style="background-image: url(http://www.criarweb.com/artigos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;"> <div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto est para que se veja que pode ser tambm meio transparente</div> <div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto est para que se veja que pode ser tambm meio transparente</div> </div> </body> </html>

Se se permite minha opinio, uma pena que esta gesto de cor com canal alpha no esteja disponvel em Internet Explorer 8, no momento de escrever estas linhas, porque assim se torna complicado usar este tipo de efeitos. No obstante, de supor que as pessoas de Microsoft colocaram em dia seu navegador em algum momento, para torn-lo compatvel com as CSS 3 e as cores RGBA. Artigo por Miguel Angel Alvarez - Traduo de JML

Word-wrap em CSS 3
Estamos dando um repasso as novidades que trar a especificao CSS 3 e neste caso vamos ver uma propriedade interessante que servir para que certas palavras que so longas demais e no cabem na largura de uma caixa. Como devemos saber, no modelo de caixa dos navegadores, as palavras se vo colocando em linhas para ocupar toda a largura disponvel na caixa. Pode surgir um problema quando temos uma palavra muito longa, que no cabe na largura disponvel do container onde se colocou. Ento o que ocorre que a palavra aparece por fora da caixa, ou inclusive pode ocorrer que a caixa se deforme de tamanho, fazendo que o elemento container amplie a largura o suficiente para que fique a palavra. Em qualquer caso, o efeito resultante costuma ser pouco agradvel, porque muitas vezes nos desenquadra nosso desenho e faz com que as fiquem mal construdas. Para evitar este efeito, em CSS 3 se incluiu um atributo chamado word-wrap que serve para especificar que as palavras que sejam longas demais se devem cortar, de maneira que caibam na largura disponvel da caixa. Uma propriedade muito til que com certeza rapidamente comear a se utilizar habitualmente. Temos de agradecer a Microsoft a incorporao desta nova propriedade de CSS 3, j que o atributo word-wrap comeou sendo uma etiqueta no padro de CSS, que estava disponvel em Internet Explorer e devido a sua utilidade, o W3C se decidiu a incorporar nova especificao deste linguagem de estilo.
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 10

Manuais e recursos para desenvolvimento web www.criarweb.com

O atributo word-wrap tem dois possvel valores: normal ou break-word.

word-wrap: normal;

Faz com que as palavras no se cortem, o que seria o comportamento normal que conhecamos at agora, ocorrendo que as palavras longas nos possam desenquadrar nosso desenho. Agora podemos ver uma caixa que tinha uma largura de 300 px e que por culpa de uma palavra muito longa se deforma a caixa ou o texto aparece por fora. Este texto entra bem na camada, porm agora vamos colocar uma palavra longa demais que no caber, por isso nos desenquadraria o desenho: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Esta camada tem 300 pixels de largura e essa palavra, portanto no cabia e me desenquadra tudo.
word-wrap: break-word;

Com este outro valor de word-wrap: break-word, o que conseguimos que a palavra se recorte, para caber na largura que havamos definido. Este atributo por agora suportado por Internet Explorer, Safari e Google Chrome. Firefox parece que a incluir a partir de sua verso 3.1, que no foi lanada ainda no momento de escrever este artigo de CriarWeb.com. Agora vejamos uma caixa onde colocamos o atributo para que recorte as palavras: Esta outra camada tem o atributo word-wrap: break-word e portanto vai recortar a seguinte palavra para que fique bem na caixa: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Agora a camada no se v afetada por uma palavra to longa. Artigo por Miguel Angel Alvarez - Traduo de JML

Textos multi-coluna com CSS 3

Neste artigo vamos tratar sobre as novas caractersticas de CSS para construo automtica de textos em colunas, que se encontraro disponveis quando CSS 3 se implemente finalmente nos navegadores. Embora tudo isto no passe de um estado experimental, o certo que j podemos comear a prov-lo e utilizar em navegadores modernos, como muitas das novas possibilidades que estamos comentando sobre CSS 3 Numerosas publicaes constroem o texto em diversas colunas, como critrio de desenho e para facilitar a leitura. Poderamos imaginar o texto dos jornais se no se encontrasse dividido em diversas colunas, no seria quase impossvel seguir as linhas para fazer uma leitura cmoda da informao se tudo estivesse em uma nica coluna? Este problema no o encontramos geralmente nas pginas web, porque o texto que cabe no corpo da pgina no to grande como o que caberia em uma folha de um dirio. Ademais, geralmente a prpria pgina j se encontra dividida em diversas colunas. No obstante, mesmo que quisssemos, com as caractersticas de CSS 2 no seria muito fcil fazer um texto fludo que se adaptasse automaticamente em colunas, de modo que estas crescero homogeneamente medida que o texto cresce ou se reduz. CSS 3 soluciona este problema, ou melhor, oferecer uma soluo ao mesmo, simples e automtica. Para criar uma estrutura multi-coluna utilizaremos vrios atributos, que serviro para
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 11

Manuais e recursos para desenvolvimento web www.criarweb.com

modelizar as colunas: colum-width: servir para definir a largura das distintas colunas a criar. column-gap: nos permitir definir o espao em branco entre colunas. column-rule: servir para criar um filete ou linha divisria entre as colunas.

Estas etiquetas, at o momento, nenhum navegador as suporta. Entretanto, Safari, Google Chrome e Firefox j implementam o multicolumna, de maneira experimental e at que as especificaes de CSS 3 estejam dispostas para incorporar nos navegadores. Para isso, podemos utiliz-las se colocarmos um pr-fixo, que seria "-moz-" no caso de Firefox e "webkit-" para o navegador Safari ou Chrome. Um exemplo de multicolumna, para que funcione nestes navegadores seria:
.multicoluna{ -moz-column-width: 15em; -moz-column-gap: 15px; -webkit-column-width: 15em; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; }

Outra possibilidade para criar um multicolumna ser definir simplesmente o nmero de colunas que quisermos incorporar no texto, por meio do atributo column-count, desta maneira:
.multicoluna5colunas{ -moz-column-count: 5; -moz-column-gap: 2em; -moz-column-rule: 1px solid #ccf; -webkit-column-count: 5; -webkit-column-gap: 2em; -webkit-column-rule: 1px solid #ccf; }

Especificar o nmero de colunas talvez mais cmodo, porm em pginas fludas pode funcionar pior, porque no se sabe com certeza que largura vai ter o lugar onde se mostram os textos e portanto, algumas vezes podem ficar colunas muito largas e outras muito estreitas. Podemos ver uma pgina parte com os exemplos mostrados de construo em mltiplas colunas. Porm, lembre que s funcionar em Mozilla Firefox, Apple Safri e Google Chrome. O sistema de mltiplas colunas se encontra em fase beta e faz parte de um mdulo parte dentro das especificaes de CSS 3. Se se deseja encontrar mais informao sobre o tema na W3C se pode consultar a URL http://www.w3.org/TR/css3-multicol/ Esperamos que estas caractersticas de CSS 3 se encontrem rapidamente disponveis, pois no cabe dvida que a distribuio por colunas nos abrir novas e interessantes possibilidades para a construo de textos em pginas web. Artigo por Miguel Angel Alvarez - Traduo de JML

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

12

Manuais e recursos para desenvolvimento web www.criarweb.com

Bordas com imagens em CSS 3

Vamos falar rapidamente sobre um dos novos atributos das CSS 3, que serve para personalizar as bordas dos elementos HTML com imagens. Publicamos este artigo dentro do Manual de CSS 3, que uma espcie de compndio de exemplos e tcnicas que nos permitir aplicar esta nova especificao das Folhas de Estilo em Cascata. De maneira resumida, border-image um atributo que nos ajudar a aplicar novos estilos s caixas com CSS, atravs da utilizao de imagens nas bordas dos elementos, inclusive podendo escolher vrias imagens para vrias das partes das bordas. Colocar imagens nas bordas uma tarefa que j se costuma realizar no webdesign, e para isso, costuma-se utilizar complementarmente tcnicas com as linguagens HTML e CSS. Ou seja, no momento de escrever este artigo, para que um elemento da pgina, como pode ser uma diviso ou uma tabela, pargrafo, etc., tenha uma borda a partir de uma imagem, se necessita colocar algum cdigo HTML adicional, com algum container que nos permita logo definir estilos CSS para "imitar" essa borda de imagem. De qualquer forma, estejamos ou no familiarizados com as tcnicas de uso de imagens nas bordas, o importante que com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos atributos aos elementos que desejarmos.

Distintas especificaes sobre border-image

As especificaes de CSS 3 esto em etapa de desenvolvimento. O organismo W3C, que se encarrega de definir os padres de Folhas de Estilo em Cascata, alterou algumas vezes as especificaes do atributo border-image e relacionados. por isso, que ainda h algumas diferenas entre o que os navegadores entendem com este atributo e o que recomenda o W3C. Isto quer dizer que no futuro ainda pode mudar o funcionamento deste atributo nos distintos navegadores, tal como anuncia Mozilla em seu centro de desenvolvimento. Para as pessoas que desejem encontrar de primeira mo as especificaes dos atributos para colocar borda nas imagens, recomendamos a leitura do site da W3C. Rascunho de trabalho sobre as propriedades de borda de imagem. Novembro de 2002 Rascunho sobre borda de imagem. Dezembro de 2009 Como se poder ver, existem bastantes diferenas e que tambm passou bastante tempo entre uma e outra especificao. Ademais, a mais atual das duas tem umas explicaes baseadas em esquemas muito mais entendveis. Do mesmo modo, temos acesso s especificaes que colocaram em andamento os mais avanados navegadores, que implementam j de maneira experimental alguns dos atributos para criar bordas nas imagens. Site para desenvolvedores de Mozilla, sobre Border Image. Site para desenvolvedores de Mac e seu navegador Safari.

Exemplo de border-image
Sendo assim, para que sirva unicamente a modo de demonstrao que tudo o que se pode fazer at o momento neste artigo de CriarWeb.com, vamos dar um simples exemplo sobre o que permite atualmente os navegadores Safari e Firefox sobre border-image. Por exemplo, teramos este elemento HTML:

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

13

Manuais e recursos para desenvolvimento web www.criarweb.com

<div id="camadaborda"> Vou colocar uma borda acima </div>

E agora poderamos aplicar estilos para criar uma borda na imagem:

#camadaborda{ -moz-border-image: url(sello.png) 2 2 2 2 stretch stretch; -webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch; padding:20px; width: 100px; }

Como se pode ver, os atributos para bordas de imagens no tm o nome definitivo, que ser border-image, e sim uns prprios para cada um dos navegadores que implementam esta nova caracterstica de CSS 3. O atributo -moz-border-image para o navegador Firefox e outros produtos da companhia Mozilla e o atributo -webkit-border-image para qualquer navegador baseado em WebKit, como Safari ou Chrome. A imagem que estamos utilizando como borda a seguinte:

E o exemplo se pode ver em andamento em uma pgina parte, porm lembre-se que dependendo do seu navegador poder ver ou no a borda da imagem.

Outros atributos para fazer borda com imagens

parte do atributo border-image, existem outros numerosos atributos para definir as bordas de maneira independente para cada um dos lados ou vrtices de um elemento HTML. Talvez convm esperar um pouco antes de dar umas explicaes concisas e exemplos sobre este e outros atributos, visto que mudaram bastante ultimamente. Entretanto, segundo a ltima especificao de CSS 3, temos os seguintes atributos: border-image-source: Para indicar a URL da imagem que vamos utilizar como borde. border-image-slice: Indica o espao da imagem que ser visvel como borda, nos quatro lados do elemento, ou seja, top, right, bottom e left. border-image-width: Para indicar a largura da borda. border-image-outset: Serve para indicar a rea na que a imagem de borda se estende mais da rea do elemento, nos 4 lados da mesma. border-image-repeat: Permite marcar se se deseja ou no que se repita a imagem da borda fazendo um mosaico ou se se deseja que se estique, etc. border-image: Utiliza-se como uma maneira resumida de especificar vrios atributos de borda com imagens ao mesmo tempo. Explicar com exemplos cada um destes atributos seria sem dvida interessante, porm nos levaria vrios artigos e ademais, vale a pena faz-lo quando j estejam disponveis como especificao definitiva de CSS 3 e no em um simples rascunho, assim como quando estejam implementados nos navegadores.
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 14

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Miguel Angel Alvarez - Traduo de JML

Sombras em CSS 3 com box-shadow

CSS 3 supe uma nova revoluo no web design, trazendo solues a muitas das prticas que os designers utilizam para decorar as pginas web. Isto quer dizer que, muitas das coisas que antes fazamos com tcnicas de design que requeriam uso de imagens, como as sombras ou as esquinas arredondadas, a partir de agora vamos poder especific-las simplesmente atravs de CSS. Como vimos no artigo introduo a CSS 3, No cabe dvida que significar um grande avance para as pessoas que se dedicam a desenvolver webs, que nos permitir poupar tempo e sobretudo, economizar cdigo fonte, o que tornar as pginas mais leves e separar ainda mais o contedo da forma. Ao longo do Manual de CSS 3 j vimos vrios atributos novos de bastante importncia e variedade e agora a vez do box-shadow, o atributo de CSS3 que nos permitir definir sombras aos elementos da pgina.

Atributo box-shadow
O atributo box-shadow requer vrios valores para especificar as caractersticas da sombra, como esfumaado, separao da sombra e a prpria caixa ou cor. A sintaxe como esta:
box-shadow: 5px -9px 3px #000;

Por ordem de aparecimento, os valores que se indicam em box-shadow so: Deslocamento horizontal da sombra: A sombra de um elemento costuma estar um pouco deslocada com respeito ao elemento que a produz e sua posio ser em funo do ngulo com o qual chegue a luz. No caso deste exemplo, o primeiro dos valores, 5px, quer dizer que a sombra aparecer 5 pixels direita. Se quisermos que a sombra aparea um pouco esquerda do elemento original que a produz, colocaramos um valor negativo a este atributo. Quanto mais deslocamento tiver uma sombra, o elemento que a produz parecer que est mais separado da tela da pgina. Deslocamento vertical da sombra: O segundo valor que colocamos no atributo box-shadow o deslocamento vertical da sombra com respeito posio do elemento que a produz. Este valor similar ao deslocamento horizontal. Valores positivos indicam que a sombra aparecer abaixo do elemento e valores negativos faro com que a sombra aparea deslocada um pouco para cima. No caso do anterior exemplo, com -9px estamos indicando que a sombra aparecer deslocada 9 pixels para cima do elemento. Esfumaado: O terceiro valor indica quanto queremos que esteja esfumaada a borda da sombra. Se o esfumaado fosse zero, quer dizer que a sombra no tem nenhum esfumaado e aparece totalmente definida. Se o valor for maior que zero, como em nosso exemplo 3px, quer dizer que a sombra ter um esfumaado dessa largura, 3 pixels no exemplo. Cor da sombra: O ltimo atributo que se indica no atributo box-shadow a cor da sombra. Geralmente as sombras no mundo real tm uma cor preta ou cinza, porm com CSS3 poderemos indicar qualquer gama de cor para fazer a sombra, o que nos dar bastante mais versatilidade aos desenhos graas possvel utilizao de sombras em distintas cores, que possam combinar melhor com nossa paleta. No exemplo anterior havamos indicado uma
CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 15

Manuais e recursos para desenvolvimento web www.criarweb.com

sombra com cor preta.

Compatibilidade das sombras CSS com navegadores

O certo que as CSS 3 ainda esto em fase de especificao, embora j se encontrem muito avanadas e os navegadores mais modernos j comearam a implement-las. No obstante, o W3C ainda no liberaram as especificaes desta verso das Folhas de Estilo em Cascata e at que comece a recomendar sua implementao os clientes web no tm porque entend-las. Por enquanto, podemos utilizar box-shadow nas verses mais modernas do navegador Opera. Por sua parte, navegadores baseados em Mozilla e WebKit tm suporte a esta funcionalidade de CSS3, porm, atravs de uns atributos CSS com uma ligeira variao em seu nome. Atributo box-shadow para navegadores baseados em Mozilla, como Firefox: De maneira temporria, Firefox capaz de interpretar o atributo -moz-box-shadow, por exemplo:
-moz-box-shadow: 1px 1px 0px #090;

Atributo box-shadow para navegadores baseados em WebKit, como Safari ou Google Chrome: Nesses momentos e de maneira temporria, navegadores como Chrome ou Safari entendem o atributo: -webkit-box-shadow, por exemplo:
-webkit-box-shadow: 3px 3px 1px #fc8;

Como poderemos imaginar, se desejamos ampliar ao mximo a compatibilidade com boxshadow, necessitaramos indicar tanto o prprio atributo box-shadow (que funciona em Opera e no futuro funcionar em todos os navegadores), assim como -moz-box-shadow e -webkitbox-shadow para que funcione nas verses atuais de Firefox, Safari, Chrome, etc.

Exemplos de Sombras CSS3

Agora vejamos vrios exemplos de sombras criadas diretamente com CSS 3 e o atributo boxshadow, com suas variantes para compatibilidade temporria nos navegadores Mozilla ou WebKit.
#caixasombra{ background-color: #ddd; width: 300px; padding: 10px; box-shadow: 5px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #333;

Isto criaria uma camada com um cinza claro como cor de fundo e uma sombra deslocada para baixo e direita em 5 pixels e sem esfumaado. Ademais, definimos uma cor de sombra cinza escuro para o elemento.
#sombraclara{ width: 200px; padding: 10px; background-color: #999; color: #fff; box-shadow: 2px 2px 2px #ffc; -webkit-box-shadow: 2px 2px 2px #ffc; -moz-box-shadow: 2px 2px 2px #ffc; }

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

16

Manuais e recursos para desenvolvimento web www.criarweb.com

Este outro exemplo para uma sombra um pouco menor, tambm deslocada para baixo e direita e com um esfumaado de 2 pixels. Ademais, indicamos uma cor amarela clara para a sombra, e para v-la bem, teramos que colocar este elemento sobre um fundo escuro.
#sombrarredondada{ background-color: #090; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000;

Neste terceiro exemplo, temos um caso curioso de sombra, pois est aplicada sobre um elemento que tem as esquinas arredondadas com CSS 3. Sendo assim, a sombra tambm deve ter as sombras arredondadas, para se ajustar ao elemento que a produz. Ambos navegadores com compatibilidade a sombras e CSS 3 funcionam corretamente com sombras e bordas arredondadas. Para acabar, colocamos um link a uma pgina onde voc pode ver os exemplos de sombras em CSS 3. Tenha em conta que voc dever provar estes exemplos com Opera, Firefox, Safari ou Chrome, que so os que atualmente suportam este atributo. Artigo por Miguel Angel Alvarez - Traduo de JML

Propriedade background-origin de CSS 3

CSS permite especificar que os elementos tenham um fundo com uma imagem e alm disso, com alguns atributos como background-position ou background-repeat, podemos definir coisas como transferir a posio da imagem de fundo para outro lugar ou formar um mosaico. Essas propriedades so bastante utilizadas no desenho de pginas web e talvez j as dominemos. Agora , com CSS 3 temos a possibilidade de especificar novos estilos ou modos de comportamento das imagens. Neste artigo exploraremos o novo atributo background-origin, que faz parte da nova especificao de Folhas de Estilo em Cascata. Veremos tambm exemplos de como utilizar este atributo, dentro das explicaes que estamos apresentando no Manual de CSS 3.

O que background-origin
Quando colocamos uma imagem de fundo em um elemento de HTML se posiciona dentro do espao desse elemento. Por padro, uma imagem de fundo aparece como um mosaico, repetindo a imagem ao longo de todo o espao desse elemento. Porm, para colocar essa imagem o navegador utiliza uma origem de coordenadas, que veremos mais facilmente se fizermos com que a imagem no se repita, ou seja, que no se faa um mosaico no fundo. Observar o exemplo da seguinte imagem:

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

17

Manuais e recursos para desenvolvimento web www.criarweb.com

Colocou-se uma imagem de fundo para esse elemento, mas a imagem no se repete. Pode-se ver o amarelo do fundo da cor atribuda ao elemento e a imagem de fundo em azul. Agora vejamos onde comea a imagem. Veremos que est colocada dentro do elemento, dentro do corpo e sem levar em conta a borda. Sabemos que com background-position poderamos mudar essa posio, mas em CSS 3 existe o atributo background-origin que tambm nos servir para transferir essa imagem, porm de outra maneira. Com background-origin podemos definir a origem de coordenadas sobre a qual vai ser colocada a imagem de fundo, para que seja a borda do elemento, seu padding ou seu contedo. Vejamos seus possveis valores com uma explicao: border-box: Este valor significa que a origem de coordenadas da imagem ser a borda do elemento. Neste caso estamos indicando que a imagem comece onde comea a borda do elemento, caso tenha borda.
background-origin: border-box;

padding-box: Este valor aquele utilizado por padro em CSS 3 e como se posiciona a imagem em navegadores que s entendem o CSS 2 ou inferior. Quando indicamos background-origin: padding; queremos que o eixo de coordenadas onde se vai colocar a imagem seja o espao destinado ao elemento, incluindo seu possvel padding e sem contar a possvel borda.
background-origin: padding-box;

content-box: O terceiro dos possveis valores de background-origin serve para que a origem de coordenadas para a posio da imagem de fundo seja o lugar onde comea o contedo do elemento, ou seja, sem levar em conta suas possveis bordas e padding.
background-origin: content-box;

Para termos uma ideia mais clara sobre os distintos valores de background-origin fizemos um exemplo, mas necessrio ser visto com navegadores compatveis com CSS (em seguida explicamos isso). Ver um exemplo funcionando em uma pgina parte.
Nota: Se background-attachment tem o valor "fixed" este atributo ser ignorado.

Compatibilidade de background-origin
hora de escrever este artigo os navegadores ainda no haviam implementado todas as novas caractersticas das CSS. Na maioria de casos esto apenas sendo testadas, at que as especificaes de CSS 3 sejam recomendadas para sua implementao. Por isso, os navegadores que comearam a suportar as CSS utilizam alguns prefixos para os nomes das propriedades. Em Mozilla Firefox devemos utilizar o atributo -moz-backgroundorigin, em navegadores baseados em webkit (como Chrome ou Safari) deve-se utilizar o atributo -webkit-background-origin. Alm disso, em navegadores baseados em webkit e Mozilla no se leva em conta a terminao

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

18

Manuais e recursos para desenvolvimento web www.criarweb.com

"-box" ao final dos valores dos atributos, razo pela qual h que elimin-la. Por sua vez, em Opera j vem implementada a funcionalidade com o nome de atributo definitivo, e seus valores com a correspondente terminao "-box", que como aparece na especificao atual do modelo de caixa de CSS 3. Este seria o cdigo CSS para aplicar distintos valores de background-origin e que sejam entendidos por todos os navegadores mais modernos.
Nota: O Internet Explorer 8, o mais atual dos navegadores de Microsoft no momento, as CSS 3 no esto implementadas de nenhum modo, assim que no poderemos ver estes exemplos em funcionamento. #provasfundo1{ -moz-background-origin: border; -webkit-background-origin: border; background-origin: border-box; } #provasfundo2{ -moz-background-origin: padding; -webkit-background-origin: padding; background-origin: padding-box; } #provasfundo3{ -moz-background-origin: content; -webkit-background-origin: content; background-origin: content-box; }

Assim, j aprendemos a mudar o eixo de posicionamento da imagem de fundo com background-origin, contudo voltamos a comentar que a posio da imagem definitiva tambm pode ser marcada com background-position. Na verdade, com o atributo background-origin estamos definindo o eixo de coordenadas sobre o qual vai ser aplicado o background-position para colocar definitivamente a imagem. Para terminar, colocamos de novo o link do exemplo funcionando. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga

Introduo a @font-face de CSS

hora de escolher uma fonte para usar em uma pgina web, tradicionalmente se encontrava a limitao de que o usurio tivesse esse tipo de letra instalada em seu computador, porque caso contrrio, os textos apareceriam com outras tipografias, diferentes das que tnhamos escolhido. por isso que o leque de fontes que podamos utilizar, com a garantia de que funcionassem bem na maioria dos visitantes, estava bem reduzido s tpicas Arial, Verdana, Times New Roman e pouco mais. Bem, na atualidade este problema j est solucionado e tudo graas regra CSS @font-face. Esta regra nos permite definir em nossa folha de estilos qualquer tipo de tipografia, independentemente do usurio dispor dela ou no e para isso o nico que deve nos preocupar que esteja instalada em nosso servidor. No presente artigo explicaremos como se pode configurar nossa folha de estilos CSS para poder utilizar qualquer fonte que desejemos.

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

19

Manuais e recursos para desenvolvimento web www.criarweb.com

Importar fontes tipogrficas mediante CSS com @font-face

A mencionada regra @font-face nasce com CSS 2 mas at CSS 3 no comea a funcionar e a prosperar. No principio s funcionava em IE 5 e admitia unicamente formatos de fonte .eot, porm com o passar do tempo outros navegadores ampliaram seu suporte, comeando com Safari 3,1. Na atualidade admite outros tipos de formatos tipogrficos como .ttf e.otf e funciona tambm com os navegadores Opera 10, Firefox 3,1 e, claro, com todas as verses superiores aos navegadores j citados. Ento, j nada nos impede de fazer uso desta @font-face, para poder utilizar qualquer fonte em nossa web, com a garantia de que se visualizar perfeitamente em todos os navegadores mais atuais. Sua sintaxe a seguinte:
@font-face{ font-family:<nome_fonte>; src: <source>[,<source>]*; [font-weight:<weigth>]; [font-style:<style>]; }

Com isto definimos o tipo de letra e sua localizao em nosso servidor. Caso queiramos utilizar tal fonte s temos que cham-la com font-family nas regras de estilo que desejemos. Devemos ter em conta que caso no encontre a fonte em nosso servidor, tomar a seguinte por padro que tenhamos definida em nossa folha de estilos.
Nota: Nem todos os navegadores admitem todos os formatos anteriormente citados.

Firefox 3,6 suporta Opentype, Embedded Opentype e WOFF. I.E. suporta Embedded Opentype Opera suporta Truetype, Embedded Opentype e Opentype Safari 3,1 suporta Truetype, Embedded Opentype e Opentype Google Chrome suporta Truetype, Embedded e Opentype

Se desejamos trabalhar com fontes diferentes atravs de @font-face e nos preocupa a compatibilidade com todos os navegadores, comprovaremos que o mais aconselhvel subir as fontes com formato .eot, que funciona em todos os navegadores. Isto se deve a que IE s suporta o formato .eot. Por isso, devemos converter nossas fontes para esse formato, para o que podemos utilizar o programa Microsoft Weft, cujo funcionamento veremos detalhadamente em outro artigo.

Exemplo de uso de @font-face

A seguir colocamos o cdigo de um exemplo com dois tipos de fontes, uma com formato .eot e outra com formato .otf. O primeiro visualizado em todos os navegadores e no segundo IE toma outra letra por padro j que no admite o formato .otf.

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

20

Manuais e recursos para desenvolvimento web www.criarweb.com

Cdigo da folha de estilos:

@font-face { font-family: Vivaldi; font-style: normal; font-weight: normal; src: url(VIVALDI0.eot); } @font-face{ font-family: "gothic"; font-style: normal; font-weight: normal; src: url(gothic.otf); } H1{ font-family: "gothic"; } H2{ font-family: "Vivaldi"; }

E em seguida o cdigo HTML para ver o resultado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Prova com estilos de letra distintos</title> <link rel="STYLESHEET" type="text/css" href="estilo-font-face.css"> </head> <body> <h1>Estamos provando a letra Gothic (no se ver em IE)</h1> <h2>Aqui a letra Vivaldi</h2> </body> </html>

Voc pode ver o resultado em uma pgina parte. Artigo por Sara Alvarez Langa - Traduo de Celeste Veiga

Introduo s animaes CSS

Como todos provavelmente saibamos, at agora, as animaes nas pginas web sempre tinham que ser feitas utilizando diversas tecnologias complementares, mais alm do simples HTML ou CSS. O primeiro sistema que alcanou grande popularidade para realizar uma animao de elementos bastante fluida e espetacular foi a tecnologia Flash e depois a acompanharam alguns outros sistemas como Silverlight, de caractersticas similares. No entanto, tudo isto so tecnologias proprietrias, que requerem a instalao de um plugin para funcionar no navegador, o que impede que sejam universais, por mais aceitao que tenham chegado a ter. Paralelamente existem vrios outros suportes para animao que sim fazem parte das tecnologias de criao de pginas web universais, mas que no chegam, nem de longe, s possibilidades de animao que poderamos desejar. Referimos-nos aos GIF animados, que

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

21

Manuais e recursos para desenvolvimento web www.criarweb.com

tanto se utilizaram a principio e que agora esto praticamente esquecidos, assim como o Javascript que tambm permite fazer animaes base de mudar atributos CSS de maneira progressiva ao longo de um tempo.
Nota: Falando de Javascript e embora fique fora do que vamos tratar neste artigo, existem alguns frameworks interessantes que permitem desenvolver animaes de uma maneira bastante mais simples do que seria se no os utilizssemos. Por exemplo, o popular jQuery permite animaes simples mas que se fazem em questo de segundos. Tambm se podem realizar animaes CSS com Javascript inclusive com frameworks especializados nesta rea como as bibliotecas jsAnim.

Bem, com CSS 3 vem uma nova forma de realizar animaes totalmente nova que resultar muito mais simples do que o uso que conhecemos com Javascript. Porm, o mais importante que suporta muitos outros tipos de animao que at agora estavam reservados a tecnologias como Flash, como podem ser rotaes, ampliaes e redues do tamanho vetoriais, etc. Isto no fica por a, j que tambm se implementaram certas interaes com o usurio e que se conseguem unicamente com CSS 3. Alm disso, tudo sem ter que programar, o que pode resultar muito mais agradvel e ao alcance dos desenvolvedores menos tcnicos.
Nota: Esta novidade pode resultar realmente interessante mas devemos dizer que hora de fechar este artigo no funcionava em todos os navegadores. S admitem as animaes CSS os navegadores Safari e Google Chrome. O resto est trabalhando duro para implement-lo e esperamos que dentro de pouco tempo possam ser vistos em todos os navegadores, sobretudo em Firefox e Internet Explorer que so os mais utilizados.

Vantagens das animaes CSS 3

As animaes CSS permitem fazer muitas das coisas que antes tnhamos reservadas s para uso de tecnologias suplementares, que no faziam mais que incrementar a dificuldade do desenvolvimento, limitar sua compatibilidade entre diferentes tipos de usurios e plataformas, assim como os requisitos de conhecimentos de desenvolvedor para poder incorpor-las. Portanto, uma das vantagens que podemos esquecer de Flash se quisermos fazer dinamismos espetaculares em nossa web. Colocar Flash de lado, ademais, implica no termos que nos preocupar com o posicionamento da pgina que tanta dor de cabea traz quando nossa web est criada inteiramente em Flash. Tudo isto sem entrar no tema da acessibilidade, que em Flash uma verdadeira chateao. Porm, como deixamos entrever, as vantagens mais importantes seriam a compatibilidade e a facilidade de implementao, ao usar uma linguagem que j resulta familiar para o desenvolvedor. A compatibilidade dada pelo uso de um sistema aberto e regulado pelo W3C, ao que todos os navegadores mais cedo ou mais tarde se adaptaro. E a facilidade de desenvolvimento porque s trabalharemos em nossos sites com a linguagem CSS e no existir a necessidade de dominar outras linguagens de programao como acontecia com Flash.

Inconvenientes das animaes CSS

Como tudo na vida, tambm existem algumas desvantagens ao trabalhar com animaes em CSS. O certo que a maior que se poderia destacar apenas circunstancial, devido ao pouco suporte que existe atualmente para esta utilidade. Temos dois principais inconvenientes.

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

22

Manuais e recursos para desenvolvimento web www.criarweb.com

At o fechamento deste artigo as animaes CSS no eram admitidas pelos principais navegadores (Nenhuma utilidade para animao com CSS 3 pode ser utilizada na Internet Explorer e em Firefox podemos ver que algumas coisas j funcionam embora de maneira incompleta , mas ainda falta um longo caminho por percorrer). Consume bastantes recursos de mquina para produzir as animaes. Tambm podemos encontrar alguma dificuldade na hora da programao, mas no maior do que a que encontraramos se tivssemos que utilizar outras linguagens ou tecnologias diferentes de CSS. Finalmente, tornamos a ressaltar que, devido impossibilidade de ver os resultados em todos os clientes web, pelo menos no momento, deveremos utilizar navegadores baseados em Webkit, como so Safari ou Google Chrome (sempre em sua verso mais atualizada). Sem muito mais que acrescentar nossa pequena introduo s animaes CSS, comearemos a ver como se realizam no seguinte artigo, o qual nos mostra um pouco a teoria sobre este tema e nos d os princpios bsicos para poder realizar animaes com CSS 3. Artigo por Sara Alvarez Langa - Traduo de Celeste Veiga

CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

23