Após o “Bum!” dos padrões W3C para a web, tudo relacionado à CSS e XHTML sofreu uma enorme mudança. Antes, CSS era um lado obscuro, utilizado por poucos Coders e desconhecido pelos novatos. Cursinhos de Webdesign e apostilas de HTML citavam no máximo 2 vezes o CSS e não faziam questão de ensiná-lo. Hoje tudo mudou e até imagens se podem criar utilizando apenas o CSS.  E é isso que vamos abordar neste post.

 

 

Dar o website um estilo, uma formatação, não é algo que surgiu recentemente. Por volta dos anos 70 já se comentava algo sobre padrões, quando iniciou-se a tragetória do SGML. É daí que surgiram suas derivantes, o HTML e o XML e, posteriormente, o XHTML, RSS, XML-RPC e o SOAP.

 

Então o HTML foi se popularizando, mas seu foco não era a formatação de website. Sua linguagem foi se tornado complexa e foi-se surgindo a necessidade de um padrão de formatação, também porque os brownsers interpretavam o HTML cada um da sua forma. Era horrível programar nesta  época. Você tinha que escolher o brownser que deveria ser priorizado, e construir o código para ele. Então, provavelmente, usuários de outros navegadores não conseguiriam visualizar corretamente o website. Essa situação melhorou depois da criação do CSS por Hakon Wium Lie, no ano de 1994. Foi em 1995 que esta proposta foi aceita pelo W3C, que criou uma equipe liderada por Hakon e por Bert Bos. Em 1996 foi lançado o CSS 1 e em 1998 o CSS 2.  Hoje podemos programar em CSS 3, mas que ainda não foi totalmente formulada.  Quando acontecer o lançamento do CSS 3, teremos MUITAS facilidades, como, por exemplo, implementação de 2 backgrounds simultâneos e bordas arredondadas sem uso de imagem. E é aí que entra nosso assunto.

 

Com tantas facilidades, coisas que antes só podiamos fazer com FLASH ou imagens, agora fazemos com CSS e JS.

 

Belos exemplos, gerados nesta prória página (confira no código-fonte, procure por  <!–  CSS HOMER –> ou <!— CSS BUSH –>):

 

Homer em CSS

 

 

 

Bush em CSS:

 

Veja também a animação de uma garrafinha de coca-cola, utilizando CSS

 

Então criaram até mesmo um mini-aplicativo que transforma imagem em CSS. Este é o chamado jpeg2css, e funciona da seguinte forma:

 

1° Baixe o programa

2° Extraia em uma pasta qualquer

3° Copie uma imagem qualquer (preferência preto e branco e vetorial), cole na pasta e renomeie para imagem.jpg

4° Inicie o programa

5° Pronto! Ele irá criar automaticamente um arquivo HTML com a imagem em CSS

 

Meu exemplo:

 

BAIXE O PROGRAMA AQUI!

Fontes:

Uma breve história do CSS

Román Cortés and jpeg2css