@ Paulrouget

O resultado é bastante óbvio .

Via Internet Explorer 9 vs Firefox 4.0

Sencha Animator te permite crear animaciones de alta calidad, que te hacen levantar una ceja, usando única y exclusivamente CSS3, ni siquiera JavaScript, por lo que sí o sí podrá ser reproducido en cualquier explorador de Internet.

Este programa está orientado principalmente hacia la publicidad en internet. Ya que las animaciones que se pueden crear con él son tan buenas como las de Flash, hace hincapié en que usar CSS3 tiene muchas más ventajas en comparación a usar Flash para pequeños banners de anuncios, que básicamente son una especie de Gifs animados a los que les das clic.

Lo que puedes lograr con este nuevo programa son animaciones como movimiento de imágenes, rotación, manejar texto, y todo lo demás que puedes ver en estos ejemplos ofrecidos en la página web oficial. Estos demos sólo pueden ser vistos en algunos exploradores que utlicen WebKit, como Chrome, debido a los aún notables problemas de compatibilidad con HTML5 y CSS3.

El editor trae a la mente (de nuevo) a Flash, ya que trabaja con línea de tiempo y acciones que ocurren en determinado momento. Puede ser instalado en Linux, Mac y Windows, y viene en dos versiones: estándar, que puedes descargar, y la edición para publicidad, que aparentemente será paga.

Link Sencha Animator

Via Crea impresionantes animaciones en CSS3 con Sencha Animator

Ver Demo – Descargar Demo – Mais Informação  Pimp Your Tables with CSS3
Fonte: Tablas con CSS3

Abaixo você pode ver uma imagem so efeito, mais para ver melhor por favor visite o DEMO (em ingles).

Agora vamos ver o código.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

Para visualizar o original visite o DEMO (em ingles). Espero que vocês gostem dessas effects, não esqueça de deixar o seu comentário.

Aqui está a magia com apenas 4 linhas (3lines css, html 1line):

code

Se você quiser exibir uma dica de um link, basta adicionar o tooltip “classe” para o link e escrever seu Tooltip texto em uma tag span dentro da marca – que é ele.

Programa demonstrativo

Como editar CSS com o Firebug

Com o Firebug, dá pra editar CSS sem ser clicando nas propriedades.

É possível editá-lo como o HTML.

Vá na aba CSS, escolha o arquivo e clique em editar.

Vivendo e aprendendo.

PS: a WebDeveloper Toolbar faz a mesma coisa, aperte Ctrl+Shift+E.

PPS: Depois de editar, copie o código e cole no arquivo.

via pedromenezes.com

Ver Demo – Baixar – Mas Info CSS Hover Effect

Link  8 Javascript solutions to common CSS problems

Para realizar nosso teste, vamos utilizar a folha de estilo de Kabytes que atualmente tem um peso de 8.256KB

• Clean CSS : Muito fácil de utilizar simplesmente colamos o código ou lhe damos a url do mesmo.
• CSS Teak : Similar ao anterior, com uma utilidade de que podemos baixar um widgets para OSX. É muito prático já que uma vez que subimos o arquivo para otimizar o site  nos devolve o css otimizado pronto para baixar.
• flumpCakes : Mesma metodologia, não é tão pratico, quando gera o código otimizado temos que o copiar e colar no novo css de forma manual.
• Icey CSS Compressor : Extremamente rápido, tem o mesmo “problema” do anterior que não gera o arquivo, você tem que o copiar diretamente do html que o site gera.

Resultados:

Veerle mostra uma técnicas utilizando CSS que permite conseguir tabelas agradáveis e com estilo. Algo que será muito útil, se você precisa mostrar estatísticas ou dados nas suas webs.

1. A CSS styled table – Demo
2. A CSS styled table version 2 – Demo