Css 3

Manuais e recursos para desenvolvimento web www.criarweb.com

CSS 3

Autores do manual

Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Miguel Angel Alvarez Tradução de JML (9 capítulos)

Miguel Angel Alvarez Tradução de Celeste Veiga

(1 capítulo)

CSS 3: http://www.criarweb.com/css3/

Sara Alvarez Langa Tradução de Celeste Veiga

(2 capítulos)

© Os manuais de CriarWeb.com 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 incorpora 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. fundo. Não obstante, caberia dizer que CSS é uma linguagem para definir o estilo ou a aparência das páginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o conteúdo da forma, ao mesmo tempo que permite pe rmite 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údo 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. cobrir. As especificações anteriores da linguagens tinham muitas utilidades para aplicar estilos às webs, porém os desenvolvedores ainda continuam usando truques diversos para conseguir efeitos tão comuns ou tão desejados como as bordas arredondadas ou a sombra de elementos na página. CSS 1 já significou um avance considerável na hora de desenhar páginas web, trazendo muito maior controle dos elementos da página. Porém, como ainda ficaram muitas coisas que os designers desejavam fazer, 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ágina para incorporar novas etiquetas HTML que permitam aplicar estilos de uma maneira 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 habitualmente, porém CSS 3 ainda avança um pouco mais na direção, de dar mais controle sobre os elementos da página. Sendo assim, a novidade mais importante que traz CSS 3, para os desenvolvedores 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 webs. Propriedades novas em CSS3

Segue aqui uma lista das principais propriedades propr iedades que são novidade em CSS3. Bordas •

•

•

•

border-color border-image border-radius box-shadow

Fundos •

•

•

background-origin background-clip background-size

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

2

Manuais e recursos para desenvolvimento web www.criarweb.com

•

fazer camadas com múltiplas imagens de fundo

Cor •

•

•

•

cores HSL cores HSLA cores RGBA Opacidade

Texto •

•

•

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 básico •

overflow-x, overflow-y

Outros •

•

•

•

media queries criação de múltiplas colunas de texto propriedades orientadas a discurso ou leitura automática de páginas web Web Fonts

Esta lista de novas propriedades de CSS3 foi tirado de: http://www.css3.info/preview/. É um site em inglês, mas pode ser bom visitar para ir conhecendo mais detalhes sobre CSS3. Em futuros artigos daremos algumas chaves e explicações sobre várias destas propriedades, pelo menos as mais interessantes, com especificações detalhadas, assim como exemplos que sirvam para ir conhecendo esta nova especificação de CSS.  Artigo por Miguel Angel Alvarez - 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, para completar a informação do artigo Introdução a CSS 3 , me deparei com um atributo para mudar a cor da CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

3

Manuais e recursos para desenvolvimento web www.criarweb.com

borda dos elementos da página, que nos permite definir a cor com uma sucessão de distintos valores de cores. Atualmente, com CSS podemos definir separadamente as cores da borda de um elemento, de cima, direita, abaixo e esquerda. Porém, não nos referimos a poder dar uma cor separada para cada parte da borda, e sim, a aplicar várias cores distintas a uma parte, por exemplo, à parte de cima da borda. Vi esta propriedade comentada em algum lugar como de CSS 3, porém segundo vejo no rascunho da especificação de CSS 3 para bordas e fundos, publicado pelo W3C, não aparece esta nova característica como parte do novo padrão. Por isso, temos que ressaltar que esta propriedade não é de CSS 3, e sim que se trata de um atributo não padrão de CSS, criado por Mozilla e que, portanto, se pode ver em seu navegador mais conhecido: Firefox. Dito de outra forma, é uma extensão de CSS realizada por Mozilla. Na página de Mozilla podemos encontrar mais informação sobre esta extensão de CSS: https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors Os atributos aos que nos referimos que 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-border-left-colors

Em cada um dos atributos se define a cor, podendo especificar uma lista de cores, separadas por espaços, que se aplicarão a cada uma das partes da borda, de dentro para fora. Claro que a borda tem que ter uma largura maior que 1 para que se vejam as distintas cores. Com uma largura de 2 pixel se poderão ver 2 cores diferentes, com uma largura de 3 poderemos definir 3 cores e assim sucessivamente. Para ver uma das possibilidades que daria o uso deste atributo podemos ver um exemplo em uma página à parte. (Porém, há que ter em conta que só se verá corretamente em Firefox). O código para criar esse gradiente de cores seria o seguinte: .coresborda{ border-style: solid; border-width: 10px; -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; }

