Gaiuss oBlog

Quem sabe criar layouts para sites, entende como o CSS (Cascading Style Sheets) é a melhor coisa do mundo!!! Lembro que eu passava horas copiando e colando aquelas tags <table><tr><td> pra poder montar um site certinho, quando existia o mundo Tableless… e eu não sabia disso!!! Criança boba inocente!!! Mas o tempo passou, o CSS tomou conta da minha vida (e do mundo) e evoluiu. O que antes já era ótimo, como pode ser visto aqui no Zen Garden (onde você pode mudar o layout, escolhendo um ali no menu, e o site se modifica de acordo com o CSS e não com o conteúdo), agora está melhor ainda com a chegada do CSS3!!

Aí você, que não entende muito do assunto, se pergunta: e o que isso tem de bom??? O que vai mudar na minha vida “internética”?

No momento penso em 3 coisas boas que vão melhorar sua vida internética:

1º – Você vai adorar os efeitos que o CSS3 oferece, mas por enquanto isso só pode ser visto em navegadores como Chrome, Safari, Opera e Firefox 4.0 em diante. Pooooortanto vocês, pessoas legais, sedentas por ver mais CSS3 legais, vão começar a usar esses navegadores e irão finalmente se livrar do maldito Internet Explorer!!! Que só serve para acabar com a vida de todos nós que ficamos 80% das horas trabalhadas tentando consertar o CSS no IE!

2º – Os sites ficarão mais leves, pois muitas animações em Flash poderão ser trocadas por puro CSS3 ou com ajudinha do nosso amigo Javascript. Afinal, quem nunca sofreu com sites em Flash, que demoram 400 anos pra abrir, porque sua internet não é banda larga ou porque a sua maldita provedora de internet te sacaneia, né?

3º – Já disse que dá pra fazer muita coisa legal né??? Hehehehe… Dá uma olhada abaixo, separei coisas bem maneiras…

Mas lembre-se: USE O NAVEGADOR CORRETO PARA VER AS COISAS LEGAIS ABAIXO!!!

Senão você ficará que nem bocó procurando coisas superlegais e só vai encontrar o que tá cansado de ver….

Meu primeiro contato com o CSS3 foi com esses efeitos, passe o mouse por cima.

• 
  NEW
  CSS3
  Starbursts!
• 
  NEW
  CSS3
  Starbursts!
• 
  NEW
  CSS3
  Starbursts!
• 
  NEW
  CSS3
  Starbursts!
• 
  NEW
  CSS3
  Starbursts!
• NEW CSS3
  Starbursts!
• NEW CSS3
  Starbursts!

Bom, não vou ficar aqui explicando como se faz cada coisa, mesmo porque admito que esse eu copiei!! Copiei desse maravilhoso site http://matthewjamestaylor.com/blog/css3-starbursts#, esse link já cai direto para esse exemplo das estrelinhas, e dê uma passeada por lá que tem bastante coisa maneira!

O próximo exemplo é um relógio feito só com CSS3 e Javascript…

Clique aqui para ver funcionando, porque isso aí em cima é só uma figura… dãããããhhhh…

O próximo não se trata de CSS3, é CSS normal (portanto você pode ver em qualquer navegador, menos no IE, porque eu não gosto dele) mas o cara super sinistro que fez essa imagem, usou técnicas 3D… só vendo para entender!! Clique na imagem abaixo para ir pro exemplo original:

Caso você queira aprender como faz essa loucura, clique aqui.

Gente, são muitos exemplos, o post ficaria enorme se eu explicar cada um, então vou mandar aqui uma lista de links que vocês podem visitar pra encontrar mais coisas legais:

http://www.paulrhayes.com/experiments/cube/index.html

http://www.smashingmagazine.com/2010/06/18/css3-design-contest-join-in-and-win-ssd-hard-drive/

http://www.smashingmagazine.com/2010/07/12/css3-design-contest-results/

http://www.romancortes.com/blog/pure-css3-page-flip-effect/

http://www.romancortes.com/blog/a-tribute-to-the-beatles/

http://www.romancortes.com/blog/pure-css-coke-can/

Esse daqui não é CSS, é Flash mesmo! Mas por mais que eu não goste, devo admitir que o efeito é ótimo: http://www.romancortes.com/ficheros/dancing-typography.html

Parabéns pro Matthew, Paul Hayes, Román Cortés e pra revista Smashing Magazine… quando eu crescer quero ser que nem vocês =D !