Caelum | Ensino e Inovação - Cursos de Java, Scrum, Ruby on Rails


CSS3 e o futuro da Web

Por Sérgio Lopes em 17/02/10

O mundo do desenvolvimento Web passa atualmente por grandes mudanças. Com as aplicações Web exigindo cada vez mais dos navegadores, uma verdadeira guerra está sendo travada no client-side da Web. O até então onipresente Adobe Flash vem recebendo críticas e mais críticas. Com suas próprias alternativas, Microsoft, Oracle e Google tentam entrar nesse mercado. E, ainda parecendo velhos e ultrapassados em comparação a tudo isso, estão HTML, CSS e JavaScript.

Mas, se depender dos novos HTML5 e CSS3, o cenário será bem diferente no futuro. Com o grande apelo de serem padrões abertos implementados nativamente nos navegadores, essas novas especificações prometem simplificar bastante o desenvolvimento de aplicações ricas no client-side sem o uso de plugins.

Só para falar do CSS3, assunto desse post, podemos citar entre suas novas capacidades de formatação visual, as queridas bordas redondas, o uso de sombras, múltiplos backgrounds, layouts multi-colunas, novos seletores, uso de fontes externas, transformações 2D e 3D e animações. São recursos que facilitam bastante a tarefa do WebDesigner ao criar interfaces ricas e bonitas.

Embora não seja tão recente assim – o CSS3 data de antes de 2001 -, o suporte nos navegadores ainda é bem precário. Firefox, Safari, Chrome e Opera lideram o movimento, mas ainda estão longe de implementar todos os recursos. O IE tem algumas poucas coisas implementadas em sua versão 8 e uma promessa dos desenvolvedores de melhorar um pouco mais na futura versão 9.

Para demonstrar o uso de alguns recursos do CSS3, recriamos o logotipo da Caelum inteiramente usando recursos do CSS3, como border-radius, pseudo-elementos :after e :before e @font-face. O HTML da página é simplesmente:

  <div class="caelum">
    <strong>Caelum</strong>
    <em>Ensino e Inovação</em>
  </div>

E, sem usar nenhuma imagem (nem JavaScript/canvas/SVG), desenhamos o logo da Caelum. Veja a demonstração usando alguma versão recente do Firefox (3.5+), Safari/Chrome ou Opera (10.50+) e veja também o código CSS. E, por ser tudo CSS, sem imagens, podemos mudar o tamanho do logo a vontade, como mostra esse outro exemplo.

CSS3, HTML5 e outros tópicos da “nova Web” são também assuntos do novo treinamento da Caelum, WD-43: Desenvolvimento Web com HTML, CSS e JavaScript. O CSS3 é peça importante no futuro da Web. Seus diversos recursos mudarão a forma como fazemos WebDesign.

  • Share/Bookmark

6 Comments »

  1. Salve, Ségio!

    Excelente post, estou trabalhando hoje em uma aplicação RIA data-centric e este assunto mais que me interessa. Para quem está no front, estar antenado nos novos padrões ajuda e muito a tomada de decisão. Na minha opinião, tanto o Flex quanto o Silverlight sofrerão com uma queda da sua fatia de mercado com toda a nova geração de frameworks RIA que surgirão baseados no HTML5 e CSS3. Aqueles que conseguirem se adaptar rapidamente, e neste grupo incluo o GWT, sobreviverão.

    Mais uma vez, parabéns!

    Comment by Fabio Oliveira — February 17, 2010 @ 9:23 pm

  2. Update: Algumas pessoas reportaram um possível bug no Firefox mesmo na versão 3.6 onde ele não mostra a estrela corretamente. Parece que o bug está relacionado a configuração de Unicode da máquina (a estrela é um caracter Unicode). Foram detectados já problemas tanto em Windows XP quanto no Snow Leopard.

    E aproveito pra adicionar alguns screenshots de cortesia do BrowserShots:

    http://browsershots.org/http://downloads.caelum.com.br/logo-caelum-css3/caelum-css3.html

    Comment by Sérgio Lopes — February 17, 2010 @ 11:44 pm

  3. Como o Sérgio comentou, no Firefox 3.5 do Snow Leopard não aparece a estrela. E no meu Safari 4.0.4 a meia lua branca está esquisita… na versão de vários tamanhos. Só deu certo a versão grandona… :-)

    Parabéns pelo post!

    Comment by Daniel Cukier — February 18, 2010 @ 12:49 pm

  4. pow legal o post sérgio, bem explicado! parabens!

    Comment by camilo lopes — February 23, 2010 @ 2:22 pm

  5. [...] o meu último post sobre CSS3, muita coisa tem acontecido no mundo dos browsers. A guerra que Steve Jobs começou contra o Adobe [...]

    Pingback by CSS3 e progressive enhancement | blog.caelum.com.br — May 6, 2010 @ 2:43 am

  6. [...] a utilização de diferentes bibliotecas de javascript ou o uso experimental de códigos HTML 5 e CSS 3. As tendências tipográficas como um todo são muito difíceis de prevermos, e por isso mantém-se [...]

    Pingback by Prévia de 2010 : Design | Nak — July 16, 2010 @ 5:58 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment




Caelum | Ensino e Inovação
São Paulo: Rua Vergueiro, 3185, cj. 87, próximo ao Metrô Vila Mariana   |   Tel. (11) 5571-2751
Rio de Janeiro: Rua Senador Dantas, 80, cj. 307/308 - Centro   |   Tel. (21) 2220-4156 ou 2297-0033
Brasília: SCS Qd. 8 Bl. B-50, Sala 521 - Ed. Venâncio 2000   |   Tel. (61) 3039-4222