É uma pena que seja um atributo unicamente desenvolvido por Mozilla, embora se o suporte a estes atributos se realizar por mais navegadores e se W3C tiver bem, talvez em algum momento se converta em um padrão de CSS. No momento não passa de uma mera curiosidade e possibilidade de personalização especial para os usuários de Firefox e outros navegadores baseados em Mozilla.  Artigo por Miguel Angel Alvarez - Tradução de JML

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

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. Agora se permitem bordas com as esquinas arredondadas, bordas com imagens (inclusive pode-se utilizar várias imagens para definir o aspecto da borda, sombras, etc. Neste artigo vamos explicar como realizar bordas arredondadas com CSS3. Temos a propriedade border-radius, que permite definir bordas arredondadas nas esquinas, especificando as medidas do radio que devem dar à curva das esquinas border-radius: 5px;

Definiria um radio de 5 pixels no arredondamento das esquinas do elemento. Até agora Mozilla adotou este atributo com um nome especial, que é válido para produtos como Firefox, enquanto que as especificações de CSS3 não tiverem alcançado o estado "Candidate Recommendation", que é quando se supõe que os diferentes navegadores devem implementálas. 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, porém esperemos que o pessoal de Microsoft possa implementar em breve no navegador, ou que as especificações de CSS3 passem rápido ao estado "Candidate Recommendation", que seria a chamada para que se implementem na generalidade dos navegadores. Por enquanto, para navegadores Mozilla, o atributo border-radius se utilizaria, por exemplo, assim: DIV { border: 1px solid #000000; -moz-border-radius: 7x; padding: 10px; }

Com isto conseguimos que todos os div tenham uma borda arredondada nas esquinas de radio de 7pixels. Podemos ver o exemplo em uma página a parte. Porém, há que lembrar que só se verá o efeito utilizando Firefox ou navegadores baseados em Mozilla. Contudo, o atributo border-radius tem outras possíveis configurações, na qual se podem definir os valores para o radio das quatro esquinas separadamente. Desta maneira: -moz-border-radius: 7px 27px 100px 0px;

Assim estaríamos definindo uma borda arredondada com radio de 7 pixel para a esquina superior esquerda, logo 27px para a esquina superior direita, de 100px para a inferior direita e 0px para a inferior esquerda. (Há que explicar que um border-radius de 0px é uma borda com esquina em ângulo reto) Podemos ver este ejemplo em uma página a parte. CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

5

Manuais e recursos para desenvolvimento web www.criarweb.com

As bordas arredondadas com CSS 3, como se poderá imaginar, só são vistas se tiver sido definida alguma borda visível ao elemento que as atribuímos, seja solid, dotted, etc. Isso é o que define as especificações de CSS3, embora no momento de escrever o artigo devo assinalar que inclusive Mozilla ou Firefox (o único que até agora suporta este atributo de CSS3) não funciona inteiramente corretamente com isto e só mostra as bordas arredondadas com solid. Outra coisa que definem as especificações de CSS e que por enquanto não está funcionando inteiramente bem, é que as imagens de fundo devem se ajustar às bordas arredondadas. Ocorre, até este momento, que as imagens de fundo saem por fora das bordas arredondadas. Confiamos em que no futuro isto possa ser revisado e otimizado, para que tudo funcione corretamente. Devemos lembrar que no momento de escrever o artigo ainda se têm que terminar de definir as especificações de CSS 3 e depois, os navegadores web deveram se atualizar em um certo espaço de tempo para suportá-las completamente. Nota: Oferecemos uma lista das características principais de CSS 3 no artigo Introdução a CSS3.

 Artigo por Miguel Angel Alvarez - 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. Isto devemos saber, visto que é algo básico das folhas de estilo em cascata (CSS). Porém, neste artigo de CriarWeb.com vamos mostrar como poderíamos conseguir que um elemento da web tivesse várias imagens de fundo ao mesmo tempo. Colocar várias imagens de fundo a um elemento à princípio não se pode com CSS, por isso mostraremos como fazê-lo com uma simples técnica alternativa. Mas também veremos que em SS 3 existe a possibilidade de configurar vários fundos ao mesmo tempo em um elemento, com uma declaração de background-image e sem a necessidade de realizar nenhum tipo de técnica alternativa. Referência: Para conhecer um pouco da recente especificação de CSS3 seria bom ler o artigo Introdução a

CSS 3.

Em CSS normal (CSS 1), como dissemos, podemos colocar um único fundo a um elemento da página. Isto é algo suportado por todos os navegadores. Como não podemos colocar mais de 1 fundo por elemento, para colocar vários fundos ao mesmo tempo, temos que utilizar vários elementos. A cada elemento lhe colocaremos um único fundo, porém ao se mostrar os elementos no mesmo espaço, conseguiremos o efeito desejado de ter vários fundos de imagem ao mesmo tempo. Em nosso caso, vamos utilizar várias camadas DIV aninhadas e cada uma terá seu fundo de imagem. O código HTML que utilizaríamos para aninhar várias camadas DIV seria como segue: conteúdo do elemento que vai ter 3 fundos de imagem distintos ... CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

6

Manuais e recursos para desenvolvimento web www.criarweb.com

Como se pode ver, podemos aninhar camadas DIV e cada uma terá um identificador, ou se preferirmos uma classe, para atribuir estilos por CSS. Ao estar aninhados, todos os elementos DIV se mostrarão um em cima do outro. Agora vejamos o código CSS para lhe dar fundos a cada um destes elementos DIV: #fundo1{ background-image: url(fundo1.gif); width: 300px; } #fundo2{ background-image: url(fundo2.png); background-repeat: no-repeat; background-position: bottom right; } #fundo3{ background-image: url(fundo3.png); background-repeat: no-repeat; background-position: center; }

Os fundos irão se sobrepor uns aos outros, sendo o fondo1 o que será visto mais abaixo e o fundo3 o que se verá mais acima. O resultado deste exemplo se pode ver em uma página à parte. À princípio todos os navegadores visualizarão perfeitamente os fundos, porém como utilizei imagens transparentes em formato PNG e Internet Explorer 6 tem problemas com a transparência dos arquivos PNG, podemos encontrar algum defeito, mas os fundos dos elementos DIV se verão.

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. O que antes vimos que é possível, criando vários elementos aninhados e colocando um fundo em cada um, se pode fazer em CSS 3 com um só elemento, ao que aplicaremos vários fundos distintos. O HTML do exemplo de várias imagens de fundo seria o seguinte: texto de um único elemento ...

Agora vejamos o CSS 3 válido para este exemplo: #fundos{ background: url(fundo3.png) bottom right no-repeat, url(fondo2.png) center no-repeat, url(fundo1.gif) center repeat; width: 300px; }

Só cabe comentar que as diferentes imagens de fundo se têm que escrever na declaração CSS separadas por vírgulas. Ademais, as imagens que declaramos se vão colocando de modo que a CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

7

Manuais e recursos para desenvolvimento web www.criarweb.com

primeira aparece sobre as seguintes. Sendo assim, nesta declaração, fundo1.gif, que está colocada como último fundo, é a que aparece atrás de tudo. De momento, a possibilidade de incluir vários fundos de imagem a um elemento só está disponível no navegador Safari, porém esperemos que em breve outros navegadores vão incorporando esta funcionalidade de CSS 3. Este exemplo se pode ver em uma página à parte.  Artigo por Miguel Angel Alvarez - Tradução de JML

Cores RGBA em CSS 3 Como sabemos, as cores em HTML se expressam em valores RGB, igual que em CSS, que admite diversas notações para definir a cor, através de números em hexadecimal e inclusive em decimal. Tudo isto supomos que não será um mistério para os leitores, que sem dúvida já terão experimentado com CSS e provavelmente estejam familiarizados com as distintas notações para especificar cor nas folhas de estilo. Agora queremos falar de uma nova notação, que não é simplesmente uma maneira nova de expressar o mesmo, e sim uma maneira que nos permite definir cores por meio de valores adicionais. Trata-se da notação RGBA, que a partir de CSS 3 está disponível para os desenvolvedores. A notação RGBA é uma maneira de especificar cores na qual se definem quatro valores. Os três primeiros são os bem conhecidos canais RGB (vermelho, verde e azul) e o quarto parâmetro é o canal Alpha, que não é mais que o grau de transparência ou opacidade da cor. O canal Alpha é um valor entre zero e um, sendo 0 totalmente transparente e 1 totalmente opaco. No mundo do desenho talvez já tenhamos visto outros formatos ou sistemas que suportam cores com canal Alpha e por isso pode ser que já estejamos familiarizados com este parâmetro. O formato de imagem PNG, que tanto nos gosta por suportar transparência que se vê corretamente em todos os fundos possíveis, implementa justamente este canal alpha na definição da cor para conseguir uma transparência ideal. Agora, por meio das cores em RGBA em CSS 3, poderemos aplicar novas transparências às cores que especificamos com CSS, abrindo novas possibilidades aos designers sem a necessidade de se complicar com pequenos truques como o uso de imagens de fundo semitransparentes em PNG, etc. Ademais, como as cores RGBA se podem aplicar a qualquer elemento que suporte atribuição de cor, as aplicações aumentam ainda mais. O único porém, pelo menos no momento de escrever este artigo, é que CSS 3 não está amplamente suportado por todos os navegadores. Por exemplo, Internet Explorer 8 não o suporta por enquanto. Nota: Em CriarWeb.com publicamos vários artigos sobre CSS 3, que se podem acessar através do seguinte

link: introdução a CSS3.

Notação de cor RGBA Para definir uma cor RGBA, se devem especificar quatro valores, da seguinte maneira: rgba(255, 125, 0, 0.5); CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

8

Manuais e recursos para desenvolvimento web www.criarweb.com

Os três primeiros valores são números em sistema decimal, que correspondem com os valores de vermelho, verde e azul. Sempre têm que ser números entre 0 e 255. O quarto valor é um número entre 0 e 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparência ao 50%, ou seja, metade opaco e metade transparente.

Exemplos de estilos CSS com cores definidos por RGBA Agora vejamos vários exemplos de cores definidos com CSS e a notação RGBA. Esta camada tem fundo azul, quase transparente Este texto é verde e tem um pouco de transparência

Porém, à parte destes exemplos, o ideal é ver o efeito de transparência em funcionamento, para poder termos uma idéia mais aproximada das possibilidades. Para isso, construímos uma página onde se mostram várias camadas com cores e transparências, tanto no fundo como no texto. Ver exemplo de cores CSS RGBA. Porém, novamente chamamos a atenção dos leitores sobre o fato que, dependendo do navegador que se utilize, se verão ou não as distintas cores, visto que as CSS 3 não são compatíveis com todos os sistemas. Este exemplo funcionará bem em navegadores que cumpram os padrões, como Firefox, Chrome ou Safari, porém não em navegadores como Internet Explorer, que fazem a guerra por sua conta. O código do anterior exemplo é o seguinte: Cores RGBA com CSS 3 div.quadrado{ width: 150px; height: 40px; border: 1px solid #dddddd; margin: 5px; } div.textogrande{ font-family: verdana, arial, helvetica; font-weight: bold; font-size: 40pt; } Cores RGBA com CSS 3 Exemplo de camadas com fundo azul e várias transparências Exemplo de camadas com fundo verde e várias transparências, sobre uma camada com fundo amarelo CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

9

Manuais e recursos para desenvolvimento web www.criarweb.com Exemplo de camadas com fundo laranja e várias transparências, sobre uma camada com uma imagem de fundo Exemplo de texto de cor vermelha e várias transparências, sobre uma camada com uma imagem de fundo Este texto está para que se veja que pode ser também meio transparente Este texto está para que se veja que pode ser também meio transparente

Se se permite minha opinião, é uma pena que esta gestão de cor com canal alpha não esteja disponível em Internet Explorer 8, no momento de escrever estas linhas, porque assim se torna complicado usar este tipo de efeitos. Não obstante, é de supor que as pessoas de Microsoft colocaram em dia seu navegador em algum momento, para torná-lo compatível com as CSS 3 e as cores RGBA.  Artigo por Miguel Angel Alvarez - 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 vamos ver uma propriedade interessante que servirá para que certas palavras que são longas demais e não cabem na largura de uma caixa. Como devemos saber, no modelo de caixa dos navegadores, as palavras se vão colocando em linhas para ocupar toda a largura disponível na caixa. Pode surgir um problema quando temos uma palavra muito longa, que não cabe na largura disponível do container onde se colocou. Então o que ocorre é que a palavra aparece por fora da caixa, ou inclusive pode ocorrer que a caixa se deforme de tamanho, fazendo que o elemento container amplie a largura o suficiente para que fique a palavra. Em qualquer caso, o efeito resultante costuma ser pouco agradável, porque muitas vezes nos desenquadra nosso desenho e faz com que as fiquem mal construídas. Para evitar este efeito, em CSS 3 se incluiu um atributo chamado word-wrap que serve para especificar que as palavras que sejam longas demais se devem cortar, de maneira que caibam na largura disponível da caixa. Uma propriedade muito útil que com certeza rapidamente começará a se utilizar habitualmente. Temos de agradecer a Microsoft a incorporação desta nova propriedade de CSS 3, já que o atributo word-wrap começou sendo uma etiqueta não padrão de CSS, que estava disponível em Internet Explorer e devido a sua utilidade, o W3C se decidiu a incorporar à nova especificação deste linguagem de estilo. CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

10

Manuais e recursos para desenvolvimento web www.criarweb.com

O atributo word-wrap tem dois possível valores: normal ou break-word. word-wrap: normal;

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

Com este outro valor de word-wrap: break-word, o que conseguimos é que a palavra se recorte, para caber na largura que havíamos definido. Este atributo por agora é suportado por Internet Explorer, Safari e Google Chrome. Firefox parece que a incluirá a partir de sua versão 3.1, que não foi lançada ainda no momento de escrever este artigo de CriarWeb.com. Agora vejamos uma caixa onde colocamos o atributo para que recorte as palavras: Esta outra camada tem o atributo word-wrap: break-word e portanto vai recortar a seguinte palavra para que fique bem na caixa: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Agora a camada não se vê afetada por uma palavra tão longa.  Artigo por Miguel Angel Alvarez - 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ática de textos em colunas, que se encontrarão disponíveis quando CSS 3 se implemente finalmente nos navegadores. Embora tudo isto não passe de um estado experimental, o certo é que já podemos começar a prová-lo e utilizar em navegadores modernos, como muitas das novas possibilidades que estamos comentando sobre CSS 3 Numerosas publicações constroem o texto em diversas colunas, como critério de desenho e para facilitar a leitura. Poderíamos imaginar o texto dos jornais se não se encontrasse dividido em diversas colunas, não seria quase impossível seguir as linhas para fazer uma leitura cômoda da informação se tudo estivesse em uma única coluna? Este problema não o encontramos geralmente nas páginas web, porque o texto que cabe no corpo da página não é tão grande como o que caberia em uma folha de um diário. Ademais, geralmente a própria página já se encontra dividida em diversas colunas. Não obstante, mesmo que quiséssemos, com as características de CSS 2 não seria muito fácil fazer um texto fluído que se adaptasse automaticamente em colunas, de modo que estas crescerão homogeneamente à medida que o texto cresce ou se reduz. CSS 3 soluciona este problema, ou melhor, oferecerá uma solução ao mesmo, simples e automática. Para criar uma estrutura multi-coluna utilizaremos vários atributos, que servirão para CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

11

Manuais e recursos para desenvolvimento web www.criarweb.com

modelizar as colunas: • • •

colum-width: servirá para definir a largura das distintas colunas a criar. column-gap: nos permitirá definir o espaço em branco entre colunas. column-rule: servirá para criar um filete ou linha divisória entre as colunas.

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

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

Especificar o número de colunas é talvez mais cômodo, porém em páginas fluídas pode funcionar pior, porque não se sabe com certeza que largura vai ter o lugar onde se mostram os textos e portanto, algumas vezes podem ficar colunas muito largas e outras muito estreitas. Podemos ver uma página à parte com os exemplos mostrados de construção em múltiplas colunas. Porém, lembre que só funcionará em Mozilla Firefox, Apple Safári e Google Chrome. O sistema de múltiplas colunas se encontra em fase beta e faz parte de um módulo à parte dentro das especificações de CSS 3. Se se deseja encontrar mais informação sobre o tema na W3C se pode consultar a URL http://www.w3.org/TR/css3-multicol/ Esperamos que estas características de CSS 3 se encontrem rapidamente disponíveis, pois não cabe dúvida que a distribuição por colunas nos abrirá novas e interessantes possibilidades para a construção de textos em páginas web.  Artigo por Miguel Angel Alvarez - Tradução de JML

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

12

Manuais e recursos para desenvolvimento web www.criarweb.com

Bordas com imagens em CSS 3 Vamos falar rapidamente sobre um dos novos atributos das CSS 3, que serve para personalizar as bordas dos elementos HTML com imagens. Publicamos este artigo dentro do Manual de CSS 3, que é uma espécie de compêndio de exemplos e técnicas que nos permitirá aplicar esta nova especificação das Folhas de Estilo em Cascata. De maneira resumida, border-image é um atributo que nos ajudará a aplicar novos estilos às caixas com CSS, através da utilização de imagens nas bordas dos elementos, inclusive podendo escolher várias imagens para várias das partes das bordas. Colocar imagens nas bordas é uma tarefa que já se costuma realizar no webdesign, e para isso, costuma-se utilizar complementarmente técnicas com as linguagens HTML e CSS. Ou seja, no momento de escrever este artigo, para que um elemento da página, como pode ser uma divisão ou uma tabela, parágrafo, etc., tenha uma borda a partir de uma imagem, se necessita colocar algum código HTML adicional, com algum container que nos permita logo definir estilos CSS para "imitar" essa borda de imagem. De qualquer forma, estejamos ou não familiarizados com as técnicas de uso de imagens nas bordas, o importante é que com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos atributos aos elementos que desejarmos.

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

Exemplo de border-image Sendo assim, para que sirva unicamente a modo de demonstração que é tudo o que se pode fazer até o momento neste artigo de CriarWeb.com, vamos dar um simples exemplo sobre o que permite atualmente os navegadores Safari e Firefox sobre border-image. Por exemplo, teríamos este elemento HTML: CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

13

Manuais e recursos para desenvolvimento web www.criarweb.com Vou colocar uma borda acima

E agora poderíamos aplicar estilos para criar uma borda na imagem: #camadaborda{ -moz-border-image: url(sello.png) 2 2 2 2 stretch stretch; -webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch; padding:20px; width: 100px; }

Como se pode ver, os atributos para bordas de imagens não têm o nome definitivo, que será border-image, e sim uns próprios para cada um dos navegadores que implementam esta nova característica de CSS 3. O atributo -moz-border-image é para o navegador Firefox e outros produtos da companhia Mozilla e o atributo -webkit-border-image é para qualquer navegador baseado em WebKit, como Safari ou Chrome. A imagem que estamos utilizando como borda é a seguinte:

E o exemplo se pode ver em andamento em uma página à parte, porém lembre-se que dependendo do seu navegador poderá ver ou não 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 vértices de um elemento HTML. Talvez convém esperar um pouco antes de dar umas explicações concisas e exemplos sobre este e outros atributos, visto que mudaram bastante ultimamente. Entretanto, segundo a última especificação de CSS 3, temos os seguintes atributos: border-image-source: Para indicar a URL da imagem que vamos utilizar como borde. border-image-slice: Indica o espaço da imagem que será visível como borda, nos quatro

lados do elemento, ou seja, top, right, bottom e left. border-image-width: Para indicar a largura da borda.

border-image-outset: Serve para indicar a área na que a imagem de borda se estende mais

da área do elemento, nos 4 lados da mesma.

border-image-repeat: Permite marcar se se deseja ou não que se repita a imagem da borda

fazendo um mosaico ou se se deseja que se estique, etc.

border-image: Utiliza-se como uma maneira resumida de especificar vários atributos de

borda com imagens ao mesmo tempo.

Explicar com exemplos cada um destes atributos seria sem dúvida interessante, porém nos levaria vários artigos e ademais, vale a pena fazê-lo quando já estejam disponíveis como especificação definitiva de CSS 3 e não em um simples rascunho, assim como quando estejam implementados nos navegadores. CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

14

Manuais e recursos para desenvolvimento web www.criarweb.com

 Artigo por Miguel Angel Alvarez - Tradução de JML

Sombras em CSS 3 com box-shadow CSS 3 supõe uma nova revolução no web design, trazendo soluções a muitas das práticas que os designers utilizam para decorar as páginas web. Isto quer dizer que, muitas das coisas que antes fazíamos com técnicas de design que requeriam uso de imagens, como as sombras ou as esquinas arredondadas, a partir de agora vamos poder especificá-las simplesmente através de CSS. Como vimos no artigo introdução a CSS 3, Não cabe dúvida que significará um grande avance para as pessoas que se dedicam a desenvolver webs, que nos permitirá poupar tempo e sobretudo, economizar código fonte, o que tornará as páginas mais leves e separará ainda mais o conteúdo da forma. Ao longo do Manual de CSS 3 já vimos vários atributos novos de bastante importância e variedade e agora é a vez do box-shadow, o atributo de CSS3 que nos permitirá definir sombras aos elementos da página.

 Atributo box-shadow  O atributo box-shadow requer vários valores para especificar as características da sombra, como esfumaçado, separação da sombra e a própria caixa ou cor. A sintaxe é como esta: box-shadow: 5px -9px 3px #000;

Por ordem de aparecimento, os valores que se indicam em box-shadow são: Deslocamento horizontal da sombra: A sombra de um elemento costuma estar um pouco

deslocada com respeito ao elemento que a produz e sua posição será em função do ângulo com o qual chegue a luz. No caso deste exemplo, o primeiro dos valores, 5px, quer dizer que a sombra aparecerá 5 pixels à direita. Se quisermos que a sombra apareça um pouco à esquerda do elemento original que a produz, colocaríamos um valor negativo a este atributo. Quanto mais deslocamento tiver uma sombra, o elemento que a produz parecerá que está mais separado da tela da 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. Este valor é similar ao deslocamento horizontal. Valores positivos indicam que a sombra aparecerá abaixo do elemento e valores negativos farão com que a sombra apareça deslocada um pouco para cima. No caso do anterior exemplo, com -9px estamos indicando que a sombra aparecerá deslocada 9 pixels para cima do elemento. Esfumaçado: O terceiro valor indica quanto queremos que esteja esfumaçada a borda da sombra. Se o esfumaçado fosse zero, quer dizer que a sombra não tem nenhum esfumaçado e aparece totalmente definida. Se o valor for maior que zero, como em nosso exemplo 3px, quer dizer que a sombra terá um esfumaçado dessa largura, 3 pixels no exemplo. Cor da sombra: O último atributo que se indica no atributo box-shadow é a cor da sombra. Geralmente as sombras no mundo real têm uma cor preta ou cinza, porém com CSS3 poderemos indicar qualquer gama de cor para fazer a sombra, o que nos dará bastante mais versatilidade aos desenhos graças à possível utilização de sombras em distintas cores, que possam combinar melhor com nossa paleta. No exemplo anterior havíamos indicado uma CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

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 estão em fase de especificação, embora já se encontrem muito avançadas e os navegadores mais modernos já começaram a implementá-las. Não obstante, o W3C ainda não liberaram as especificações desta versão das Folhas de Estilo em Cascata e até que comece a recomendar sua implementação os clientes web não têm porque entendê-las. Por enquanto, podemos utilizar box-shadow nas versões mais modernas do navegador Opera. Por sua parte, navegadores baseados em Mozilla e WebKit têm suporte a esta funcionalidade de CSS3, porém, através de uns atributos CSS com uma ligeira variação em seu nome. Atributo box-shadow para navegadores baseados em Mozilla, como Firefox: De maneira temporária, Firefox é capaz de interpretar o atributo -moz-box-shadow, por exemplo: -moz-box-shadow: 1px 1px 0px #090;

Atributo box-shadow para navegadores baseados em WebKit, como Safari ou Google Chrome: Nesses momentos e de maneira temporária, 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 máximo a compatibilidade com boxshadow, necessitaríamos indicar tanto o próprio 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 versões atuais de Firefox, Safari, Chrome, etc.

Exemplos de Sombras CSS3 Agora vejamos vários exemplos de sombras criadas diretamente com CSS 3 e o atributo boxshadow, com suas variantes para compatibilidade temporária nos navegadores Mozilla ou WebKit. #caixasombra{ background-color: #ddd; width: 300px; padding: 10px;

}

box-shadow: 5px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #333;

Isto criaria uma camada com um cinza claro como cor de fundo e uma sombra deslocada para baixo e à direita em 5 pixels e sem esfumaçado. Ademais, definimos uma cor de sombra cinza escuro para o elemento. #sombraclara{ width: 200px; padding: 10px; background-color: #999; color: #fff;

}

box-shadow: 2px 2px 2px #ffc; -webkit-box-shadow: 2px 2px 2px #ffc; -moz-box-shadow: 2px 2px 2px #ffc;

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

16

Manuais e recursos para desenvolvimento web www.criarweb.com

Este outro exemplo é para uma sombra um pouco menor, também deslocada para baixo e à direita e com um esfumaçado de 2 pixels. Ademais, indicamos uma cor amarela clara para a sombra, e para vê-la bem, teríamos que colocar este elemento sobre um fundo escuro. #sombrarredondada{ background-color: #090; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px;

}

