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....

Google quer mudar o rumo do HTML !

O Google confirmou hoje nesta quarta-feira 05/08 a compra da On2 Technologies, produtora de tecnologia de compressão de vídeo,
por US$ 106,5 milhões, em uma operação que envolve apenas ações.

Sundar Pichai, Vice Presidente da Google para o gerenciamento de produtos, disse esta manhã:
"Hoje vídeo é uma parte essencial da experiência da Web, e acreditamos alta qualidade de vídeo compressão deve ser uma
parte da plataforma da Web...".

"Estamos comprometidos com a inovação na qualidade de vídeo na Web, e acreditamos que On2 nos ajudará
ainda mais esse objetivo." Futuro da Web vídeo pode mudar com o aquisição da On2 pelo google, uma vez que html 5 estava com problemas de
codecs para vídeo, por não encontrar este software com uso livre.


Video Theora foi originalmente usado em HTML 5 para a tag "VIDEO" embutido, mas o grupo de estudos estavam relutantes devido a
propriedade particular do codec. O vídeo Ogg Theora codec é baseada On2 com patente do VP3 codec, a primeira versão estável do codec só foi
liberada no ano passado, mas foi incluída no projeto de versões de HTML 5. A tag "video" Theora já é suportado pelo Mozilla Firefox 3.5 e recebe o apoio da mesma.

Continue lendo....

Declaração DOCTYPE

Declaração documento tipo, a W3C (World Wide Web Consortium), encarregado da criação dos Standard web, define que os arquivos HTML, XML, XHTML devem ter uma declaração de tipo DOCTYPE que deve fazer referência a uma das três definições do tipo de documento que existem.

Esta declaração deve ser a primeira linha da nossa página e é necessária para dizer ao navegador seja ele qual for, que versão de HTML é usada página.

Caso contrario, o navegador processará a página em modo Quirks (modo de compatibilidade) podendo interpretar incorretamente o código da página e inutilizar seu trabalho.

A DTD (definição do tipo de documento) é a estrutura que regulamenta os elementos e atributos que estão disponíveis para cada tipo de documento.
Versões anteriores HTML 4.01 não são recomendáveis por que não são totalmente compatíveis com as Folhas de Estilo), existem três tipos de DTD para HTML 4 e três tipos para XHTML 1.0:

Escolhendo o DOCTYPE adequado.

HTML 4.01 Transictional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.0 Transictional
XHTML 1.0 Strict
XHTML 1.0 Frameset
XHTML 1.1 ( seque a XHTML 1.0 Strict mas não necessita declarar o strict )


HTML Transitional:
HTML 4 Transitional inclui todos os elementos e atributos do HTML 4 Strict mas acrescenta os elementos e atributos ultrapassados
( desaprovados ou obsoletos).Veja o artigo sobre o assunto.

HTML Strict:
Se declararmos este DTD, o navegador passará a agir em cumprimento dos padrões (Standards compilam-se).
Isto implicará que só possam se usar as etiquetas de HTML 4.01.
Este é o modo recomendado pelo W3C, já que é compatível com o CSS e pode ser interpretado corretamente por todos os navegadores,
tornando muito mais fácil o passo de nossos documentos ao XHTML que muito possivelmente tenda a substituir ao HTML nos próximos anos.

HTML Frameset:
Esta é uma variante de HTML 4 transitório para os documentos que utilizam Frames (molduras).

Abaixo seque a lista de declarações só para conferir DOCTYPE para HTML 4.01 e XHTML:

Continue lendo....