O Futuro do CSS(CSS3) e um pouco da sua história

Posted on junho 10, 2007. Filed under: CSS |

Acesse o novo blog do Webnatal – http://www.webnatal.com/blog

Hoje venho aqui pra falar um pouco sobre a história da linguagem que é lembrada por muitos, como o futuro da formatação do design de páginas para web. O CSS. E oque é verdade, e não há oque se costestar em relação a capacidade e facilidade que ela vem nos trazendo no dia-a-dia. Não preciso falar, agora, nas qualidades que o css nos trás, né mesmo?

A História do CSS

O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C.

Desde então, apenas esboços foram apresentados como módulos em Junho de 1999.
Reparem só na data, JUNHO DE 1999. Bastante tempo, Não acham? Entretanto, os browser da Mozilla, o Firefox 3, vem sendo trabalho com base no CSS3. Vamos esperar para ver? se você já fez o teste com o novo FF3, deixe um comentário contando sua experiência.

Andei dando uma olhada nos slides da palestra do Andy Budd, e dentre alguma informações, pude constatar que o CSS3 trará muitas novidades que com certeza irão resolver muitos dos nossos problemas atuais.

Abaixo segue as novidades do CSS3 apresentada por Andy Budd em uma de suas apresentações.

– Seletores de atribuição:

Com eles, você poderá adicionar links dentro dos próprios seletores da tag de link(), e até mesmo colocar um mailto para atribuir emails à links.

Ex:

a[href^=”mailto:”] {
background-image: url(email.gif);
}

a[href$=”.pdf”] {
background-image: url(pdf.gif);
}

– Estilizar links externos:

Ex:

a[href^=”http:”] {
background: url(images/externalLink.gif) no-repeat
right top;
padding-right: 10px;
}

a[href^=”http://www.yoursite.com”%5D,
a[href^=”http:yoursite.com”] {
background-image: none;
padding-right: 0;
}

– Alguns novos seletores CSS3 interessantes:

Ex.:

::selection { background: yellow;} /* Faz uma seleção em todos os textos amarelos que houver */

#menu a:after { content:” 0BB”;} /* adiciona um caractere( “»” ) depois de todos os links de um menu */ – Isso facilitará muito para o pessoal que sempre visa um maior usabilidade no site. Segundo o Livro de Felipe Memória(Design para internet – Projetando a Experiência Perfeita), o qual eu li, explica que esse tipo de símbolo ajuda a mostrar para usuários menos experientes que essa palavra(com o caractere “»” ) o leva para outra página.

input:enabled { background: #999;} /* todos os inputs ativos ficam verde escuro */

input:disabled { background: #ccc;} /* os inputs inativos ficam cinza claro */

input:checked { background: #39c;} /* os inputs marcados ficam azul */

#menu li:last-child { border-bottom: none;} /* remove a borda inferior do ultimo elemento de uma lista */ O que nos economiza o trabalho de criar uma classe especial, só para tirar a borda de baixo do último elemento.

– Múltiplos backgrounds:

Ex:

Headline

Content

.box {
-webkit-border-image: url(images/corners.gif) 25% 25% 25% 25% / 25px round round;
}

Esse novo seletor é uma mão na roda, excluindo o nosso trabalho de ter que ficar importando várias figuras com bordas arredondas para poder conseguir o efeito nas caixas ou divs.


– Efeito Shadow nos textos:


Ex:

h1 {
text-shadow: 4px 4px 5px #999;
}

Se você é daqueles que gosta de ficar colocando o efeito shadow nos títulos das notícias, artigos, ou afins. Com o CSS3 os seus problemas acabaram.

resultado:

Efeito Shadow em textos/texts CSS3

– Efeito Shadow nas caixas:

.box {
-webkit-box-shadow: 4px 4px 8px #444;
-moz-box-shadow: 4px 4px 8px #444;
box-shadow: 4px 4px 8px #444;
}

resultado:

Caixa com Shadow CSS3

– Efeito Opacidade:

.alert {
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=50); /*proprietary IE code*/
}

resultado:

Efeito Opacity/Opacidade CSS3

– Múltiplas colunas:

#content {
-moz-column-count: 2;
-moz-column-gap: 2em;
-webkit-column-count: 2;
-webkit-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}

Para quem, por exemplo, criava duas divs para poder fazer um layout com duas colunas. Essse novo seletor veio para facilitar um pouco mais nossas vidas. Com ele, você pode escolher quantas colunas quer adicionar em uma determinada div, qual o espaço que você quer entre uma e outra, espaço entre o texto, etc.

resultado:

Layout CSS3 com multiplas colunas

Todas as imagens e textos forão extraídas e traduzidos do site do Andy Budd

Link para a apresentação: http://www.andybudd.com/presentations/css3/CSS3.pdf

Anúncios

Make a Comment

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

9 Respostas to “O Futuro do CSS(CSS3) e um pouco da sua história”

RSS Feed for www.webnatal.com/blog – Novo Blog – Natal RN Comments RSS Feed


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: