Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
Usuarios Online:  155
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

9
NOV.
2014
 
 
 

Animación de brillo para textos o imágenes con CSS

Publicado por Desarrollo Multimedia Team | domingo, 9 de noviembre de 2014 a las 02:26 h.
16890  
 

Para el efecto de brillo en un texto solo hace falta un hover y una transición para desplazar una capa sobre otra, así de simple.

Empezaré por la parte de html:

<a href="#" class="brillo"><img src="/logocss.png" alt="css"  /><span></span></a>

En este caso la imagen va a ser un enlace, pero podría ser otro elemento cualquiera. El span situado al final, es la capa que pasa por delante  simulando el brillo. Incluyo todos los archivos al final del articulo:

En cuanto al CSS tambien es muy simple:

Primero establecemos las dimensiones del contenedor, en este caso el enlace, y evitamos que la imagen que hace de brillo salga de este con "overflow:hidden". Importante usar las posiciones relativas tanto en el elemento contenedor como en la capa de brillo, para que esta última se sitúe por encima en el mismo orden de aparición que en el documento html.

.brillo{
    position:relative;
    display: block;
    height: 133px;
    width: 132px;  
    text-decoration:none;
    overflow:hidden;
}

Después al span (imagen de arriba) le pongo las mismas dimensiones y lo saco del campo de visión, dejándolo 300px a la izquierda de la imagen en posición inicial. 

.brillo span{
     position:relative;
     display: block;
     background:url(brillo.png) no-repeat; 
     background-position: -300px 0px;
     margin-top:-137px;
     height: 133px;
     width: 132px;     
}

Para terminar inicio la transición con un hover, finalizando la animación 300px a la derecha de la imagen en un lapso de tiempo de 1,5 segundos.

.brillo:hover span{
    background-position: 300px 0px;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1.5s;
    transition-property: all;
    transition-duration: 1.5s;
}

Si en vez de una imagen usamos texto en el enlace, el resultado seria el siguiente:

Tan solo he usado una imagen de brillo mas pequeña y he adaptado las medidas de la animación en consecuencia.

De esta forma el html quedaría así:

<a href="#" class="brillo">CSS3<span></span></a>

y el CSS así:

.brillo{
    position:relative;
    display: block;
    font-size:70px;
    height: 70px;
    width: 200px;  
    text-decoration:none;
    color:#333;
    overflow:hidden;
}
.brillo span{
    position:relative;
    display: block;
    background:url(brillo.png) no-repeat;  
    background-position: -100px 0px;
    margin-top:-75px;
    height: 70px;
    width: 200px;
}
.brillo:hover span{
    background-position: 300px 0px;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    transition-property: all;
    transition-duration: 1s;
}
 
 

 

Y así de simple es realizar un efecto brillo con CSS, existen mas alternativas por supuesto, tal vez se podría hacer sin las imágenes, con una capa brillo construida  íntegramente a partir de CSS por ejemplo.

Artículo seleccionado del Blog de Agustin Baraza en www.nosolocss.com/
 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post