A fronteira final » Firefox http://afronteirafinal.com Audaciosamente indo onde nenhum dev jamais esteve Tue, 17 Aug 2010 17:03:19 +0000 en hourly 1 http://wordpress.org/?v=3.1-alpha O que você tem que saber sobre CSS3 http://afronteirafinal.com/o-que-voce-tem-que-saber-sobre-css3/ http://afronteirafinal.com/o-que-voce-tem-que-saber-sobre-css3/#comments Tue, 23 Feb 2010 17:58:14 +0000 lcameroon http://afronteirafinal.com/?p=163 Muitos de vocês provavelmente já perceberam toda a agitação em torno do CSS3, mas exatamente quais técnicas podemos usar hoje?

Neste artigo, vou mostrar algumas técnicas diferentes CSS3, que alguns dos principais navegadores (mais especificamente Firefox, Chrome, Safari e Opera) já suportam. Com isso ficará evidente a degradação do layout pela falta de suporte dos outros browsers (como por exemplo o Internet Explorer). Usando as extensões específicas disponíveis para cada navegador, muitos dos estilos que estão sendo especificados no CSS3 já podem ser usados hoje!

CSS Vendor Extensions

O CSS permite que os desenvolvedores de navegadores criem implementações proprietárias para os mais variados estilos CSS. Isso permite ao distribuidor do navegador realize implementações próprias para determinada propriedade CSS, mesmo que já padronizado ou especificado, o que não é tão comum nem tão recomendado. Para utilizar no CSS, a propriedade que deseja utilizar para determinado(s) navegador(es) deve ser precedida de um prefixo. Esse prefixo indicará que se trata de uma extensão que somente aquele navegador interpretará.

Alguns browsers com seus prefixos (CSS Proprietary Extensions Scheme):

  • Firefox : -moz-
  • Safari: -webkit-
  • Chrome: -webkit-
  • Opera: -o-
  • IE: -ms-

A grande vantagem das extensões é que os navegadores podem ir implementando as novas propriedades, como no caso do CSS3. Propriedades essas que já estão previstas, porém não especificadas. Isso certamente acelera a evolução dos navegadores em relação ao suporte às novas propriedades; Prepara os “CSS coders” para a nova forma de trabalhar; e contribui para a especificação oficial do CSS propriamente dita.
Clique se quiser saber mais sobre (CSS Proprietary Extensions Scheme);

Como você deve ter percebido, uma grande desvantagem de usar essas extensões é o fato de que acabamos tendo que repetir as propriedades para que funcione em todos os navegadores. É isso ou procurar soluções com javascript, folhas de estilos alternativas entre outras “viagens” para que a manutenção do código continue simples onerando o mínimo de recursos. Tudo bem, não basta falar, vamos mergulhar na direito no CSS3! Nota: os estilos sem um prefixo é a proposta da especificação atual W3C.

Uma nota sobre os Demos nesta página

Todos os exemplos estão nesta página, por isso, se você não está vendo alguns exemplos corretamente (ou nada), então o navegador que você está usando não dá suporte a técnica particular CSS3.

Sombras

O efeito de sombra aceita vários valores. Em primeiro lugar é simplesmente a cor da sombra. Ele aceita quatro valores de “length” e os dois primeiros são os x (offset horizontal) e do y (offset vertical). O valor seguinte é a quantidade de desfoque adicionado à sombra. O valor da quarta e última, é a quantidade propagação da sombra. “Box shadow” também vai aceitar uma palavra-chave “inset” que vai criar uma sombra interna.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

DEMO DE SOMBRA

<p>
<div style="width: 500px; height: 100px; margin-left:50px; color: #FFF;
background-color: #069; padding: 0 7px 0 7px; box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;">
&amp;amp;amp;nbsp;</div><br />
</p>

Gradientes

Gradientes pode ser bastante confuso no início, especialmente quando se comparam as diferenças -moz e -webkit. Com -moz você primeiro definir a direção do gradiente, em seguida, determinar o início e término. Da -webkit tem um pouco mais de código. Primeiro você define o tipo de gradiente. Os próximos dois valores definem a direção. Finalmente, os últimos dois valores definem o início e término da cor do gradiente.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

DEMO DE GRADIENTE

<p>
<div style="width: 500px; height: 100px; background-color:#2e3192;
background: -moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#069), to(#036));">
&amp;amp;amp;nbsp;</div><br />
</p>

RGBA

