Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Uso CSS3 - Transiciones

CSS3Para dar dinamismo a nuestras páginas web vamos a ver como se crean transiciones usando la tecnología de CSS3.

Podemos ver en este ejemplo si estáis usando las últimas versiones de navegadores como Firefox, Chrome o Safari.

Para empezar vamos a ver el código HTML que he usado para la creación de este menú social con esta transición y que da un efecto de rotación a las imágenes usadas.

Para implementarlo se ha usado imágenes de fondo y se ha ocultado el texto que se encuentra entre las etiquetas <span>:

<ul> 
<li><a href="#" id="boton-skype" title="Skype"><span>Skype</span></a></li>     
<li><a href="#" id="boton-google" title="Google profile"><span>Google Buzz</span></a></li>                   
<li><a href="#" id="boton-twitter" title="Twitter profile"><span>Twitter</span></a></li>         
<li><a href="#" id="boton-picasa" title="Picasa"><span>Picasa</span></a></li>               
</ul>

Podemos apreciar que hemos creado un CLASS ya que los botones compartirán estilos. También hemos añadido un ID a cada botón para que podamos asignarle mediante la propiedad background de  CSS la imagen que le corresponda. Ahora que ya tenemos el código HTML vamos a ver los estilos CSS necesarios para crear este efecto:

ul li{
 display: inline;	
}
ul li a{
 position: relative;
 display: block;
 float: left;
 width: 19px;
 height: 19px;
 margin-left: 1em;
}
ul li a span{
 position: absolute;
 right: -999em;
 font-size: 0;
}
#boton-twitter{
 background: url(../img/ico_twitter.gif) no-repeat top left;    
}
#boton-picasa{
 background: url(../img/ico_picasa.gif) no-repeat top left;    
}
#boton-google{
 background: url(../img/ico_google.gif) no-repeat top left;    
}
#boton-skype{
 background: url(../img/ico_skype.gif) no-repeat top left;    
}
a.opcion:hover{
 -moz-transition: background .3s ease 0s;
 -webkit-transition: background .3s ease 0s;
 -o-transition: background .3s ease 0s;
 -ms-transition: background .3s ease 0s;
 transition: background .3s ease 0s;	     
 background-position: bottom left !important;
}

Como podemos apreciar en el código, es en la pseudo-clase :HOVER donde usamos la transición, a la que asignamos la propiedad background.

transition-property: background;

Luego asignamos el tiempo de duración y le indicamos que no tendrá retardo (delay) a la hora de aplicar dicha transición.  En esta pseudo-clase aparece la propiedad background-position indicando que cambiará la posición de la imagen de fondo cuando el usuario se sitúe con el ratón encima del enlace:

transition-duration: .3s;
transition-delay: 0s;

Las imágenes de los iconos usados son dobles,  es decir, que una misma imagen está dividida en dos para cada icono. En posición normal solo se muestra la parte superior de la imagen, y cuando el usuario se posiciona encima del icono, muestra la parte inferior de esa misma imagen. En este caso la diferencia de la parte superior e inferior es el color del icono.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar