Manuais e recursos para desenvolvimento web www.criarweb.

com CSS 3 Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarw eb.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. 1

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 in corpora 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 pa ra definir o estilo ou a aparncia das pginas web, escritas com HTML ou dos documen tos 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 conted o 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 u tilidades para aplicar estilos s webs, porm os desenvolvedores ainda continuam usa ndo truques diversos para conseguir efeitos to comuns ou to desejados como as bord as arredondadas ou a sombra de elementos na pgina. CSS 1 j significou um avance co nsidervel na hora de desenhar pginas web, trazendo muito maior controle dos elemen tos da pgina. Porm, como ainda ficaram muitas coisas que os designers desejavam fa zer, 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 pgin a para incorporar novas etiquetas HTML que permitam aplicar estilos de uma manei ra 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 habitualment e, porm CSS 3 ainda avana um pouco mais na direo, de dar mais controle sobre os elem entos da pgina. Sendo assim, a novidade mais importante que traz CSS 3, para os d esenvolvedores 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 w ebs. Propriedades novas em CSS3 Segue aqui uma lista das principais propriedades que so novidade em CSS3. Bordas border-color border-image border-radius box-shad ow 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 iscurso ou leitura automtica de pginas web Web Fonts Esta lista de novas propriedades de CSS3 foi tirado de: http://www.css3.info/pre view/. um site em ingls, mas pode ser bom visitar para ir conhecendo mais detalhe s sobre CSS3. Em futuros artigos daremos algumas chaves e explicaes sobre vrias des tas propriedades, pelo menos as mais interessantes, com especificaes detalhadas, a ssim como exemplos que sirvam para ir conhecendo esta nova especificao de CSS. Art igo 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 mu dar 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 dis tintos valores de cores. Atualmente, com CSS podemos definir separadamente as co res da borda de um elemento, de cima, direita, abaixo e esquerda. Porm, no nos ref erimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar vr ias cores distintas a uma parte, por exemplo, parte de cima da borda. Vi esta pr opriedade comentada em algum lugar como de CSS 3, porm segundo vejo no rascunho d a especificao de CSS 3 para bordas e fundos, publicado pelo W3C, no aparece esta no va 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: Firefo x. Dito de outra forma, uma extenso de CSS realizada por Mozilla. Na pgina de Mozi lla podemos encontrar mais informao sobre esta extenso de CSS: https://developer.mo zilla.org/en/CSS/-moz-border-bottom-colors Os atributos aos que nos referimos qu e 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-b order-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 vej am as distintas cores. Com uma largura de 2 pixel se podero ver 2 cores diferente s, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente. Para v er 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; -m oz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #f f5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ff cc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -m oz-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 s uporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, ta lvez em algum momento se converta em um padro de CSS. No momento no passa de uma m era curiosidade e possibilidade de personalizao especial para os usurios de Firefox e outros navegadores baseados em Mozilla. Artigo por Miguel Angel Alvarez - Tra duo de JML CSS 3: http://www.criarweb.com/css3/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 4

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. Agor a se permitem bordas com as esquinas arredondadas, bordas com imagens (inclusive pode-se utilizar vrias imagens para definir o aspecto da borda, sombras, etc. Ne ste artigo vamos explicar como realizar bordas arredondadas com CSS3. Temos a pr opriedade border-radius, que permite definir bordas arredondadas nas esquinas, e specificando 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 ago ra Mozilla adotou este atributo com um nome especial, que vlido para produtos com o Firefox, enquanto que as especificaes de CSS3 no tiverem alcanado o estado "Candid ate Recommendation", que quando se supe que os diferentes navegadores devem imple mentlas. 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. Po r enquanto, para navegadores Mozilla, o atributo border-radius se utilizaria, po r 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 lembra r que s se ver o efeito utilizando Firefox ou navegadores baseados em Mozilla. Con tudo, o atributo border-radius tem outras possveis configuraes, na qual se podem de finir 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 esqui na 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-r adius 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, et c. Isso o que define as especificaes de CSS3, embora no momento de escrever o arti go devo assinalar que inclusive Mozilla ou Firefox (o nico que at agora suporta es te 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 qu e 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 se r 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 especific aes 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 Intro duo 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 e m SS 3 existe a possibilidade de configurar vrios fundos ao mesmo tempo em um ele mento, 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 ar tigo 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 m ais 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 a ninhar 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. 6

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, t odos os elementos DIV se mostraro um em cima do outro. Agora vejamos o cdigo CSS p ara 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; ba ckground-position: bottom right; } #fundo3{ background-image: url(fundo3.png); b ackground-repeat: no-repeat; background-position: center; } </style> Os fundos iro se sobrepor uns aos outros, sendo o fondo1 o que ser visto mais abai xo e o fundo3 o que se ver mais acima. O resultado deste exemplo se pode ver em u ma 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 vri os elementos aninhados e colocando um fundo em cada um, se pode fazer em CSS 3 c om 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-rep eat, url(fondo2.png) center no-repeat, url(fundo1.gif) center repeat; width: 300 px; } </style> S cabe comentar que as diferentes imagens de fundo se tm que escrever na declarao CS S separadas por vrgulas. Ademais, as imagens que declaramos se vo colocando de mod o 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 possibilid ade de incluir vrios fundos de imagem a um elemento s est disponvel no navegador Saf ari, porm esperemos que em breve outros navegadores vo incorporando esta funcional idade de CSS 3. Este exemplo se pode ver em uma pgina parte. Artigo por Miguel An gel Alvarez - Traduo de JML Cores RGBA em CSS 3 Como sabemos, as cores em HTML se expressam em valores RGB, igual que em CSS, qu e admite diversas notaes para definir a cor, atravs de nmeros em hexadecimal e inclu sive 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 di stintas 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 um a 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 R GBA uma maneira de especificar cores na qual se definem quatro valores. Os trs pr imeiros so os bem conhecidos canais RGB (vermelho, verde e azul) e o quarto parmet ro o canal Alpha, que no mais que o grau de transparncia ou opacidade da cor. O ca nal Alpha um valor entre zero e um, sendo 0 totalmente transparente e 1 totalmen te 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 familiari zados com este parmetro. O formato de imagem PNG, que tanto nos gosta por suporta r transparncia que se v corretamente em todos os fundos possveis, implementa justam ente este canal alpha na definio da cor para conseguir uma transparncia ideal. Agor a, por meio das cores em RGBA em CSS 3, poderemos aplicar novas transparncias s co res 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 qu alquer 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 su portado por todos os navegadores. Por exemplo, Internet Explorer 8 no o suporta p or 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 mane ira: rgba(255, 125, 0, 0.5); CSS 3: http://www.criarweb.com/css3/ Os manuais de Criar Web.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 valo res de vermelho, verde e azul. Sempre tm que ser nmeros entre 0 e 255. O quarto va lor um nmero entre 0 e 1. Por exemplo, 0 seria totalmente transparente, 1 seria t otalmente opaco e 0.5 seria uma transparncia ao 50%, ou seja, metade opaco e meta de 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 ver de 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, const rumos uma pgina onde se mostram vrias camadas com cores e transparncias, tanto no fu ndo 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. E ste exemplo funcionar bem em navegadores que cumpram os padres, como Firefox, Chro me ou Safari, porm no em navegadores como Internet Explorer, que fazem a guerra po r sua conta. O cdigo do anterior exemplo o seguinte: <html> <head> <title>Cores RGBA com CSS 3</title> <style type="text/css"> div.qu adrado{ width: 150px; height: 40px; border: 1px solid #dddddd; margin: 5px; } di v.textogrande{ font-family: verdana, arial, helvetica; font-weight: bold; font-s ize: 40pt; } </style> </head> <body> <h1>Cores RGBA com CSS 3</h1> <h2>Exemplo d e camadas com fundo azul e vrias transparncias</h2> <div class="quadrado" style="b ackground-color: rgba(0, 0, 255, 0.1);"></div> <div class="quadrado" style="back ground-color: rgba(0, 0, 255, 0.4);"></div> <div class="quadrado" style="backgro und-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 vria s transparncias, sobre uma camada com fundo amarelo</h2> <div style="background-c olor: #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, 25 5, 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.criar web.com/artigos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;"> <div c lass="quadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div> <div cl ass="quadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div> <div cla ss="quadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div> <div clas s="quadrado" style="background-color: rgba(255, 125, 0, 1);"></div> </div> <h2>E xemplo de texto de cor vermelha e vrias transparncias, sobre uma camada com uma im agem de fundo</h2> <div style="background-image: url(http://www.criarweb.com/art igos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;"> <div class="texto grande" 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: rgb a(200, 0, 0, 0.7);">Este texto est para que se veja que pode ser tambm meio transp arente</div> </div> </body> </html> Se se permite minha opinio, uma pena que esta gesto de cor com canal alpha no estej a disponvel em Internet Explorer 8, no momento de escrever estas linhas, porque a ssim 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-l o 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 vam os ver uma propriedade interessante que servir para que certas palavras que so lon gas demais e no cabem na largura de uma caixa. Como devemos saber, no modelo de c aixa dos navegadores, as palavras se vo colocando em linhas para ocupar toda a la rgura 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 oc orre que a palavra aparece por fora da caixa, ou inclusive pode ocorrer que a ca ixa se deforme de tamanho, fazendo que o elemento container amplie a largura o s uficiente para que fique a palavra. Em qualquer caso, o efeito resultante costum a 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 at ributo chamado word-wrap que serve para especificar que as palavras que sejam lo ngas 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 habitua lmente. 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 incor porar 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 conh ecamos at agora, ocorrendo que as palavras longas nos possam desenquadrar nosso de senho. Agora podemos ver uma caixa que tinha uma largura de 300 px e que por cul pa de uma palavra muito longa se deforma a caixa ou o texto aparece por fora. Es te texto entra bem na camada, porm agora vamos colocar uma palavra longa demais q ue no caber, por isso nos desenquadraria o desenho: wieiisiddjasddjkjasdasdsadfdsf sdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Esta camada tem 300 pixels de largura e e ssa 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 s e recorte, para caber na largura que havamos definido. Este atributo por agora su portado por Internet Explorer, Safari e Google Chrome. Firefox parece que a incl uir a partir de sua verso 3.1, que no foi lanada ainda no momento de escrever este a rtigo de CriarWeb.com. Agora vejamos uma caixa onde colocamos o atributo para qu e 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: wieiisiddj asddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. 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 automti ca de textos em colunas, que se encontraro disponveis quando CSS 3 se implemente f inalmente 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 muit as 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 leitur a cmoda da informao se tudo estivesse em uma nica coluna? Este problema no o encontra mos geralmente nas pginas web, porque o texto que cabe no corpo da pgina no to grand e 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 a s 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 um a soluo ao mesmo, simples e automtica. Para criar uma estrutura multi-coluna utiliz aremos 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 co lunas a criar. column-gap: nos permitir definir o espao em branco entre colunas. c olumn-rule: servir para criar um filete ou linha divisria entre as colunas. Estas etiquetas, at o momento, nenhum navegador as suporta. Entretanto, Safari, G oogle Chrome e Firefox j implementam o multicolumna, de maneira experimental e at que as especificaes de CSS 3 estejam dispostas para incorporar nos navegadores. Pa ra 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 multicolum na, para que funcione nestes navegadores seria: .multicoluna{ -moz-column-width: 15em; -moz-column-gap: 15px; -webkit-column-wid th: 15em; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccc; -moz-co lumn-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, d esta maneira: .multicoluna5colunas{ -moz-column-count: 5; -moz-column-gap: 2em; -moz-column-ru le: 1px solid #ccf; -webkit-column-count: 5; -webkit-column-gap: 2em; -webkit-co lumn-rule: 1px solid #ccf; } Especificar o nmero de colunas talvez mais cmodo, porm em pginas fludas pode funciona r 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 m uito estreitas. Podemos ver uma pgina parte com os exemplos mostrados de construo e m mltiplas colunas. Porm, lembre que s funcionar em Mozilla Firefox, Apple Safri e Go ogle Chrome. O sistema de mltiplas colunas se encontra em fase beta e faz parte d e um mdulo parte dentro das especificaes de CSS 3. Se se deseja encontrar mais info rmao sobre o tema na W3C se pode consultar a URL http://www.w3.org/TR/css3-multico l/ 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 pos sibilidades para a construo de textos em pginas web. Artigo por Miguel Angel Alvare z - 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 p ersonalizar as bordas dos elementos HTML com imagens. Publicamos este artigo den tro do Manual de CSS 3, que uma espcie de compndio de exemplos e tcnicas que nos pe rmitir aplicar esta nova especificao das Folhas de Estilo em Cascata. De maneira re sumida, border-image um atributo que nos ajudar a aplicar novos estilos s caixas c om CSS, atravs da utilizao de imagens nas bordas dos elementos, inclusive podendo e scolher 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 utili zar complementarmente tcnicas com as linguagens HTML e CSS. Ou seja, no momento d e 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 def inir estilos CSS para "imitar" essa borda de imagem. De qualquer forma, estejamo s ou no familiarizados com as tcnicas de uso de imagens nas bordas, o importante q ue com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos a tributos 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 ve zes 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 r ecomenda o W3C. Isto quer dizer que no futuro ainda pode mudar o funcionamento d este atributo nos distintos navegadores, tal como anuncia Mozilla em seu centro de desenvolvimento. Para as pessoas que desejem encontrar de primeira mo as espec ificaes dos atributos para colocar borda nas imagens, recomendamos a leitura do si te da W3C. Rascunho de trabalho sobre as propriedades de borda de imagem. Novemb ro de 2002 Rascunho sobre borda de imagem. Dezembro de 2009 Como se poder ver, ex istem bastantes diferenas e que tambm passou bastante tempo entre uma e outra espe cificao. Ademais, a mais atual das duas tem umas explicaes baseadas em esquemas muit o mais entendveis. Do mesmo modo, temos acesso s especificaes que colocaram em andam ento os mais avanados navegadores, que implementam j de maneira experimental algun s dos atributos para criar bordas nas imagens. Site para desenvolvedores de Mozi lla, 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 so bre 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: 100p x; } 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 F irefox 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 e stamos utilizando como borda a seguinte: E o exemplo se pode ver em andamento em uma pgina parte, porm lembre-se que depend endo 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 element o HTML. Talvez convm esperar um pouco antes de dar umas explicaes concisas e exempl os sobre este e outros atributos, visto que mudaram bastante ultimamente. Entret anto, segundo a ltima especificao de CSS 3, temos os seguintes atributos: border-im age-source: Para indicar a URL da imagem que vamos utilizar como borde. border-i mage-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-imagerepeat: 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 u ma maneira resumida de especificar vrios atributos de borda com imagens ao mesmo tempo. Explicar com exemplos cada um destes atributos seria sem dvida interessant e, porm nos levaria vrios artigos e ademais, vale a pena faz-lo quando j estejam dis ponveis 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 c oisas que antes fazamos com tcnicas de design que requeriam uso de imagens, como a s sombras ou as esquinas arredondadas, a partir de agora vamos poder especific-la s simplesmente atravs de CSS. Como vimos no artigo introduo a CSS 3, No cabe dvida qu e 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 CS S 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 s ombra, como esfumaado, separao da sombra e a prpria caixa ou cor. A sintaxe como est a: box-shadow: 5px -9px 3px #000; Por ordem de aparecimento, os valores que se indicam em box-shadow so: Deslocamen to horizontal da sombra: A sombra de um elemento costuma estar um pouco deslocad a com respeito ao elemento que a produz e sua posio ser em funo do ngulo com o qual ch egue 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 esque rda do elemento original que a produz, colocaramos um valor negativo a este atrib uto. Quanto mais deslocamento tiver uma sombra, o elemento que a produz parecer q ue 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 horiz ontal. Valores positivos indicam que a sombra aparecer abaixo do elemento e valor es 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 p ixels para cima do elemento. Esfumaado: O terceiro valor indica quanto queremos q ue 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 maio r que zero, como em nosso exemplo 3px, quer dizer que a sombra ter um esfumaado de ssa largura, 3 pixels no exemplo. Cor da sombra: O ltimo atributo que se indica n o 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 fa zer 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 palet a. 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 W3 C ainda no liberaram as especificaes desta verso das Folhas de Estilo em Cascata e a t 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 Oper a. Por sua parte, navegadores baseados em Mozilla e WebKit tm suporte a esta func ionalidade 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 C hrome: 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 boxs hadow, 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, Chrom e, etc. Exemplos de Sombras CSS3 Agora vejamos vrios exemplos de sombras criadas diretamente com CSS 3 e o atribut o boxshadow, com suas variantes para compatibilidade temporria nos navegadores Mo zilla ou WebKit. #caixasombra{ background-color: #ddd; width: 300px; padding: 10px; box-shadow: 5 px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #3 33; } Isto criaria uma camada com um cinza claro como cor de fundo e uma sombra desloc ada 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-sha dow: 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 d ireita e com um esfumaado de 2 pixels. Ademais, indicamos uma cor amarela clara p ara a sombra, e para v-la bem, teramos que colocar este elemento sobre um fundo es curo. #sombrarredondada{ background-color: #090; color: #fff; width: 400px; padding: 1 0px; -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 ta mbm deve ter as sombras arredondadas, para se ajustar ao elemento que a produz. A mbos navegadores com compatibilidade a sombras e CSS 3 funcionam corretamente co m 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 e stes exemplos com Opera, Firefox, Safari ou Chrome, que so os que atualmente supo rtam 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 dis so, com alguns atributos como background-position ou background-repeat, podemos definir coisas como transferir a posio da imagem de fundo para outro lugar ou form ar 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 n ovos estilos ou modos de comportamento das imagens. Neste artigo exploraremos o novo atributo background-origin, que faz parte da nova especificao de Folhas de Es tilo em Cascata. Veremos tambm exemplos de como utilizar este atributo, dentro da s 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, r epetindo 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 facilmen te 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. Pod e-se ver o amarelo do fundo da cor atribuda ao elemento e a imagem de fundo em az ul. 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-posit ion poderamos mudar essa posio, mas em CSS 3 existe o atributo background-origin qu e tambm nos servir para transferir essa imagem, porm de outra maneira. Com backgrou nd-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 q ue 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 backg round-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 con tar 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 c ontedo 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 (e m 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 q ue as especificaes de CSS 3 sejam recomendadas para sua implementao. Por isso, os na vegadores que comearam a suportar as CSS utilizam alguns prefixos para os nomes d as propriedades. Em Mozilla Firefox devemos utilizar o atributo -moz-backgroundo rigin, em navegadores baseados em webkit (como Chrome ou Safari) deve-se utiliza r o atributo -webkit-background-origin. Alm disso, em navegadores baseados em web kit 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 definiti vo, e seus valores com a correspondente terminao "-box", que como aparece na espec ificao atual do modelo de caixa de CSS 3. Este seria o cdigo CSS para aplicar disti ntos valores de background-origin e que sejam entendidos por todos os navegadore s mais modernos. Nota: O Internet Explorer 8, o mais atual dos navegadores de Microsoft no moment o, as CSS 3 no esto implementadas de nenhum modo, assim que no poderemos ver estes exemplos em funcionamento. #provasfundo1{ -moz-background-origin: border; -webki t-background-origin: border; background-origin: border-box; } #provasfundo2{ -mo z-background-origin: padding; -webkit-background-origin: padding; background-ori gin: padding-box; } #provasfundo3{ -moz-background-origin: content; -webkit-back ground-origin: content; background-origin: content-box; } Assim, j aprendemos a mudar o eixo de posicionamento da imagem de fundo com backg round-origin, contudo voltamos a comentar que a posio da imagem definitiva tambm po de ser marcada com background-position. Na verdade, com o atributo background-or igin estamos definindo o eixo de coordenadas sobre o qual vai ser aplicado o bac kground-position para colocar definitivamente a imagem. Para terminar, colocamos de novo o link do exemplo funcionando. Artigo por Miguel Angel Alvarez - Traduo d e Celeste Veiga Introduo a @font-face de CSS hora de escolher uma fonte para usar em uma pgina web, tradicionalmente se encont rava a limitao de que o usurio tivesse esse tipo de letra instalada em seu computad or, porque caso contrrio, os textos apareceriam com outras tipografias, diferente s 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 red uzido s tpicas Arial, Verdana, Times New Roman e pouco mais. Bem, na atualidade es te problema j est solucionado e tudo graas regra CSS @font-face. Esta regra nos per mite definir em nossa folha de estilos qualquer tipo de tipografia, independente mente do usurio dispor dela ou no e para isso o nico que deve nos preocupar que est eja instalada em nosso servidor. No presente artigo explicaremos como se pode co nfigurar nossa folha de estilos CSS para poder utilizar qualquer fonte que desej emos. 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 fo nte .eot, porm com o passar do tempo outros navegadores ampliaram seu suporte, co meando com Safari 3,1. Na atualidade admite outros tipos de formatos tipogrficos c omo .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 at uais. Sua sintaxe a seguinte: @font-face{ font-family:<nome_fonte>; src: <source>[,<source>]*; [font-weight:<w eigth>]; [font-style:<style>]; } Com isto definimos o tipo de letra e sua localizao em nosso servidor. Caso queiram os 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 Op entype Opera suporta Truetype, Embedded Opentype e Opentype Safari 3,1 suporta T ruetype, 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 format o .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; fon t-weight: normal; src: url(gothic.otf); } H1{ font-family: "gothic"; } H2{ fontfamily: "Vivaldi"; } E em seguida o cdigo HTML para ver o resultado: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <t itle>Prova com estilos de letra distintos</title> <link rel="STYLESHEET" type="t ext/css" href="estilo-font-face.css"> </head> <body> <h1>Estamos provando a letr a 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 simpl es 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 dep ois a acompanharam alguns outros sistemas como Silverlight, de caractersticas sim ilares. No entanto, tudo isto so tecnologias proprietrias, que requerem a instalao d e 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, ma s que no chegam, nem de longe, s possibilidades de animao que poderamos desejar. Refe rimos-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 c omo o Javascript que tambm permite fazer animaes base de mudar atributos CSS de man eira 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 p opular jQuery permite animaes simples mas que se fazem em questo de segundos. Tambm se podem realizar animaes CSS com Javascript inclusive com frameworks especializad os 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 impor tante que suporta muitos outros tipos de animao que at agora estavam reservados a t ecnologias 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 q e 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 h ora de fechar este artigo no funcionava em todos os navegadores. S admitem as anim aes CSS os navegadores Safari e Google Chrome. O resto est trabalhando duro para im plement-lo e esperamos que dentro de pouco tempo possam ser vistos em todos os na vegadores, 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 dificuldad e do desenvolvimento, limitar sua compatibilidade entre diferentes tipos de usuri os e plataformas, assim como os requisitos de conhecimentos de desenvolvedor par a poder incorpor-las. Portanto, uma das vantagens que podemos esquecer de Flash s e quisermos fazer dinamismos espetaculares em nossa web. Colocar Flash de lado, ademais, implica no termos que nos preocupar com o posicionamento da pgina que tan ta 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, co mo deixamos entrever, as vantagens mais importantes seriam a compatibilidade e a facilidade de implementao, ao usar uma linguagem que j resulta familiar para o des envolvedor. 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 facili dade de desenvolvimento porque s trabalharemos em nossos sites com a linguagem CS S e no existir a necessidade de dominar outras linguagens de programao como aconteci a com Flash. Inconvenientes das animaes CSS Como tudo na vida, tambm existem algumas desvantagens ao trabalhar com animaes em C SS. 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 naveg adores (Nenhuma utilidade para animao com CSS 3 pode ser utilizada na Internet Exp lorer e em Firefox podemos ver que algumas coisas j funcionam embora de maneira i ncompleta , mas ainda falta um longo caminho por percorrer). Consume bastantes r ecursos de mquina para produzir as animaes. Tambm podemos encontrar alguma dificulda de na hora da programao, mas no maior do que a que encontraramos se tivssemos que uti lizar 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 m ais que acrescentar nossa pequena introduo s animaes CSS, comearemos a ver como se re lizam 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 Alva rez 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