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


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


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

2


•

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


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:

É 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



4


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/


5


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 ...


6


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:

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:

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/


7


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/


8


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
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



9


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/


10


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/


11


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



12


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/


13

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/


14


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/


15


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;



16


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:



17


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/


18


"-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.



19


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:

Css 3

Recommend Documents

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

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