97614013-css3

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 Tradução de JML (9 capítulos) Miguel Angel Alvarez Tradução de Celeste Veiga (1 capítulo) Sara Alvarez Langa Tradução de Celeste Veiga (2 capítulos) CSS 3: http://www.criarweb.com/css3/ © Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização. 1 Manuais e recursos para desenvolvimento web www.criarweb.com Introdução a CSS3 Desde que CSS começou passaram muitos anos e já vamos pela especificação de CSS3, que in corpora uma série de novidades que vamos tratar de resumir neste artigo. O que é CSS Se você não sabe o que é CSS provavelmente lhe interessaria começar lendo nosso manual de CSS ou a seção de CSS a fundo. Não obstante, caberia dizer que CSS é uma linguagem pa ra definir o estilo ou a aparência das páginas web, escritas com HTML ou dos documen tos XML. CSS se criou para separar o conteúdo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparência das páginas. Com CSS3, mais controle sobre a forma O objetivo inicial de CSS, separar o conteúd o da forma, se cumpriu já com as primeiras especificações da linguagem. Entretanto, o objetivo de oferecer um controle total aos designers sobre os elementos da página foi mais difícil de cobrir. As especificações anteriores da linguagens tinham muitas u tilidades para aplicar estilos às webs, porém os desenvolvedores ainda continuam usa ndo truques diversos para conseguir efeitos tão comuns ou tão desejados como as bord as arredondadas ou a sombra de elementos na página. CSS 1 já significou um avance co nsiderável na hora de desenhar páginas web, trazendo muito maior controle dos elemen tos da página. Porém, como ainda ficaram muitas coisas que os designers desejavam fa zer, mas que CSS não permitia especificar, estes deviam fazer uso de truques para o design. O pior destes truques é que muitas vezes implica alterar o conteúdo da págin a para incorporar novas etiquetas HTML que permitam aplicar estilos de uma manei ra mais elaborada. Dada à necessidade de mudar o conteúdo, para alterar o desenho e fazer coisas que CSS não permitia, estava-se acabando com algum dos objetivos para os que CSS foi criado, que era o de separar por completo o conteúdo da forma. CSS 2 incorporou algumas novidades interessantes, que hoje já utilizamos habitualment e, porém CSS 3 ainda avança um pouco mais na direção, de dar mais controle sobre os elem entos da página. Sendo assim, a novidade mais importante que traz CSS 3, para os d esenvolvedores de webs, consiste na incorporação de novos mecanismos para manter um maior controle sobre o estilo com o qual se mostram os elementos das páginas, sem ter que recorrer a truques ou hacks, que a muitas vezes complicavam o código das w ebs. Propriedades novas em CSS3 Segue aqui uma lista das principais propriedades que são 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 têm copyright dos autores. Não reproduzir sem autorização. nav-right.criarweb. a ssim como exemplos que sirvam para ir conhecendo esta nova especificação de CSS. pelo menos as mais interessantes.Tradução de JML Atributo gradiente de cores em borda com CSS e Firefox Investigando um pouco algumas das propriedades novas que vai trazer CSS 3. mas pode ser bom visitar para ir conhecendo mais detalhe s sobre CSS3. 3 .css3.com têm copyright dos autores.criarweb.com • Cor • • • • Texto • • • fazer camadas com múltiplas 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. É um site em inglês. Em futuros artigos daremos algumas chaves e explicações sobre várias des tas propriedades. Art igo por Miguel Angel Alvarez .com/css3/ © Os manuais de CriarWeb. me deparei com um atributo para mu dar a cor da CSS 3: http://www. Não reproduzir sem autorização.Manuais e recursos para desenvolvimento web www.info/pre view/. nav-left Seletores • Seletores por atributos Modelo de caixa básico • overflow-x. com especificações detalhadas. para completar a informação do artigo Introdução a CSS 3 . nav-bottom. overflow-y Outros • • • • media queries criação de múltiplas colunas de texto propriedades orientadas a iscurso ou leitura automática de páginas web Web Fonts Esta lista de novas propriedades de CSS3 foi tirado de: http://www. Dito de outra forma. não nos ref erimos a poder dar uma cor separada para cada parte da borda. portanto. -m oz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #f f5522 #ff4411 #ff3300.criarweb. Com uma largura de 2 pixel se poderão ver 2 cores diferente s.mo zilla. é uma extensão de CSS realizada por Mozilla. Na página de Mozi lla podemos encontrar mais informação sobre esta extensão de CSS: https://developer. O código para criar esse gradiente de cores seria o seguinte: <style type="text/css"> . Porém. -moz-border-bottom-colors: #ff cc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300. criado por Mozilla e que. a aplicar vár ias cores distintas a uma parte. não aparece esta no va característica como parte do novo padrão. há que ter em conta que só se verá corretamente em Firefox). publicado pelo W3C. podendo especificar uma lista de cores . e sim que se trata de um atributo não padrão de CSS. e sim. porém segundo vejo no rascunho d a especificação de CSS 3 para bordas e fundos. Não reproduzir sem autorização. temos que ressaltar que esta propriedade não é de CSS 3. de dentro para fora. Por isso. direita.coresborda{ border-style: solid. ta lvez em algum momento se converta em um padrão de CSS.com/css3/ © Os manuais de CriarWeb. embora se o s uporte a estes atributos se realizar por mais navegadores e se W3C tiver bem.org/en/CSS/-moz-border-bottom-colors Os atributos aos que nos referimos qu e permitem definir várias cores para cada uma das partes da borda são 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. que nos permite definir a cor com uma sucessão de dis tintos valores de cores. Atualmente. No momento não passa de uma m era curiosidade e possibilidade de personalização especial para os usuários de Firefox e outros navegadores baseados em Mozilla. de cima.com borda dos elementos da página. abaixo e esquerda. border-width: 10px. que se aplicarão a cada uma das partes da borda. com uma largura de 3 poderemos definir 3 cores e assim sucessivamente.com têm copyright dos autores. separadas por espaços. Vi esta pr opriedade comentada em algum lugar como de CSS 3. Artigo por Miguel Angel Alvarez . } </style> É uma pena que seja um atributo unicamente desenvolvido por Mozilla.criarweb. 4 . com CSS podemos definir separadamente as co res da borda de um elemento. -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300. -m oz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 # ff5522 #ff4411 #ff3300. à parte de cima da borda. (Porém. Claro que a borda tem que ter uma largura maior que 1 para que se vej am as distintas cores.Tra dução de JML CSS 3: http://www.Manuais e recursos para desenvolvimento web www. Para v er uma das possibilidades que daria o uso deste atributo podemos ver um exemplo em uma página à parte. se pode ver em seu navegador mais conhecido: Firefo x. por exemplo. O nome do atributo por enquanto é: -moz-border-radius Quanto à Internet Explorer há que dizer que ainda não suporta este atributo de CSS 3. (Há que explicar que um border-r adius de 0px é uma borda com esquina em ângulo reto) Podemos ver este ejemplo em uma página a parte. que é válido para produtos com o Firefox. po r exemplo. Não reproduzir sem autorização. Desta maneira: -moz-border-radius: 7px 27px 100px 0px. Agor a se permitem bordas com as esquinas arredondadas. sombras. e specificando as medidas do radio que devem dar à curva das esquinas border-radius: 5px. ou que as especificações de CSS3 passem rápido ao estado "Candidate Recommendation". Po r enquanto. Até ago ra Mozilla adotou este atributo com um nome especial. Podemos ver o exemplo em uma página a parte. CSS 3: http://www. para navegadores Mozilla.Manuais e recursos para desenvolvimento web www. que seria a chamada para que se implementem na generalidade dos navegadores.com/css3/ © Os manuais de CriarWeb. -moz-border-radius: 7x. etc. 5 . Temos a pr opriedade border-radius. } Com isto conseguimos que todos os div tenham uma borda arredondada nas esquinas de radio de 7pixels. porém esperemos que o pessoal de Microsoft possa implementar em breve no navegador .criarweb. há que lembra r que só se verá o efeito utilizando Firefox ou navegadores baseados em Mozilla. que é quando se supõe que os diferentes navegadores devem imple mentálas. o atributo border-radius tem outras possíveis configurações. o atributo border-radius se utilizaria.com Bordas arredondadas em CSS 3 CSS 3 incorpora novas propriedades para o controle de bordas dos elementos. que permite definir bordas arredondadas nas esquinas. bordas com imagens (inclusive pode-se utilizar várias imagens para definir o aspecto da borda. na qual se podem de finir os valores para o radio das quatro esquinas separadamente. Ne ste artigo vamos explicar como realizar bordas arredondadas com CSS3. enquanto que as especificações de CSS3 não tiverem alcançado o estado "Candid ate Recommendation". Con tudo. padding: 10px.com têm copyright dos autores. de 100px para a inferior direita e 0px para a inferior esquerda. assim: DIV { border: 1px solid #000000. Definiria um radio de 5 pixels no arredondamento das esquinas do elemento. Porém. logo 27px para a esquina superior direita. Assim estaríamos definindo uma borda arredondada com radio de 7 pixel para a esqui na superior esquerda.criarweb. seja solid. que as imagens de fundo saem por fora das bordas arredondadas. Referência: Para conhecer um pouco da recente especificação de CSS3 seria bom ler o ar tigo Introdução a CSS 3. Artigo por Miguel Angel Alvarez .com As bordas arredondadas com CSS 3. Ocorre. Devemos lembrar que no momento de escrever o artigo ainda se têm que terminar de definir as especific ações de CSS 3 e depois. A cada elemento lhe colocaremos um único fundo. Em CSS normal (CSS 1). neste artigo de CriarWeb. O código HTML que utilizaríamos para a ninhar várias camadas DIV seria como segue: <div id="fundo1"> <div id="fundo2"> <div id="fundo3"> conteúdo do elemento que vai ter 3 fundos de imagem distintos . por isso mostraremos como fazê-lo com uma simples técnica alternativa. só são vistas se tiver sido definida alguma borda visível ao elemento que as atribuímos. 6 . Colocar várias imagens de fundo a um elemento à princípio não se pode com CSS. Não reproduzir sem autorização. Em nosso caso. </div> CSS 3: http://www. Confiamos em que no futuro isto possa se r revisado e otimizado.criarweb. até este momento. Nota: Oferecemos uma lista das características principais de CSS 3 no artigo Intro dução a CSS3. Isso é o que define as especificações de CSS3. Isto é algo suportado por todos os navegadores. podemos colocar um único fundo a um elemento da página. os navegadores web deveram se atualizar em um certo espaço de tempo para suportá-las completamente. Mas também veremos que e m SS 3 existe a possibilidade de configurar vários fundos ao mesmo tempo em um ele mento. para que tudo funcione corretamente. para colocar vários fundos ao mesmo tempo.Tradução de JML Múltiplas imagens de fundo com CSS Com o atributo background-image podemos conseguir que um elemento da página tenha um fundo de imagem. et c. Isto devemos saber. Como não podemos colocar m ais de 1 fundo por elemento. Porém. visto que é algo básico das folhas de estilo em cascata (CSS). Outra coisa que definem as especificações de CSS e qu e por enquanto não está funcionando inteiramente bem. dotted. porém ao se mostrar os elementos no mesmo espaço.. é que as imagens de fundo devem se ajustar às bordas arredondadas. conseguiremos o efeito desejado de ter vários fundos de imagem ao mesmo tempo. como se poderá imaginar. temos que utilizar vários elementos. como dissemos. com uma declaração de background-image e sem a necessidade de realizar nenhum tipo de técnica alternativa.criarweb. 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) não funciona inteiramente corretamente com isto e só mostra as bordas arredondadas com solid..com/css3/ © Os manuais de CriarWeb.com vamos mostrar como poderíamos conseguir que um elemento da web tivesse várias imagens de fundo ao mesmo tempo.com têm copyright dos autores.Manuais e recursos para desenvolvimento web www. vamos utilizar várias camadas DIV aninhadas e cada uma terá seu fundo de imagem. se pode fazer em CSS 3 c om um só elemento. Agora vejamos o código CSS p ara lhe dar fundos a cada um destes elementos DIV: <style type="text/css"> #fundo1{ background-image: url(fundo1. t odos os elementos DIV se mostrarão um em cima do outro.png) bottom right no-rep eat. width: 300 px. background-position: center.. } </style> Os fundos irão se sobrepor uns aos outros.gif) center repeat. mas os fundos dos elementos DIV se verão. 7 . } </style> Só cabe comentar que as diferentes imagens de fundo se têm que escrever na declaração CS S separadas por vírgulas. para atribuir estilos por CSS.com têm copyright dos autores. width: 300px . sendo o fondo1 o que será visto mais abai xo e o fundo3 o que se verá mais acima. O que antes vimos que é possível.criarweb. as imagens que declaramos se vão colocando de mod o que a CSS 3: http://www. O resultado deste exemplo se pode ver em u ma página à parte.Manuais e recursos para desenvolvimento web www.png) center no-repeat. À princípio todos os navegadores visualizarão perfeitamente os fundos. } #fundo3{ background-image: url(fundo3.criarweb.com </div> </div> Como se pode ver. podemos aninhar camadas DIV e cada uma terá um identificador. Colocar vários fundos de imagem a um elemento com CSS 3 Uma das novas características de CSS 3 consiste na possibilidade de declarar vários fundos de imagem a um elemento da página.gif).png). porém como utilizei imagens transparentes em formato PNG e Internet Explorer 6 tem problemas com a transparência dos arquivos PNG. Não reproduzir sem autorização. ba ckground-position: bottom right. </div> Agora vejamos o CSS 3 válido para este exemplo: <style type="text/css"> #fundos{ background: url(fundo3. criando vári os elementos aninhados e colocando um fundo em cada um. } #fundo2{ background-image: url(fundo2. Ademais. O HTML do exemplo de várias imagens de fundo seria o seguinte: <div id="fundos"> texto de um único elemento . url(fondo2. ou se preferirmos uma classe. b ackground-repeat: no-repeat.com/css3/ © Os manuais de CriarWeb. url(fundo1. background-repeat: no-repeat. ao que aplicaremos vários fundos distintos.png).. podemos encontrar algum defeito. Ao estar aninhados. 8 . 125. que sem dúvida já terão experimentado com CSS e provavelmente estejam familiarizados com as di stintas notações para especificar cor nas folhas de estilo. Por exemplo. que não é mais que o grau de transparência ou opacidade da cor. Agor a.Tradução de JML Cores RGBA em CSS 3 Como sabemos. sendo 0 totalmente transparente e 1 totalmen te opaco. Nota: Em CriarWeb. fundo1. como as cores RGBA se podem aplicar a qu alquer elemento que suporte atribuição de cor. De momento. que se podem acessar através do seguinte link: introdução a CSS3. O formato de imagem PNG. as aplicações aumentam ainda mais. por meio das cores em RGBA em CSS 3. nesta declaração.com têm copyright dos autores. CSS 3: http://www. da seguinte mane ira: rgba(255.com publicamos vários artigos sobre CSS 3. que não é simplesmente uma maneira nova de expressar o mesmo. abrindo novas possibilidades aos designers sem a necessidade de se complicar com pequenos truques como o uso de imagens de fundo semitransparentes em PNG. através de números em hexadecimal e inclu sive em decimal.5). Agora queremos falar de uma nova notação. Este exemplo se pode ver em uma página à parte. Artigo por Miguel An gel Alvarez . Ademais. Sendo assim. etc. Trata-se da notação RGBA. que está colocada como último fundo. é a que aparece atrás de tudo. 0.gif. Os três pr imeiros são os bem conhecidos canais RGB (vermelho. que tanto nos gosta por suporta r transparência que se vê corretamente em todos os fundos possíveis. A notação R GBA é uma maneira de especificar cores na qual se definem quatro valores.com/css3/ © Os manuais de Criar Web. que a partir de CSS 3 está disponível para os desenvolvedores. qu e admite diversas notações para definir a cor. se devem especificar quatro valores. O único porém. verde e azul) e o quarto parâmet ro é o canal Alpha.criarweb. as cores em HTML se expressam em valores RGB.Manuais e recursos para desenvolvimento web www. igual que em CSS. implementa justam ente este canal alpha na definição da cor para conseguir uma transparência ideal. e sim um a maneira que nos permite definir cores por meio de valores adicionais. Não reproduzir sem autorização. porém esperemos que em breve outros navegadores vão incorporando esta funcional idade de CSS 3.com primeira aparece sobre as seguintes. O ca nal Alpha é um valor entre zero e um. a possibilid ade de incluir vários fundos de imagem a um elemento só está disponível no navegador Saf ari. poderemos aplicar novas transparências às co res que especificamos com CSS. 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 parâmetro. Tudo isto supomos que não será um mistério para os leitores. é que CSS 3 não está amplamente su portado por todos os navegadores. Internet Explorer 8 não o suporta p or enquanto. pelo menos no momento de escrever este artigo. Notação de cor RGBA Para definir uma cor RGBA. 0.criarweb. font-weight: bold. 255. que correspondem com os valo res de vermelho.qu adrado{ width: 150px.1). height: 40px. como Firefox. 0."></div> <div class="quadrado" style="back ground-color: rgba(0. font-s ize: 40pt.0. 255.8). } </style> </head> <body> <h1>Cores RGBA com CSS 3</h1> <h2>Exemplo d e camadas com fundo azul e várias transparências</h2> <div class="quadrado" style="b ackground-color: rgba(0. margin: 5px. Exemplos de estilos CSS com cores definidos por RGBA Agora vejamos vários exemplos de cores definidos com CSS e a notação RGBA.255. 0.5 seria uma transparência ao 50%. 25 5. 0.7). metade opaco e meta de transparente. 0.">Este texto é ver de e tem um pouco de transparência</span> Porém. 0. 0. com têm copyright dos autores. 0. const ruímos uma página onde se mostram várias camadas com cores e transparências. Não reproduzir sem autorização. helvetica. padding: 10px. se verão ou não as distintas cores.4). 0.criarweb. verde e azul. 0 seria totalmente transparente.">Esta camada tem fundo azul. Chro me ou Safari. O quarto va lor é um número entre 0 e 1. border: 1px solid #dddddd."> <div class="quadrado" style="background-color: rgba (0."></div> <div class="quadrado" style="backgro und-color: rgba(0. para poder termos uma idéia mais aproximada das possibilidades. 255. novamente chamamos a atenção dos leitores sobre o fato que. porém não em navegadores como Internet Explorer. 1 seria t otalmente opaco e 0.4). 255. 0. 1). 0."></div> <div class="quadrado" style="background -color: rgba(0."></div> <div class="quadrado" style="background-color: rgba(0. Para isso.7). 255. 0.criarweb. o ideal é ver o efeito de transparência em funcionamento . <div style="background-color: rgba(0.1). ou seja. sobre uma camada com fundo amarelo</h2> <div style="background-c olor: #ff3.1). dependendo do navegador que se utilize. visto que as CSS 3 não são compatíveis com todos os sistemas.com Os três primeiros valores são números em sistema decimal. que fazem a guerra po r sua conta. 255.Manuais e recursos para desenvolvimento web www. 255. 0. 9 . quase transparente</div> <span style="color: rgba(0. tanto no fu ndo como no texto.0.com/css3/ © Os manuais de CriarWeb. 0. à parte destes exemplos."></div> <div class="quadrado" style="background-color: rgba(0."></div> CSS 3: http://www. Porém. 0. Sempre têm que ser números entre 0 e 255. 0."></div> <h2>Exemplo de camadas com fundo verde e vária s transparências. Ver exemplo de cores CSS RGBA. } di v. E ste exemplo funcionará bem em navegadores que cumpram os padrões. Por exemplo.textogrande{ font-family: verdana. O código do anterior exemplo é o seguinte: <html> <head> <title>Cores RGBA com CSS 3</title> <style type="text/css"> div. arial. Pode surgir um problema quando temos uma palavra muito longa. CSS 3: http://www. Temos de agradecer a Microsoft a incorporação desta nova propriedade de CSS 3. 125. 0.7). para torná-l o compatível com as CSS 3 e as cores RGBA. 0.">Este texto está para que se veja que pode ser também meio transparente</div> <div class="textogrande" style="color: rgb a(200. Então o que oc orre é que a palavra aparece por fora da caixa. 0. é de supor que as pessoas de Microsoft colocaram em dia seu navegador em algum momento. Não reproduzir sem autorização. 0. 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. 0.">Este texto está para que se veja que pode ser também meio transp arente</div> </div> </body> </html> Se se permite minha opinião.3).com <div class="quadrado" style="background-color: rgba(0.com têm copyright dos autores.Tradução de JML Word-wrap em CSS 3 Estamos dando um repasso as novidades que trará a especificação CSS 3 e neste caso vam os ver uma propriedade interessante que servirá para que certas palavras que são lon gas demais e não cabem na largura de uma caixa."></div> </div> <h2>E xemplo de texto de cor vermelha e várias transparências. no modelo de c aixa dos navegadores. 0. já que o atributo word-wrap começou sendo uma etiqueta não padrão de CSS. sobre uma camada com uma imagem de fundo</h2> <div style="background-image: url(http://www.com/css3/ © Os manuais de CriarWeb.criarweb.gif). padding: 10px."></div> <div clas s="quadrado" style="background-color: rgba(255."> <div c lass="quadrado" style="background-color: rgba(255."></div> </div > <h2>Exemplo de camadas com fundo laranja e várias transparências. 125. as palavras se vão colocando em linhas para ocupar toda a la rgura disponível na caixa. que não cabe na largura disponível do container onde se colocou. que estava disponível em Internet Explorer e devido a sua utilidade."> <div class="texto grande" style="color: rgba(200. 10 .4)."></div> <div cla ss="quadrado" style="background-color: rgba(255. porque a ssim se torna complicado usar este tipo de efeitos. Para evitar este efeito. no momento de escrever estas linhas. Uma propriedade muito útil que com certeza rapidamente começará a se utilizar habitua lmente.criarweb.com/art igos/exemplos/photoshop/fundo-neve/neve.gif). 0. 1)."></div> <div cl ass="quadrado" style="background-color: rgba(255. 0. 125. 255.criarweb.1). 125.Manuais e recursos para desenvolvimento web www. padding: 10px.com/artigos/exemplos/photoshop/fundo-neve/neve. Em qualquer caso. 0. 0. o efeito resultante costum a ser pouco agradável. porque muitas vezes nos desenquadra nosso desenho e faz com que as fiquem mal construídas. de maneira que caibam na largura disponível da caixa. sobre uma camada com uma im agem de fundo</h2> <div style="background-image: url(http://www. 1).criar web. 0. 0. 0. ou inclusive pode ocorrer que a ca ixa se deforme de tamanho. é uma pena que esta gestão de cor com canal alpha não estej a disponível em Internet Explorer 8. o W3C se decidiu a incor porar à nova especificação deste linguagem de estilo. 0.7). Artigo por Miguel Angel Alvarez . fazendo que o elemento container amplie a largura o s uficiente para que fique a palavra. Não obstante. Como devemos saber. Manuais e recursos para desenvolvimento web www. que se encontrarão disponíveis quando CSS 3 se implemente f inalmente nos navegadores. mesmo que quiséssemos. word-wrap: normal. Não obstante. Embora tudo isto não passe de um estado experimental. Safari e Google Chrome. Não reproduzir sem autorização. Para criar uma estrutura multi-coluna utiliz aremos vários atributos. não seria quase impossível seguir as linhas para fazer uma leitur a cômoda da informação se tudo estivesse em uma única coluna? Este problema não o encontra mos geralmente nas páginas web. o certo é que já podemos começar a prová-lo e utilizar em navegadores modernos. o que conseguimos é que a palavra s e recorte. como muit as das novas possibilidades que estamos comentando sobre CSS 3 Numerosas publicações constroem o texto em diversas colunas. 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. oferecerá um a solução ao mesmo.criarweb. que servirão para CSS 3: http://www. Faz com que as palavras não se cortem.Tradução de JML Textos multi-coluna com CSS 3 Neste artigo vamos tratar sobre as novas características de CSS para construção automáti ca de textos em colunas. ou melhor. para caber na largura que havíamos definido. 11 . porém agora vamos colocar uma palavra longa demais q ue não caberá. word-wrap: break-word. simples e automática. Poderíamos imaginar o texto dos jornais se não se encontrasse dividido em diversas colunas. como critério de desenho e para facilitar a leitura. de modo que estas crescerão homogeneamente à medida que o texto cresce ou se reduz.com. CSS 3 soluciona este problema.com O atributo word-wrap tem dois possível valores: normal ou break-word. Com este outro valor de word-wrap: break-word. Artigo por Miguel Angel Alvarez . Agora a camada não se vê afetada por uma palavra tão longa. Firefox parece que a incl uirá a partir de sua versão 3. porque o texto que cabe no corpo da página não é tão grand e como o que caberia em uma folha de um diário. por isso nos desenquadraria o desenho: wieiisiddjasddjkjasdasdsadfdsf sdfsfsdfsdsdfsdfkaldkadadsadadadadsad.com/css3/ © Os manuais de CriarWeb. o que seria o comportamento normal que conh ecíamos até agora. Ademais. com a s características de CSS 2 não seria muito fácil fazer um texto fluído que se adaptasse automaticamente em colunas. Este atributo por agora é su portado por Internet Explorer. Es te texto entra bem na camada. Esta camada tem 300 pixels de largura e e ssa palavra.1.com têm copyright dos autores. portanto não cabia e me desenquadra tudo. geralmente a própria página já se encontra dividida em diversas colunas. que não foi lançada ainda no momento de escrever este a rtigo de CriarWeb. 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.criarweb. O sistema de múltiplas colunas se encontra em fase beta e faz parte d e um módulo à parte dentro das especificações de CSS 3. Apple Safári e Go ogle Chrome. para que funcione nestes navegadores seria: .criarweb. Podemos ver uma página à parte com os exemplos mostrados de construção e m múltiplas colunas. -webkit-co lumn-rule: 1px solid #ccf. que seria "-moz-" no caso de Firefox e "webkit-" para o navegador Safari ou Chrome. porém em páginas fluídas pode funciona r pior. d esta maneira: .multicoluna5colunas{ -moz-column-count: 5. Porém. Um exemplo de multicolum na. nenhum navegador as suporta. -webkit-column-gap: 15px. porque não se sabe com certeza que largura vai ter o lugar onde se mostram os textos e portanto. até o momento.org/TR/css3-multico l/ Esperamos que estas características de CSS 3 se encontrem rapidamente disponíveis . 12 . } Outra possibilidade para criar um multicolumna será definir simplesmente o número de colunas que quisermos incorporar no texto. Entretanto.Tradução de JML CSS 3: http://www. algumas vezes podem ficar colunas muito largas e outras m uito estreitas. pois não cabe dúvida que a distribuição por colunas nos abrirá novas e interessantes pos sibilidades para a construção de textos em páginas web.com têm copyright dos autores. lembre que só funcionará em Mozilla Firefox. de maneira experimental e até que as especificações de CSS 3 estejam dispostas para incorporar nos navegadores. -moz-column-gap: 2em.com/css3/ © Os manuais de CriarWeb. } Especificar o número de colunas é talvez mais cômodo. -webkit-column-count: 5. -moz-column-gap: 15px. Artigo por Miguel Angel Alvare z . Estas etiquetas. podemos utilizá-las se colocarmos um pré-fixo. -moz-co lumn-rule: 1px solid #ccc. -moz-column-ru le: 1px solid #ccf.com modelizar as colunas: • • • colum-width: servirá para definir a largura das distintas co lunas a criar. Se se deseja encontrar mais info rmação sobre o tema na W3C se pode consultar a URL http://www.criarweb. -webkit-column-gap: 2em. c olumn-rule: servirá para criar um filete ou linha divisória entre as colunas. -webkit-column-rule: 1px solid #ccc.multicoluna{ -moz-column-width: 15em. G oogle Chrome e Firefox já implementam o multicolumna. por meio do atributo column-count.w3. column-gap: nos permitirá definir o espaço em branco entre colunas. -webkit-column-wid th: 15em. Pa ra isso. Não reproduzir sem autorização. Safari.Manuais e recursos para desenvolvimento web www. alterou algumas ve zes as especificações do atributo border-image e relacionados. Colocar imagens nas bordas é uma tarefa que já se costuma realizar no webdesign. Site para desenvolvedores de Mac e seu navegador Safari . para que sirva unicamente a modo de demonstração que é tudo o que se pode fazer até o momento neste artigo de CriarWeb. recomendamos a leitura do si te da W3C. O organismo W3C. É por isso. costuma-se utili zar complementarmente técnicas com as linguagens HTML e CSS. Não reproduzir sem autorização. etc. inclusive podendo e scolher várias imagens para várias das partes das bordas. Rascunho de trabalho sobre as propriedades de borda de imagem. parágrafo. Para as pessoas que desejem encontrar de primeira mão as espec ificações dos atributos para colocar borda nas imagens. que é uma espécie de compêndio de exemplos e técnicas que nos pe rmitirá aplicar esta nova especificação das Folhas de Estilo em Cascata. com algum container que nos permita logo def inir estilos CSS para "imitar" essa borda de imagem. Publicamos este artigo den tro do Manual de CSS 3.criarweb. Ademais. que serve para p ersonalizar as bordas dos elementos HTML com imagens. De qualquer forma.criarweb. como pode ser uma divisão ou uma tabela.Manuais e recursos para desenvolvimento web www. Exemplo de border-image Sendo assim. para que um elemento da página. estejamo s ou não familiarizados com as técnicas de uso de imagens nas bordas. Ou seja.com/css3/ © Os manuais de CriarWeb. Distintas especificações sobre border-image As especificações de CSS 3 estão em etapa de desenvolvimento. a mais atual das duas tem umas explicações baseadas em esquemas muit o mais entendíveis. teríamos este elemento HTML: CSS 3: http://www. vamos dar um simples exemplo so bre o que permite atualmente os navegadores Safari e Firefox sobre border-image. Por exemplo. tenha uma borda a partir de uma imagem.com têm copyright dos autores. que implementam já de maneira experimental algun s dos atributos para criar bordas nas imagens. border-image é um atributo que nos ajudará a aplicar novos estilos às caixas c om CSS. que ainda há algumas diferenças entre o que os navegadores entendem com este atributo e o que r ecomenda o W3C. tal como anuncia Mozilla em seu centro de desenvolvimento. 13 .com Bordas com imagens em CSS 3 Vamos falar rapidamente sobre um dos novos atributos das CSS 3. temos acesso às especificações que colocaram em andam ento os mais avançados navegadores. o importante é q ue com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos a tributos aos elementos que desejarmos. no momento d e escrever este artigo. através da utilização de imagens nas bordas dos elementos. se necessita colocar algum código HTML adicional.com. De maneira re sumida. Isto quer dizer que no futuro ainda pode mudar o funcionamento d este atributo nos distintos navegadores. Site para desenvolvedores de Mozi lla. ex istem bastantes diferenças e é que também passou bastante tempo entre uma e outra espe cificação.. sobre Border Image. que se encarrega de definir os padrões de Folhas de Estilo em Cascata. Do mesmo modo. Novemb ro de 2002 Rascunho sobre borda de imagem. Dezembro de 2009 Como se poderá ver. e para isso. temos os seguintes atributos: border-im age-source: Para indicar a URL da imagem que vamos utilizar como borde. ou seja. -webkit -border-image: url(sello. vale a pena fazê-lo quando já estejam dis poníveis como especificação definitiva de CSS 3 e não em um simples rascunho. padding:20px. top. CSS 3: http://www. porém lembre-se que depend endo do seu navegador poderá ver ou não a borda da imagem. border-image-outset: Serve para indicar a área na que a imagem de borda se estende mais da área do elemento. 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. assim como quando estejam implementados nos navegadores.Manuais e recursos para desenvolvimento web www. border-image: Utiliza-se como u ma maneira resumida de especificar vários atributos de borda com imagens ao mesmo tempo. nos 4 lados da mesma. e sim uns próprios para cada um dos navegadores que implementam esta nova característica de CSS 3. } Como se pode ver. os atributos para bordas de imagens não têm o nome definitivo. Talvez convém esperar um pouco antes de dar umas explicações concisas e exempl os sobre este e outros atributos.png) 2 2 2 2 stretch stretch.com/css3/ © Os manuais de CriarWeb. Não reproduzir sem autorização. que será border-image. nos quatro lados do elemento. visto que mudaram bastante ultimamente. A imagem que e stamos utilizando como borda é a seguinte: E o exemplo se pode ver em andamento em uma página à parte.criarweb. como Safari ou Chrome. Entret anto. Explicar com exemplos cada um destes atributos seria sem dúvida interessant e. bottom e left. right. porém nos levaria vários artigos e ademais. Outros atributos para fazer borda com imagens À parte do atributo border-image.criarweb. width: 100p x. border-imagerepeat: Permite marcar se se deseja ou não que se repita a imagem da borda fazendo um mosaico ou se se deseja que se estique. etc.com <div id="camadaborda"> Vou colocar uma borda acima </div> E agora poderíamos aplicar estilos para criar uma borda na imagem: #camadaborda{ -moz-border-image: url(sello.com têm copyright dos autores. 14 . border-i mage-slice: Indica o espaço da imagem que será visível como borda.png) 2 2 2 2 stretch stretch. existem outros numerosos atributos para definir as bordas de maneira independente para cada um dos lados ou vértices de um element o HTML. segundo a última especificação de CSS 3. border-image-width: Para indicar a largura da borda. que possam combinar melhor com nossa palet a. quer dizer que a sombra terá um esfumaçado de ssa largura. Atributo box-shadow O atributo box-shadow requer vários valores para especificar as características da s ombra. No caso do anterior exemplo. separação da sombra e a própria caixa ou cor. Como vimos no artigo introdução a CSS 3.criarweb.criarweb. Se o esfumaçado fosse zero. o atributo de CSS3 que nos permitirá definir sombras aos elementos da página. 3 pixels no exemplo. Cor da sombra: O último atributo que se indica n o atributo box-shadow é a cor da sombra. o que tornará as páginas mais leves e separará ainda mais o conteúdo da forma. os valores que se indicam em box-shadow são: 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 posição será em função do ângulo com o qual ch egue a luz.Tradução de JML Sombras em CSS 3 com box-shadow CSS 3 supõe uma nova revolução no web design. quer dizer que a sombra aparecerá 5 pixels à direita. Geralmente as sombras no mundo real têm uma cor preta ou cinza. com -9px estamos indicando que a sombra aparecerá deslocada 9 p ixels para cima do elemento.com têm copyright dos autores. 5px. o primeiro dos valores. No caso deste exemplo. como a s sombras ou as esquinas arredondadas.com Artigo por Miguel Angel Alvarez . o elemento que a produz parecerá q ue está mais separado da tela da página. Deslocamento vertical da sombra: O segundo valor que colocamos no atributo box-shadow é o deslocamento vertical da sombra com respeito à posição do elemento que a produz. quer dizer que a sombra não tem nenhum esfumaçado e aparece totalmente definida. 15 . Esfumaçado: O terceiro valor indica quanto queremos q ue esteja esfumaçada a borda da sombra. como em nosso exemplo 3px. Isto quer dizer que. Se o valor for maio r que zero. colocaríamos um valor negativo a este atrib uto. Este valor é similar ao deslocamento horiz ontal. que nos permitirá poupar tempo e sobretudo. trazendo soluções a muitas das práticas que os designers utilizam para decorar as páginas web.Manuais e recursos para desenvolvimento web www. Ao longo do Manual de CS S 3 já vimos vários atributos novos de bastante importância e variedade e agora é a vez do box-shadow. Se quisermos que a sombra apareça um pouco à esque rda do elemento original que a produz. Quanto mais deslocamento tiver uma sombra. como esfumaçado. Não reproduzir sem autorização. Não cabe dúvida qu e significará um grande avance para as pessoas que se dedicam a desenvolver webs. No exemplo anterior havíamos indicado uma CSS 3: http://www. A sintaxe é como est a: box-shadow: 5px -9px 3px #000. a partir de agora vamos poder especificá-la s simplesmente através de CSS. economizar código fonte. Por ordem de aparecimento. muitas das c oisas que antes fazíamos com técnicas de design que requeriam uso de imagens. porém com CSS3 poderemos indicar qualquer gama de cor para fa zer a sombra. Valores positivos indicam que a sombra aparecerá abaixo do elemento e valor es negativos farão com que a sombra apareça deslocada um pouco para cima.com/css3/ © Os manuais de CriarWeb. o que nos dará bastante mais versatilidade aos desenhos graças à possível utilização de sombras em distintas cores. Chrom e. } CSS 3: http://www.com/css3/ © Os manuais de CriarWeb. porém. se desejamos ampliar ao máximo a compatibilidade com boxs hadow. Por enquanto. Não obstante. por exemplo: -moz-box-shadow: 1px 1px 0px #090. como Safari ou Google C hrome: Nesses momentos e de maneira temporária. Ademais. width: 300px. Exemplos de Sombras CSS3 Agora vejamos vários exemplos de sombras criadas diretamente com CSS 3 e o atribut o boxshadow.com têm copyright dos autores. Compatibilidade das sombras CSS com navegadores O certo é que as CSS 3 ainda estão em fase de especificação. Não reproduzir sem autorização. navegadores baseados em Mozilla e WebKit têm suporte a esta func ionalidade de CSS3. como Firefox: De maneira temporária. padding: 10px. embora já se encontrem muito avançadas e os navegadores mais modernos já começaram a implementá-las. Atributo box-shadow para navegadores baseados em Mozilla. } 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 esfumaçado. -webkit-box-shadow: 2px 2px 2px #ffc. através de uns atributos CSS com uma ligeira variação em seu nome. -webkit-box-shadow: 5px 5px 0 #333.com sombra com cor preta. com suas variantes para compatibilidade temporária nos navegadores Mo zilla ou WebKit. assim como -moz-box-shadow e -webkitbox-shadow para que funcione nas versões atuais de Firefox. por exemplo: -webkit-box-shadow: 3px 3px 1px #fc8.criarweb.Manuais e recursos para desenvolvimento web www. o W3 C ainda não liberaram as especificações desta versão das Folhas de Estilo em Cascata e a té que comece a recomendar sua implementação os clientes web não têm porque entendê-las. -moz-box-sha dow: 2px 2px 2px #ffc. padding: 10px. #sombraclara{ width: 200px. necessitaríamos indicar tanto o próprio atributo box-shadow (que funciona em Opera e no futuro funcionará em todos os navegadores). -moz-box-shadow: 5px 5px 0 #3 33. 16 . box-shadow: 5 px 5px 0 #333. etc. definimos uma cor de sombra cinza escuro para o elemento.criarweb. box-shadow: 2px 2px 2px #ffc. Por sua parte. Firefox é capaz de interpretar o atributo -moz-box-shadow. Como poderemos imaginar. color: #fff. Atributo box-shadow para navegadores baseados em WebKit. navegadores como Chrome ou Safari entendem o atributo: -webkit-box-shadow. podemos utilizar box-shadow nas versões mais modernas do navegador Oper a. Safari. #caixasombra{ background-color: #ddd. background-color: #999. padding: 1 0px. Observar o exemplo da seguinte imagem: CSS 3: http://www. Agora . -moz-border-radius: 7px.Tradução de JML Propriedade background-origin de CSS 3 CSS permite especificar que os elementos tenham um fundo com uma imagem e além dis so. Essas propriedades são bastante utilizadas no desenho de páginas web e talvez já as dominemos. Neste artigo exploraremos o novo atributo background-origin. Sendo assim. box-shadow: 15px -10px 3px #000. Safari ou Chrome. com CSS 3 temos a possibilidade de especificar n ovos estilos ou modos de comportamento das imagens. teríamos que colocar este elemento sobre um fundo es curo.criarweb. que não se faça um mosaico no fundo. que faz parte da nova especificação de Folhas de Es tilo em Cascata. para se ajustar ao elemento que a produz. width: 400px. -moz-box-shadow: 15px -10px 3px #000. Porém. pois está aplicada sobre um elemento que tem as esquinas arredondadas com CSS 3. } Neste terceiro exemplo. também deslocada para baixo e à d ireita e com um esfumaçado de 2 pixels. indicamos uma cor amarela clara p ara a sombra. color: #fff. podemos definir coisas como transferir a posição da imagem de fundo para outro lugar ou form ar um mosaico. Tenha em conta que você deverá provar e stes exemplos com Opera. com alguns atributos como background-position ou background-repeat. Veremos também exemplos de como utilizar este atributo. ou seja.com Este outro exemplo é para uma sombra um pouco menor.Manuais e recursos para desenvolvimento web www.com/css3/ © Os manuais de CriarWeb. r epetindo a imagem ao longo de todo o espaço desse elemento. a sombra ta mbém deve ter as sombras arredondadas. e para vê-la bem. Artigo por Miguel Angel Alvarez . Ademais. -webkit-border-radius: 7px. colocamos um link a uma página onde você pode ver os exemplos de sombras em CSS 3. Firefox. temos um caso curioso de sombra.criarweb. que são os que atualmente supo rtam este atributo.com têm copyright dos autores. 17 . uma imagem de fundo aparece como um mosaico. dentro da s explicações que estamos apresentando no Manual de CSS 3. Para acabar. A mbos navegadores com compatibilidade a sombras e CSS 3 funcionam corretamente co m sombras e bordas arredondadas. para colocar essa imagem o navegador utiliza uma origem de coordenadas. #sombrarredondada{ background-color: #090. -webkit-box-shadow: 15px -10px 3px #000. Não reproduzir sem autorização. Por padrão. O que é background-origin Quando colocamos uma imagem de fundo em um elemento de HTML se posiciona dentro do espaço desse elemento. que veremos mais facilmen te se fizermos com que a imagem não se repita. Além disso. Para termos uma ideia mais clara sobre os distintos valores de background-origin fizemos um exemplo. Em Mozilla Firefox devemos utilizar o atributo -moz-backgroundo rigin. Neste caso estamos indicando que a imagem comece onde começa a borda do elemento. os na vegadores que começaram a suportar as CSS utilizam alguns prefixos para os nomes d as propriedades. Veremos que está colocada dentro do elemento . incluindo seu possível padding e sem con tar a possível borda. background-origin: content-box. padding-box: Este valor é aquele utilizado por padrão em CSS 3 e é como se posiciona a imagem em navegadores que só entendem o CSS 2 ou inferior.com/css3/ © Os manuais de CriarWeb. background-origin: padding-box. dentro do corpo e sem levar em conta a borda. mas em CSS 3 existe o atributo background-origin qu e também nos servirá para transferir essa imagem.com têm copyright dos autores. Compatibilidade de background-origin À hora de escrever este artigo os navegadores ainda não haviam implementado todas as novas características das CSS. Nota: Se background-attachment tem o valor "fixed" este atributo será ignorado. Não reproduzir sem autorização. seu padding ou seu conteúdo. 18 . queremos que o eixo de coordenadas onde se vai colocar a imagem seja o espaço destinado ao elemento. Sabemos que com background-posit ion poderíamos mudar essa posição.criarweb. caso tenha borda. mas é necessário ser visto com navegadores compatíveis com CSS (e m seguida explicamos isso). content-box: O terceiro dos possíveis valores de background-origin serve para que a origem de coordenadas para a posição da imagem de fundo seja o lugar onde começa o c onteúdo do elemento. Pod e-se ver o amarelo do fundo da cor atribuída ao elemento e a imagem de fundo em az ul. em navegadores baseados em web kit e Mozilla não se leva em conta a terminação CSS 3: http://www. para que seja a borda do elemento. em navegadores baseados em webkit (como Chrome ou Safari) deve-se utiliza r o atributo -webkit-background-origin. Vejamos seus possíveis valores com uma explicação: border-box: Este valor significa q ue a origem de coordenadas da imagem será a borda do elemento. até q ue as especificações de CSS 3 sejam recomendadas para sua implementação. Com backgrou nd-origin podemos definir a origem de coordenadas sobre a qual vai ser colocada a imagem de fundo. porém de outra maneira. ou seja. Por isso. sem levar em conta suas possíveis bordas e padding. mas a imagem não se repete. Ver um exemplo funcionando em uma página à parte. Agora vejamos onde começa a imagem. background-origin: border-box.criarweb.com Colocou-se uma imagem de fundo para esse elemento.Manuais e recursos para desenvolvimento web www. Na maioria de casos estão apenas sendo testadas. Quando indicamos backg round-origin: padding. -webkit-background-origin: padding. } #provasfundo3{ -moz-background-origin: content.Tradução d e Celeste Veiga Introdução a @font-face de CSS À hora de escolher uma fonte para usar em uma página web.com "-box" ao final dos valores dos atributos. 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.com têm copyright dos autores. #provasfundo1{ -moz-background-origin: border. No presente artigo explicaremos como se pode co nfigurar nossa folha de estilos CSS para poder utilizar qualquer fonte que desej emos. 19 . as CSS 3 não estão implementadas de nenhum modo. } Assim. porque caso contrário. -webki t-background-origin: border. Para terminar. Artigo por Miguel Angel Alvarez . Na verdade. -webkit-back ground-origin: content. colocamos de novo o link do exemplo funcionando.criarweb. Não reproduzir sem autorização. o mais atual dos navegadores de Microsoft no moment o. contudo voltamos a comentar que a posição da imagem definitiva também po de ser marcada com background-position. os textos apareceriam com outras tipografias. na atualidade es te problema já está solucionado e tudo graças à regra CSS @font-face. background-origin: border-box. com a garantia de que funcionassem bem na maioria dos visitantes. razão pela qual há que eliminá-la. Times New Roman e pouco mais. assim que não poderemos ver estes exemplos em funcionamento. É por isso que o leque de fontes que podíamos utilizar.Manuais e recursos para desenvolvimento web www. background-origin: content-box. e seus valores com a correspondente terminação "-box". Bem.criarweb. estava bem red uzido às típicas Arial. que é como aparece na espec ificação atual do modelo de caixa de CSS 3. independente mente do usuário dispor dela ou não e para isso o único que deve nos preocupar é que est eja instalada em nosso servidor. Por sua vez. Este seria o código CSS para aplicar disti ntos valores de background-origin e que sejam entendidos por todos os navegadore s mais modernos. já aprendemos a mudar o eixo de posicionamento da imagem de fundo com backg round-origin. Verdana.com/css3/ © Os manuais de CriarWeb. Esta regra nos per mite definir em nossa folha de estilos qualquer tipo de tipografia. } #provasfundo2{ -mo z-background-origin: padding. em Opera já vem implementada a funcionalidade com o nome de atributo definiti vo. Nota: O Internet Explorer 8. background-ori gin: padding-box. tradicionalmente se encont rava a limitação de que o usuário tivesse esse tipo de letra instalada em seu computad or. diferente s das que tínhamos escolhido. CSS 3: http://www. [font-weight:<w eigth>].criarweb.otf.<source>]*. comprovaremos que o mais aconselhável é subir as fontes com formato . Exemplo de uso de @font-face A seguir colocamos o código de um exemplo com dois tipos de fontes. Na atualidade admite outros tipos de formatos tipográficos c omo . é claro . Isto se deve a que IE só suporta o formato . tomará a seguinte por padrão que tenhamos definida em nossa folha de estilos. Não reproduzir sem autorização. I. CSS 3: http://www.eot.1 suporta T ruetype. para poder utilizar qualquer fonte em nossa web. Firefox 3. para o que podemos utilizar o programa Microsoft Weft.6 suporta Opentype.1 e. uma com format o . Sua sintaxe é a seguinte: @font-face{ font-family:<nome_fonte>.otf. Embedded Opentype e Opentype Safari 3. suporta Embedded Op entype Opera suporta Truetype.criarweb. Por isso. com todas as versões superiores aos navegadores já citados. No principio só funcionava em IE 5 e admitia unicamente formatos de fo nte . Nota: Nem todos os navegadores admitem todos os formatos anteriormente citados. • • • • • Firefox 3. Devemos ter em conta que caso não encontre a fonte em nosso servidor. Embedded Opentype e Opentype Google Chrome suporta Truetype. que funciona em todos os navegadores. cujo funcionamento veremos detalhadamente em outro artigo.eot. src: <source>[.com têm copyright dos autores. porém com o passar do tempo outros navegadores ampliaram seu suporte.com Importar fontes tipográficas mediante CSS com @font-face A mencionada regra @font-face nasce com CSS 2 mas até CSS 3 não começa a funcionar e a prosperar.eot. } Com isto definimos o tipo de letra e sua localização em nosso servidor.Manuais e recursos para desenvolvimento web www. devemos converter nossas fontes para esse formato.otf e funciona também com os navegadores Opera 10. já nada nos impede de fazer uso desta @font-face. Caso queiram os utilizar tal fonte só temos que chamá-la com font-family nas regras de estilo que desejemos.E.com/css3/ © Os manuais de CriarWeb. [font-style:<style>]. O primeiro é visualizado em todos os navegadores e no segundo IE toma outra letra por padrão já que não admite o formato .ttf e. co meçando com Safari 3.eot e outra com formato . Então. com a garantia de que se visualizará perfeitamente em todos os navegadores mais at uais.1. Embedded e Opentype Se desejamos trabalhar com fontes diferentes através de @font-face e nos preocupa a compatibilidade com todos os navegadores. Embedded Opentype e WOFF. 20 . Manuais e recursos para desenvolvimento web www. Paralelamente existem vários outros suportes para animação que sim fazem parte das tecnologias de criação de páginas web universais.criarweb.com têm copyright dos autores. ma s que não chegam. as animações nas páginas web sempre tinham que ser feitas utilizando diversas tecnologias complementares. font-style: normal. às possibilidades de animação que poderíamos desejar. No entanto. nem de longe.com Código da folha de estilos: @font-face { font-family: Vivaldi.Tradução de Celeste Veiga Introdução às animações CSS Como todos provavelmente saibamos.com/css3/ © Os manuais de CriarWeb. font-weight: normal. } @font-face{ font-family: "gothic". font-style: normal. } H2{ fontfamily: "Vivaldi". } H1{ font-family: "gothic".eot). src: url(gothic. que requerem a instalação d e um plugin para funcionar no navegador. Artigo por Sara Alvarez Langa . de características sim ilares. por mais aceitação que tenham chegado a ter.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. 21 . fon t-weight: normal. Não reproduzir sem autorização.criarweb. o que impede que sejam universais. } E em seguida o código HTML para ver o resultado: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. que CSS 3: http://www. mais além do simpl es HTML ou CSS.css"> </head> <body> <h1>Estamos provando a letr a Gothic (não se verá em IE)</h1> <h2>Aqui a letra Vivaldi</h2> </body> </html> Você pode ver o resultado em uma página à parte. Refe rimos-nos aos GIF animados. até agora. tudo isto são tecnologias proprietárias. src: url(VIVALDI0.otf). O primeiro sistema que alcançou grande popularidade para realizar uma animação de elementos bastante fluida e espetacular foi a tecnologia Flash e dep ois a acompanharam alguns outros sistemas como Silverlight. sobretudo em Firefox e Internet Explorer que são os mais utilizados. o que pode resultar muito mais agradável e ao alcance dos desenvolvedores menos técnicos. devido ao pouco suporte que existe atualmente para esta utilidade. com CSS 3 vem uma nova forma de realizar animações totalmente nova que resultará muito mais simples do que o uso que conhecemos com Javascript. assim como os requisitos de conhecimentos de desenvolvedor par a poder incorporá-las. uma das vantagens é que podemos esquecer de Flash s e quisermos fazer dinamismos espetaculares em nossa web. Isto não fica por aí. CSS 3: http://www. como podem ser rotações. A compatibilidade é dada pelo uso de um sistema aberto e regulado pelo W3C. ampliações e reduções do tamanho vetoriais. assim c omo o Javascript que também permite fazer animações à base de mudar atributos CSS de man eira progressiva ao longo de um tempo.com/css3/ © Os manuais de CriarWeb.Manuais e recursos para desenvolvimento web www. o p opular jQuery permite animações simples mas que se fazem em questão de segundos. Além disso. Nota: Esta novidade pode resultar realmente interessante mas devemos dizer que à h ora de fechar este artigo não funcionava em todos os navegadores. O resto está trabalhando duro para im plementá-lo e esperamos que dentro de pouco tempo possam ser vistos em todos os na vegadores.com têm copyright dos autores. Porém. 22 .criarweb. Tudo isto sem entrar no tema da acessibilidade. Também se podem realizar animações CSS com Javascript inclusive com frameworks especializad os nesta área como as bibliotecas jsAnim. Colocar Flash de lado. que em Flash é uma verdadeira chateação. Nota: Falando de Javascript e embora fique fora do que vamos tratar neste artigo . limitar sua compatibilidade entre diferentes tipos de usuári os e plataformas. Bem. co mo deixamos entrever. o mais impor tante é que suporta muitos outros tipos de animação que até agora estavam reservados a t ecnologias como Flash. ao usar uma linguagem que já resulta familiar para o des envolvedor. implica não termos que nos preocupar com o posicionamento da página que tan ta dor de cabeça traz quando nossa web está criada inteiramente em Flash. O certo é que a maior que se poderia destacar é apenas circunstancial.criarweb. Inconvenientes das animações CSS Como tudo na vida. já que também se implementaram certas interações com o usuário e q e se conseguem unicamente com CSS 3. Não reproduzir sem autorização. etc. também existem algumas desvantagens ao trabalhar com animações em C SS. Por exemplo. Temos dois principais inconvenientes. Só admitem as anim ações CSS os navegadores Safari e Google Chrome. Vantagens das animações CSS 3 As animações CSS permitem fazer muitas das coisas que antes tínhamos reservadas só para uso de tecnologias suplementares. E a facili dade de desenvolvimento porque só trabalharemos em nossos sites com a linguagem CS S e não existirá a necessidade de dominar outras linguagens de programação como aconteci a com Flash.com tanto se utilizaram a principio e que agora estão praticamente esquecidos. Porém. que não faziam mais que incrementar a dificuldad e do desenvolvimento. tudo sem ter que programar. as vantagens mais importantes seriam a compatibilidade e a facilidade de implementação. Portanto. ademais. ao que todos os navegadores mais cedo ou mais tarde se adaptarão. existem alguns frameworks interessantes que permitem desenvolver animações de uma maneira bastante mais simples do que seria se não os utilizássemos. Não reproduzir sem autorização. o qual nos mostra um pouco a teoria sobre este tema e nos dá os princípios básicos para poder realizar animações com CSS 3. mas não maior do que a que encontraríamos se tivéssemos que uti lizar outras linguagens ou tecnologias diferentes de CSS.Manuais e recursos para desenvolvimento web www.com/css3/ © Os manuais de CriarWeb. Também podemos encontrar alguma dificulda de na hora da programação. como são Safari ou Google Chrome (sempre em sua versão mais atualizada). mas ainda falta um longo caminho por percorrer). 23 .Tradução de Celeste Veiga CSS 3: http://www. Finalmente. deveremos utilizar navegadores baseados em Webkit.com Até o fechamento deste artigo as animações CSS não eram admitidas pelos principais naveg adores (Nenhuma utilidade para animação 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 . tornamos a ressaltar que.criarweb. começaremos a ver como se re lizam no seguinte artigo. devido à impossibilidade de ver os resultados em todos os clientes web.criarweb. Artigo por Sara Alva rez Langa . pelo menos no momento. Sem muito m ais que acrescentar à nossa pequena introdução às animações CSS. Consume bastantes r ecursos de máquina para produzir as animações.com têm copyright dos autores.