Caixas com cantos arredondados e sombra

As recomendações CSS3 irão prever propriedades para construção de bordas arredondadas, no entanto você pode simular estes efeitos usando as propriedades já disponíveis em CSS2 - e sem uso de qualquer tabela ou marcação extra no código.

Esta página foi inspirada em uma página criada por Arve Bersvendsen. Ele desenvolveu várias outras demonstrações sobre CSS .

Sem dúvidas, construir bordas arredondadas e caixas (boxes) com sombra será uma tarefa bem mais simples com a implementação de CSS3. Por exemplo: Para colocar uma borda arredondada grossa na cor vermelha em um parágrafo, você terá que escrever regras CSS como abaixo mostrado:

P { border: solid thick red;
    border-radius: 1em }

E, para colocar uma sombra em um parágrafo, uma regra CSS apenas é suficiente, como mostrado abaixo, onde a cor da sombra é black x-offset e y-offset são 0.5em e com raio de 0.3em.

P { box-shadow: black 0.5em 0.5em 0.3em }

(Você pode tentar este link para constatar se estas propriedades já estão implementadas.) Mas, se precisar usar estes efeitos sem se preocupar se eles já foram ou não implementados e sem encontram suporte nos browsers, use a técnica mostrada a seguir.

Degradês em CSS sem usar imagens

O recurso de gradiente (degradê) CSS foi introduzido pelo Webkit há cerca de 2 anos, mas raramente era utilizado devido à incompatibilidade com a maioria dos browsers. Mas agora, com o Firefox 3.6+, que suporta gradientes, é possível criar degradês sem usar imagens! E o código CSS para gradiente funciona nos principais navegadores: IE, Firefox 3.6+, Safari e Chrome.

1. Gradiente CSS para browsers Webkit

A seguinte linha de código é para navegadores WebKit, como Safari, Chrome, etc. Serve para exibir um gradiente linear de cima (#CCC) para baixo (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000));

 

2. Degradê CSS para Firefox 3.6+

Para Firefox 3.6+, usa-se -moz-linear-gradient:

background: -moz-linear-gradient(top, #CCC, #000);

3. CSS Gradient em Internet Explorer

No IE, é preciso recorrer a um filtro:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#000000');

4. Degradê com CSS em todos os navegadores (cross-browser)

background: #999; /* para browsers sem suporte a CSS 3 */

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* Firefox 3.6+ */

Existe uma ótima ferramenta para gerar degradês com CSS: Ultimate CSS Gradient Generator.

5. Limitações do Internet Explorer

O filtro de gradiente do Internet Explorer não suporta color-stop, gradient angle e radial gradient. Isso significa que só é possível especificar degradês lineares na horizontal ou vertical com duas cores: StartColorStr e EndColorStr.

6. Notas finais sobre degradês com CSS puro

É importante ter em mente que nem todos os navegadores suportam gradiente com CSS puro. Por garantia, o ideal é não depender do CSS para fazer degradês; o ideal é utilizar o recurso para melhorar o web design.