Um designer esperto apresenta grande quantidade de trabalho para seu cliente com os pés nas costas. Parece que passou horas trabalhando, mas, na verdade, apenas soube usar os comandos certos, da maneira certa e na hora certa.
Depois de ter feito todo o esforço pesado no Illustrator, por exemplo, ele pode usar os últimos recursos da versão 3 do CSS (Cascading Style Sheet) para exportar a “obra de arte” para várias plataformas e formatos.
A linguagem de estilo CSS permite isso, entre outras coisas. Ela é ótima para gerenciar a identidade visual de um blog, um site ou portal (quanto mais complexo o ambiente, maior a sua função e mais relevante sua utilização). No entanto, nem sempre o que é projetado para um determinado navegador fica bem em outro.
“Agora com o HTML 5 e CSS3 a briga entre os navegadores parece que tomou uma outra escala”, diz André Matos, diretor executivo da Lumis, fabricante de plataforma para desenvolvimento e gestão de portais web. “Isso leva a pensar novas formas de agradar ao público e também, no caso dos desenvolvedores, como aumentar a compatibilidade e os recursos disponíveis”.
Desafio
Sempre foi um desafio desenhar um site e ele aparecer com o mesmo jeitão em todos os browsers. A questão hoje se torna ainda mais desafiadora, uma vez que Chrome, Firefox, Safari, Opera e IE nem sempre caminham na mesma direção, quando o assunto é adotar novas linguagens e padrões.
O Internet Explorer, que já chegou a ter hegemonia absoluta ao longo dos seus 15 anos de história da internet, perdeu terreno para outros navegadores. Mas a versão 9, cujo beta foi lançado este mês, parece fazer a disputa mais acirrada. Somente em dois dias, foram feitos cerca de 2 milhões de downloads. O IE 9 traz novo processador de javascript, suporte a multi-touch, maior compatibilidadise com CSS3 e o suporte ao HTML 5.
“Algumas pesquisas informam que o IE9 é o navegador com maior compatibilidade ao CSS3 e deve ser o mais rápido dentre os novos navegadores”, aponta Luciano Kono, analista de negócio da Lumis, especialista em desenvolvimento de software web. De qualquer forma, o assunto é polêmico e há várias comunidades na web defendendo ponto de vistas diferentes.
O que se pode dizer, com garantia, é que o CSS3 e o HTML5 atuam como aliados para garantir recursos modernos aos designers e desenvolvedores de sites. Com a adoção paulatina desses padrões, a web ganhará uma “nova cara”, mais dinâmica, mais interativa e mais rápida.
|
O poder do CSS3 |
|
Novas funções que vão fazer a diversão de designers e internautas nas edições mais modernas dos browsers |
|
Opacity Habilita o controle da transparência de um objeto. Seu range varia de 0.0 a 1.0, onde o último significa que o objeto está completamente transparente. Esta propriedade está habilitada para todos os elementos.
Text-shadow Essa propriedade permite adicionar sombras em textos, configurando o tamanho da sombra para a esquerda e para o topo do texto, o enevoamento e sua cor.
Box-shadow Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos que suportam esta propriedade.
RGBA, HSL e HSLA Com o RGBA, é possível determinar a cor de um objeto e também a sua opacidade, utilizando a seguinte forma: backgound-color: RGBA(0, 255,0, 0.3), dessa forma, teremos um fundo totalmente verde com 30% de transparência. HSL – Hue Saturation Lightness, outra forma de se aplicar uma cor a um objeto, porém com esta opção é possível determinar a saturação e a intensidade de brilho: background-color: hsl(120, 100%,10%), dessa forma teremos um fundo verde com 100% de saturação e 10% de brilho. HSLA – Hue Saturation Lightness Alpha, mesma utilização do HSL, porém com a opção de se determinar a opacidade do objeto.
Column Com esta propriedade é possível aproveitar melhor a tela, dividindo ela em colunas sem a necessidade de artifícios com divs e tables. Algumas propriedades interessantes: column-count:define o número de colunas column-gap: cria um espaço entre as colunas (padding) column-rule: define a estilização da borda que ficará entre as colunas.
Multiple backgrounds Uma grande restrição das versões anteriores era a utilização de apenas uma imagem de fundo, a partir de agora será possível a utilização de quantas imagens forem necessárias, veja o exemplo: background: url(imagem.gif) no-repeat 0 0, url(imagem2.gif) no-repeat 200,100; Os números logo após a propriedade “no-repeat” é para o posicionamento da imagem.
Dentre as novidades do suporte ao CCS3, o border-radius talvez seja a mais notável, com ela você não precisa mais deixar somente quadradas às bordas de uma DIV ou qualquer outro objeto que suporte esta tag, com ela você poderá definir bordas arredondas e ainda por cima determinar a curvatura de cada borda.
OBS: Existem diversas outras opções como: box sizing, text stroke, rotation, reflection, transitions e resizing, porém o CSS3 ainda não deve ser usado definitivamente em suas páginas. |
Leia mais:
Especial linguagem de programação web
ð Você tem Twitter? Então, siga http://twitter.com/IT_Web e fique por dentro das principais notícias de TI e telecom.