O método de cor RGBA realmente é mais fácil do que pode parecer à primeira vista. Leva quatro valores e na ordem em que estão: a quantidade de vermelho, a quantidade de verde, de azul e do nível de opacidade. Em vez de usar cor em (#) hexadecimal, defina o modo de cor em RGB, quanto o nível de opacidade pode se ver a cor transparente. A opacidade aceita valores entre 0 e 1. Com 0 sendo completamente opaco e 1 sendo a cor real definida. O exemplo abaixo tem um valor de opacidade da .5 fazendo com que o elemento fique com 50% de transparência. RGBA na verdade não necessita de qualquer das extensões do navegador.

background-color: rgba(0, 54, 105, .5);

DEMO DE RGBA

<p>
<div style="width: 480px; height: 80px; text-align: center;
padding: 10px; background-color: rgba(0, 54, 105, .5);">
Este elemento está com 50% de transparência </div><br />
</p>

HSL

Junto com RGBA, CSS3 pode tornar o modelo de cor HSL disponível para nós. Isso poderia dar-nos todo um arsenal de cores e tons. Neste modelo de cor, HSL (H = tonalidade, S = saturação, L = luminosidade). Tonalidade é um grau na “roda de cores”, enquanto a saturação e a luminosidade são valores percentuais das cores.

background-color: hsl(209, 41.2%, 20,6%);

DEMO HSL

<p>
<div style="width: 480px; height: 80px; padding: 10px;
background-color: hsl(209, 41.2%, 20,6%);"> &amp;amp;amp;nbsp; </div><br />
</p>

Cor da Borda

Com este estilo, você deve definir border-top border-right border-bottom e border-left separadamente para obter o efeito abaixo. Você vai perceber que eu tenho definido uma borda de 8px juntamente com 8 cores diferentes para cada estilo de cor da borda. Isso porque a mesma quantidade de cores tem de coincidir com a quantidade de pixels na definição da borda.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;

DEMO COR DA BORDA

<p>
<div style="width: 500px; height: 100px;
background-color: #2e3192; border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;">
&amp;amp;amp;nbsp; </div><br />
</p>

Seleção Cor do Texto

Devo dizer que mudar a cor de seleção de texto é um recurso muito bacana. Com o pseudo-elemento ::selection, você pode alterar a color e background quando o usuário destaca um elemento de texto. O ::selection foi removido do projecto CSS3 atual, mas deixa a esperança que irão adicioná-lo novamente mais tarde!

::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}

DEMO SELEÇÃO DE TEXTO

<style type="text/css">
<!--
#textSelection { width: 500px; }
/* Safari */
p.selection::selection { background: #3C0; color: #90C; }
/* Firefox */
p.selection::-moz-selection { background: #3C0; color: #90C; }
-->
</style>
<div id="textSelection">
<p>Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! Selecione o texto para ver o
efeito deste recurso! Selecione o texto para ver o efeito deste recurso! Selecione
o texto para ver o efeito deste recurso! Selecione o texto para ver o efeito deste
recurso! Selecione o texto para ver o efeito deste recurso! Selecione o texto para
ver o efeito deste recurso! Selecione o texto para ver o efeito deste recurso!
Selecione o texto para ver o efeito deste recurso! </p>
</div>

Transformação

Com o estilo “transform”, você pode fazer os elementos “crescerem”, quando o mouse estiver sobre o elemento. Com um valor acima de 1 o elemento irá aumentar de tamanho. Por outro lado, com um valor abaixo de 1 fará com que o elemento diminuir de tamanho. Junto com o “scale” o “transform” tem muitos diferentes formas de uso. Visite a página do desenvolvedor do Firefox para ver o que mais você pode usar. (https://developer.mozilla.org/En/CSS/-moz-transform)

-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);

DEMO DE TRANSFORMAÇÃO

<style type="text/css">
<!--
#transform ul { list-style:none; background:none; }
#transform ul li{ width: 200px; color:#FFF; list-style: none; padding: 5px;
background:none; background-color: #069; border-bottom: #036 solid 1px; }
#transform li a:link { color: white; }
#transform li:hover { -moz-transform: scale(1.15); -webkit-transform: scale(1.15);
background-color: #003669; }
-->
</style>
<div id="transform">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">A Empresa</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Contato</a></li>
	</ul>
</div>

Layout Multi-column

Com este novo estilo de “layout multi-column”, podemos dar ao nosso texto um “estilo jornal”. Implementar isto é muito simples em relação ao modo “tradicional” de se fazer com CSS. Primeiro eu especifico quantas colunas eu quero, o tipo de regra que eu quero para separá-las, e como que “espaçamento” eu quero entre as colunas. Simples não?

-moz-column-count:3;
-moz-column-rule: solid 1px black;
-moz-column-gap: 20px;

DEMO DE MULTI-COLUMN

<style type="text/css">
<!--
#multiColumns {
	-moz-column-count:3;
	-moz-column-rule: solid 1px black;
	-moz-column-gap: 20px; }
-->
</style>
<div id="multiColumns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Resumo

Espero que todos estão tão animado com o CSS3 como eu estou. Ele nos dá mais poder tanto para webmasters quanto para desenvolvedores, e em muitos aspectos muito mais simples. Agora, se nós pudéssemos chegar em todos os navegadores e dizer para apoiá-lo seria fantástico! O que eu mostrei são apenas algumas das novas características potenciais do CSS3. Se você quiser obter mais informações, dicas e/ou ajuda, eu aconselho a visitar todos os sites abaixo:

* CSS: Current Work (http://www.w3.org/Style/CSS/current-work)

* CSS3.info (http://www.css3.info/)

* Mozilla CSS Extensions (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)

* The WebKit Open Source Project (http://webkit.org/)

]]> http://afronteirafinal.com/o-que-voce-tem-que-saber-sobre-css3/feed/ 1