Transiciones con CSS

Transiciones con CSS

Como han visto, Cloudx18 agregó algunos cambios al blog, y en los títulos ahora cuando se pasa el mouse por encima de ellos, se expande el título. Este efecto no es nada de jQuery ni Javascript, es sólo CSS3.

Por lo cual, el efecto no pesa como lo haría un efecto con algún script, para poder implementarlo en tu blog, sólo tienes que mirar el código CSS que presentaré posteriormente...

El Tutorial:
Para ver como queda sólo miren los siguientes demos o simplemente, vean los títulos de blog:

Demo 1:


Este es un contenedor con transiciones


Demo 2:

Este es un contenedor con transiciones



Demo 3:


Este es un contenedor con transiciones


Demo 4:

Este es un contenedor con transiciones


Demo 5:



En Chrome y Firefox anda de maravilla, en Internet Explorer no lo sé por que no utilizo Windows.

El código:
-moz-transition: 1s; /*Transición Firefox*/
-webkit-transition: 1s; /*Transición Chrome, Safari*/
-o-transition:1s; /*Transición Opera*/
transition: 1s; /*Transición Genérica*/

.demo4 {
margin:0px auto;
background-color: #41937f;
color: #fff;
display: table-cell;
font-size: 20px;
line-height:1.5em;
height: 50px;
text-align: center;
padding: 10px;
vertical-align: middle;
width: 400px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s;
transition: 1s;
}
.demo4:hover {
-webkit-transform: translate(11px, 28px);
-moz-transform: translate(11px, 28px);
-o-transform: translate(11px, 28px);
}
Este código sólo hace los efectos, las transición y nada más, no hace mucho más allá de aquello.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger