Teste de renderização em CSS3

Em um Mozzila Firefox nas versões recentes, ou Google Chrome você estará vendo um box com cantos arredondados e duas imagens na parte inferior do box, que estão sobrepostas e uma com um deslocamento de 15 graus, e também apresentando transparências.
Link para a página:Teste de renderização em CSS3
Caso seu navegador não apresenta suporte, você pode utilizar o navegador Firefox, atualmente na versão 3.5, que é livre para uso, caso não seja o administrador do PC, poderá utilizar um portable, este também pode ser em português.

Continue lendo....

Melhor visualizada em Firefox 3.0 ou superior

A página a seguir não foi otimizada para Internet Explorer ou outro navegador.

Aplicando propriedades do CSS3.

Bordas arredondadas com CSS3 sem utilização de imagens.

Sombras no texto com CSS3.

Sombras nas bordas com CSS3 também sem utilizar imagens.

Transparência em imagens.

Estas propiedades permitem criar iluminações no seu site para se destacar na tela e criar um ambiente acolhedor com as facilidades do CSS3, utlizando menos imagens e um código mais limpo e menor tempo de acesso.

Página de testes para colocar em prática o exposto nos artigos anteriores sobre CSS3, poderá ser visualizada também nos navegadores:Opera 10, Safari, para o Google Chromo é necessário acrescentar códigos, Internet Explorer não apresenta suporte no momento.

Página externa, link para a Página utilizando CSS3 .

Continue lendo....

Transparência com CSS3

Para aplicar transparência utilizei uma imagem tipo png, mas não utilizei softwares como Fireworks ou Photoshop para criar a transparência apenas CSS que cuidou de fazer o trabalho, um valor de opacidade, com a regra aplicada diretamente.

Opacity: 0.65;

O valor da opacidade varia de 0 a 1, pode-se especificar a cor do background por exemplo: background color: 000; ou utilizar uma imagem de background tipo jpg como fiz, sendo validado pela W3C, já atualmente. Esta declaração funciona nos navegadores:
Firefox apartir da versão 1.0
Opera apartir da versão 9.0
Safari apartir da versão 1.2
Chrome todas as versões.

Não foi necessário acrescentar o prefixo “-moz-opacity”, que não é mais utilizado para esta aplicação e que ainda encontramos em alguns tutoriais. Apartir do início de 2004 o navegador Mozzila assumiu o nome de Firefox.

Para Internet Explorer temos:
filter: alpha(opacity=65);

Acrescentar o valor alpha para o Internet Explorer descrito acima, que é uma declaração proprietária para servir a estes navegadores, o valor da opacidade varia de 0 a 100 e funciona perfeitamente no IE7, e IE8.

No Internet Explorer 9 não necessitará de declaração proprietária e funcionará com a primeira declaração.

Continue lendo....

Sombras em box e texto com CSS3

Após o artigo sobre box com cantos arredondados, agora vamos incluir sombra no mesmo, e sombras também no texto apenas utilizando css3, é muito bom ver esta propiedade funcionando sem utilizar imagens e artifícios, com um código muito simples.

A propiedade text-shadow a W3C já a incluiu no CSS2 em 1998, mas não foi implementada em nenhum navegador e hoje já está presente em varios deles.

Box-shadow:
A propriedade box-shadow no firefox é:
-moz-box-shadow: 10px 10px 25px#ccc;
Primeiro valor é tamanho da sombra em relação ao eixo x.
Segundo valor é tamanho da sombra em relação ao eixo y.
Terceiro valor é nível da sombra ( blur ).
E por último a cor da sombra.

Text-shadow:
A propriedade text-shadow no firefox é:
text-shadow: 2px 2px 5px #ccc;
A descrição dos valores de ajustes estão explicados acima, o mesmo do box-shadow.

A compatibilidade são as mesmas do CSS 3 descritas no artigo anterior, "Bordas arredondadas com CSS3". Não esquecendo o prefixo webkit, para navegadores Google Chrome ou Safari.

Exemplo de texto com sombras:



Exemplo de bordas arredondadas:

Continue lendo....

Bordas arredondadas com CSS3

Embora exista outras soluções esta é a melhor alternativa, com certeza, em vez de utilizar um "quebra galho" ou imagens, agora nada disso é preciso, é só utilizar CSS3 e não precisa esperar mais tempo.

É isso mesmo, pode ser ultilizada atualmente, você pode fazer o teste, o único problema vem a ser o navegador, é necessário um navegador que utilize engine Gecko como o Firefox ( qualquer versão apartir da 3) ou Webkit como Google Chrome ou Safari, Opera apartir da versão 10.50, usando diferentes declarações , que veremos abaixo.

A versão do CSS3 ainda não foi finalizada,por isso para a propiedade funcionar no Firefox você deverá utilizar: -moz-border-radius; para funcionar em navegadores com a engine webkit: -webkit-border-radius.

Exemplo de declarações para o Firefox, Safari/Chrome e Opera:
.borda {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Poucos navegadores estão implementando a versão 3 do CSS, conforme o artigo passado, por isso não podemos utilizar a propiedade border-radius diretamente. Com o tempo, todos os navegadores suportarão a declaração oficial da W3C quando estiver pronta, eliminando a necessidade das declarações alternativas que são usadas por exemplo no Firefox, no Chrome e no Safari.

Outros navegadores, não se preocupe, simplesmente eles ignoram essa propriedade caso não a possam renderizar, então você pode utilizá-la tranquilamente, perdendo apenas parte do visual nos navegadores mais antigos.

O Internet Explorer não exibe bordas arredondadas, mas a Microsoft já anunciou o suporte à propriedade a partir da próxima versão 9 do navegador. Veja sobre o Internet Explorer 9 nos próximos artigos.

Pode-se arredondar todos os cantos ou um canto separadamente usando as seguintes declarações:

border-radius-topleft para o canto superior esquerdo
border-radius-topright para o canto superior direito
border-radius-bottomright para o canto inferior direito
border-radius-bottomleft para o canto inferior esquerdo

Eu testei no Firefox vejam o resultado:

Continue lendo....

Maior suporte ao CSS 3.0

Agora é a vez do CSS 3 fazer “barulho” depois dos navegadores Safari e do Opera ontem dia sete de agosto foi lançada mais uma versão do Firefox, a 3,6 Alpha 1, esta última versão de teste do desenvolvedor do popular navegador,
que oferece um maior suporte para o CSS 3, lançado como um download noturno, com alterações em propriedade de fundo, CSS gradientes, múltiplas imagens, valores e unidades módulo.

No teste esta nova versão do firefox pontuou 94/100 em comparação com 91/100 para o Firefox 3.5.2. Em breve falaremos mais sobre CSS 3.0

Continue lendo....