Page 57 - Locaweb - Edição 27

locaweb
(e a fonte) for carregado, será realizada a formatação a
fim de exibir corretamente a informação. Preste atenção
também em algumas restrições, como o fato de o
Internet Explorer 7 ou superior aceitar apenas fontes com
a extensão .eot. Já os navegadores Safari, Firefox, Chrome
e Opera rodam .ttf e .otf.
Contudo, existem conversores online de fontes para
auxiliar no trabalho. Não deixe de considerar ainda as
licenças das fontes, pois muitas distribuídas hoje em dia
gratuitamente devem ser, na verdade, devidamente pagas.
Efeito de sombra // Outro efeito interessante para
textos propiciado pelo CSS3 é a possibilidade de sombra. O
mecanismo é configurado pela propriedade text-shadow,
na qual devem ser
informados fatores como:
deslocamento da sombra
para a direita (valores negativos deslocam a sombra para
a esquerda); deslocamento para baixo (valores negativos
deslocam a sombra para cima); raio para desfoque da
sombra; e cor da fonte. Confira:
text-shadow: 2px -2px 10px #ffff333;
Caso queira inserir mais de uma sombra no texto,
basta separar as características por vírgula (,).
text-shadow: 2px -2px 10px #ffff333, 1px -3px #003366,
-1px -4px #9966cc;
Você pode
conseguir efeitos muito
interessantes, como o
velho truque do rastro
de fogo no texto, tão
ensinado em tutoriais de Photoshop. Para isso, basta fazer
uso de sobreposição de sombras.
Background das páginas // Outra prática comum
no processo de passagem do Photoshop ou Fireworks
para o HTML é o recorte de parte de uma imagem para
utilizar no efeito de repetição para o background das
páginas. O CSS3 tem o efeito de gradiente para fundos
de páginas e também a possibilidade de definir múltiplas
imagens para o fundo da página e como elas serão
dispostas. As propriedades responsáveis por isto são:
background:url(): permitirá o apontamento
da imagem, por meio de seu caminho relativo.
Pode-se usar mais de uma vez o url(caminho.ext)
dentro do background, contando que se configure
corretamente a disposição das imagens vias
repeats e size.
background-size: permitirá informar,
em porcentagem ou em pixels, qual o
tamanho ocupado pela imagem informada
no url() do background.
Isso reduz o trabalho com a ferramenta Slice (Fatia)
dos editores de imagens, uma vez que o fundo poderá ser
montado no CSS, e não com imagens projetadas para se
encaixar apenas de uma única maneira. O CSS3 dá mais
flexibilidade para você experimentar até encontrar a solução
mais adequada para a formatação de fundo de página.
Cores em HSL e HSLA // Mais uma novidade
para os que estão acostumados a criar o visual em um
editor de imagens preso às atuais restrições de cores dos
navegadores é que o CSS3 permite trabalhar com HSL e
HSLA, além de RGB.
No HSL, a cor é gerada a partir de tom (Hue),
saturação (Saturation) e luminosidade (Lightness). O valor
informado para o H deve variar de zero a 360, visto que ele
indicará a cor no círculo por meio do ângulo passado.
A aplicação do efeito de
sombra sobre textos
tornou-se mais fácil com o
auxílio da tecnologia CSS3
Até mesmo os designers mais
experientes têm questionado de
que forma o CSS3 irá interferir
no processo de diagramação de
páginas daqui para frente.
E o fato é que o desenvolvimento
de sites vai mudar sensivelmente
57