box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000;

Neste terceiro exemplo, temos um caso curioso de sombra, pois está aplicada sobre um elemento que tem as esquinas arredondadas com CSS 3. Sendo assim, a sombra também deve ter as sombras arredondadas, para se ajustar ao elemento que a produz. Ambos navegadores com compatibilidade a sombras e CSS 3 funcionam corretamente com sombras e bordas arredondadas. Para acabar, colocamos um link a uma página onde você pode ver os exemplos de sombras em CSS 3. Tenha em conta que você deverá provar estes exemplos com Opera, Firefox, Safari ou Chrome, que são os que atualmente suportam este atributo.  Artigo por Miguel Angel Alvarez - 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 disso, com alguns atributos como background-position ou background-repeat, podemos definir coisas como transferir a posição da imagem de fundo para outro lugar ou formar um mosaico. Essas propriedades são bastante utilizadas no desenho de páginas web e talvez já as dominemos. Agora , com CSS 3 temos a possibilidade de especificar novos estilos ou modos de comportamento das imagens. Neste artigo exploraremos o novo atributo background-origin, que faz parte da nova especificação de Folhas de Estilo em Cascata. Veremos também exemplos de como utilizar este atributo, dentro das explicações 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 espaço desse elemento. Por padrão, uma imagem de fundo aparece como um mosaico, repetindo a imagem ao longo de todo o espaço desse elemento. Porém, para colocar essa imagem o navegador utiliza uma origem de coordenadas, que veremos mais facilmente se fizermos com que a imagem não se repita, ou seja, que não se faça um mosaico no fundo. Observar o exemplo da seguinte imagem:

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

17

Manuais e recursos para desenvolvimento web www.criarweb.com

Colocou-se uma imagem de fundo para esse elemento, mas a imagem não se repete. Pode-se ver o amarelo do fundo da cor atribuída ao elemento e a imagem de fundo em azul. Agora vejamos onde começa a imagem. Veremos que está colocada dentro do elemento, dentro do corpo e sem levar em conta a borda. Sabemos que com background-position poderíamos mudar essa posição, mas em CSS 3 existe o atributo background-origin que também nos servirá para transferir essa imagem, porém de outra maneira. Com background-origin podemos definir a origem de coordenadas sobre a qual vai ser colocada a imagem de fundo, para que seja a borda do elemento, seu padding ou seu conteúdo. Vejamos seus possíveis valores com uma explicação: border-box:

Este valor significa que a origem de coordenadas da imagem será a borda do elemento. Neste caso estamos indicando que a imagem comece onde começa a borda do elemento, caso tenha borda. background-origin: border-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. Quando indicamos background-origin: padding; queremos que o eixo de coordenadas onde se vai colocar a imagem seja o espaço destinado ao elemento, incluindo seu possível padding e sem contar a possível borda. background-origin: padding-box;

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 conteúdo do elemento, ou seja, sem levar em conta suas possíveis bordas e padding. background-origin: content-box;

Para termos uma ideia mais clara sobre os distintos valores de background-origin fizemos um exemplo, mas é necessário ser visto com navegadores compatíveis com CSS (em seguida explicamos isso). Ver um exemplo funcionando em uma página à 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 não haviam implementado todas as novas características das CSS. Na maioria de casos estão apenas sendo testadas, até que as especificações de CSS 3 sejam recomendadas para sua implementação. Por isso, os navegadores que começaram a suportar as CSS utilizam alguns prefixos para os nomes das propriedades. Em Mozilla Firefox devemos utilizar o atributo -moz-backgroundorigin, em navegadores baseados em webkit (como Chrome ou Safari) deve-se utilizar o atributo -webkit-background-origin. Além disso, em navegadores baseados em webkit e Mozilla não se leva em conta a terminação CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

18

Manuais e recursos para desenvolvimento web www.criarweb.com

"-box" ao final dos valores dos atributos, razão pela qual há que eliminá-la. Por sua vez, em Opera já vem implementada a funcionalidade com o nome de atributo definitivo, e seus valores com a correspondente terminação "-box", que é como aparece na especificação atual do modelo de caixa de CSS 3. Este seria o código CSS para aplicar distintos valores de background-origin e que sejam entendidos por todos os navegadores mais modernos. Nota: O Internet Explorer 8, o mais atual dos navegadores de Microsoft no momento, as CSS 3 não estão

implementadas de nenhum modo, assim que não poderemos ver estes exemplos em funcionamento. #provasfundo1{ -moz-background-origin: border; -webkit-background-origin: border; background-origin: border-box; } #provasfundo2{ -moz-background-origin: padding; -webkit-background-origin: padding; background-origin: padding-box; } #provasfundo3{ -moz-background-origin: content; -webkit-background-origin: content; background-origin: content-box; }

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

Introdução a @font-face de CSS À hora de escolher uma fonte para usar em uma página web, tradicionalmente se encontrava a limitação de que o usuário tivesse esse tipo de letra instalada em seu computador, porque caso contrário, os textos apareceriam com outras tipografias, diferentes das que tínhamos escolhido. É por isso que o leque de fontes que podíamos utilizar, com a garantia de que funcionassem bem na maioria dos visitantes, estava bem reduzido às típicas Arial, Verdana, Times New Roman e pouco mais. Bem, na atualidade este problema já está solucionado e tudo graças à regra CSS @font-face. Esta regra nos permite definir em nossa folha de estilos qualquer tipo de tipografia, independentemente do usuário dispor dela ou não e para isso o único que deve nos preocupar é que esteja instalada em nosso servidor. No presente artigo explicaremos como se pode configurar nossa folha de estilos CSS para poder utilizar qualquer fonte que desejemos.

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

19

Manuais e recursos para desenvolvimento web www.criarweb.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. No principio só funcionava em IE 5 e admitia unicamente formatos de fonte .eot, porém com o passar do tempo outros navegadores ampliaram seu suporte, começando com Safari 3,1. Na atualidade admite outros tipos de formatos tipográficos como .ttf e.otf e funciona também com os navegadores Opera 10, Firefox 3,1 e, é claro, com todas as versões superiores aos navegadores já citados. Então, já nada nos impede de fazer uso desta @font-face, para poder utilizar qualquer fonte em nossa web, com a garantia de que se visualizará perfeitamente em todos os navegadores mais atuais. Sua sintaxe é a seguinte: @font-face{ font-family:; src: [,]*; [font-weight:]; [font-style:]; }

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

•

Firefox 3,6 suporta Opentype, Embedded Opentype e WOFF.

•

I.E. suporta Embedded Opentype

•

Opera suporta Truetype, Embedded Opentype e Opentype

•

Safari 3,1 suporta Truetype, Embedded Opentype e Opentype

•

Google Chrome suporta Truetype, Embedded e Opentype

Se desejamos trabalhar com fontes diferentes através de @font-face e nos preocupa a compatibilidade com todos os navegadores, comprovaremos que o mais aconselhável é 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 código de um exemplo com dois tipos de fontes, uma com formato .eot e outra com formato .otf. O primeiro é visualizado em todos os navegadores e no segundo IE toma outra letra por padrão já que não admite o formato .otf.

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

20

Manuais e recursos para desenvolvimento web www.criarweb.com

Código da folha de estilos: @font-face { font-family: Vivaldi; font-style: normal; font-weight: normal; src: url(VIVALDI0.eot); } @font-face{ font-family: "gothic"; font-style: normal; font-weight: normal; src: url(gothic.otf); } H1{ font-family: "gothic"; } H2{ font-family: "Vivaldi"; }

E em seguida o código HTML para ver o resultado: Prova com estilos de letra distintos Estamos provando a letra Gothic (não se verá em IE) Aqui a letra Vivaldi

Você pode ver o resultado em uma página à parte.  Artigo por Sara Alvarez Langa - Tradução de Celeste Veiga

Introdução às animações CSS Como todos provavelmente saibamos, até agora, as animações nas páginas web sempre tinham que ser feitas utilizando diversas tecnologias complementares, mais além do simples HTML ou CSS. O primeiro sistema que alcançou grande popularidade para realizar uma animação de elementos bastante fluida e espetacular foi a tecnologia Flash e depois a acompanharam alguns outros sistemas como Silverlight, de características similares. No entanto, tudo isto são tecnologias proprietárias, que requerem a instalação de um plugin para funcionar no navegador, o que impede que sejam universais, por mais aceitação que tenham chegado a ter. Paralelamente existem vários outros suportes para animação que sim fazem parte das tecnologias de criação de páginas web universais, mas que não chegam, nem de longe, às possibilidades de animação que poderíamos desejar. Referimos-nos aos GIF animados, que CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

21

Manuais e recursos para desenvolvimento web www.criarweb.com

tanto se utilizaram a principio e que agora estão praticamente esquecidos, assim como o Javascript que também permite fazer animações à base de mudar atributos CSS de maneira progressiva ao longo de um tempo. Nota: Falando de Javascript e embora fique fora do que vamos tratar neste artigo, existem alguns

frameworks interessantes que permitem desenvolver animações de uma maneira bastante mais simples do que seria se não os utilizássemos. Por exemplo, o popular jQuery permite animações simples mas que se fazem em questão de segundos. Também se podem realizar animações CSS com Javascript inclusive com frameworks especializados nesta área como as bibliotecas jsAnim.

Bem, 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. Porém, o mais importante é que suporta muitos outros tipos de animação que até agora estavam reservados a tecnologias como Flash, como podem ser rotações, ampliações e reduções do tamanho vetoriais, etc. Isto não fica por aí, já que também se implementaram certas interações com o usuário e que se conseguem unicamente com CSS 3. Além disso, tudo sem ter que programar, o que pode resultar muito mais agradável e ao alcance dos desenvolvedores menos técnicos. Nota: Esta novidade pode resultar realmente interessante mas devemos dizer que à hora de fechar este

artigo não funcionava em todos os navegadores. Só admitem as animações CSS os navegadores Safari e Google Chrome. O resto está trabalhando duro para implementá-lo e esperamos que dentro de pouco tempo possam ser vistos em todos os navegadores, sobretudo em Firefox e Internet Explorer que são os mais utilizados.

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, que não faziam mais que incrementar a dificuldade do desenvolvimento, limitar sua compatibilidade entre diferentes tipos de usuários e plataformas, assim como os requisitos de conhecimentos de desenvolvedor para poder incorporá-las. Portanto, uma das vantagens é que podemos esquecer de Flash se quisermos fazer dinamismos espetaculares em nossa web. Colocar Flash de lado, ademais, implica não termos que nos preocupar com o posicionamento da página que tanta dor de cabeça traz quando nossa web está criada inteiramente em Flash. Tudo isto sem entrar no tema da acessibilidade, que em Flash é uma verdadeira chateação. Porém, como deixamos entrever, as vantagens mais importantes seriam a compatibilidade e a facilidade de implementação, ao usar uma linguagem que já resulta familiar para o desenvolvedor. A compatibilidade é dada pelo uso de um sistema aberto e regulado pelo W3C, ao que todos os navegadores mais cedo ou mais tarde se adaptarão. E a facilidade de desenvolvimento porque só trabalharemos em nossos sites com a linguagem CSS e não existirá a necessidade de dominar outras linguagens de programação como acontecia com Flash.

 Inconvenientes das animações CSS  Como tudo na vida, também existem algumas desvantagens ao trabalhar com animações em CSS. O certo é que a maior que se poderia destacar é apenas circunstancial, devido ao pouco suporte que existe atualmente para esta utilidade. Temos dois principais inconvenientes.

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

22

Manuais e recursos para desenvolvimento web www.criarweb.com

Até o fechamento deste artigo as animações CSS não eram admitidas pelos principais navegadores (Nenhuma utilidade para animação com CSS 3 pode ser utilizada na Internet Explorer e em Firefox podemos ver que algumas coisas já funcionam embora de maneira incompleta , mas ainda falta um longo caminho por percorrer). Consume bastantes recursos de máquina para produzir as animações. Também podemos encontrar alguma dificuldade na hora da programação, mas não maior do que a que encontraríamos se tivéssemos que utilizar outras linguagens ou tecnologias diferentes de CSS. Finalmente, tornamos a ressaltar que, devido à impossibilidade de ver os resultados em todos os clientes web, pelo menos no momento, deveremos utilizar navegadores baseados em Webkit, como são Safari ou Google Chrome (sempre em sua versão mais atualizada). Sem muito mais que acrescentar à nossa pequena introdução às animações CSS, começaremos a ver como se realizam no seguinte artigo, 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.  Artigo por Sara Alvarez Langa - Tradução de Celeste Veiga

CSS 3: http://www.criarweb.com/css3/

© Os manuais de CriarWeb.com têm copyright dos autores. Não reproduzir sem autorização.

23