Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje07-11-2011, 20:47 (UTC)    
Título del mensaje: Efecto "Fade In and Reflect"

Hola chicos aquí traigo un efecto css 3 de imágenes
Este efecto solo es compatible con navegadores -webkit, ya que usa la propiedad -webkit-box-reflect, que solo es soportada por Chrome y Safari, de igual manera se ve bastante bien.

Demo:
http://designshack.net/tutorialexamples/HoverEffects/Ex5.html

Aquí el código por encima o por debajo

Código:
<style type="text/css">
#ex5 {
    width: 700px;
    margin: 0 auto;
    min-height: 300px;
}
 
#ex5 img {
    margin: 25px;
    opacity: 0.8;
    border: 10px solid #eee;
 
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 
    /*Reflection*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover { 
   opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
</style>




Código para ponerlo donde sea :
Código:

<div id="containerEx5">
   
       <div id="ex5">
[color=red]           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">
           <img src="URL DE LA IMAGEN">[/color]
       </div>
   
    </div>


Fuente :http://web.tursos.com/tutoriales/html-css/5-efectos-hover-css3-para-copiar-y-pegar

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por animeeasy el Vie Nov 23, 2012 11:37 am; editado 6 veces
Mensaje20-12-2011, 00:07 (UTC)    
Título del mensaje: ???????????

hay como poner un enlace a cada imagennn?????????????'
______________
WebTwo de RadioVijaer.
Mensaje20-12-2011, 00:18 (UTC)    
Título del mensaje: Re: ???????????

Hola davixm,

Utiliza el siguiente codigo HTML:
Código:
<div id="containerEx5">
 <div id="ex5">
           <a href="URL DEL ENLACE"><img src="URL DE LA IMAGEN"></a>
            <a href="URL DEL ENLACE"><img src="URL DE LA IMAGEN"></a>
            <a href="URL DEL ENLACE"><img src="URL DE LA IMAGEN"></a>
           <a href="URL DEL ENLACE"> <img src="URL DE LA IMAGEN"></a>
           <a href="URL DEL ENLACE"> <img src="URL DE LA IMAGEN"></a>
           <a href="URL DEL ENLACE"> <img src="URL DE LA IMAGEN"></a>
           <a href="URL DEL ENLACE"> <img src="URL DE LA IMAGEN"></a>
           <a href="URL DEL ENLACE"> <img src="URL DE LA IMAGEN"></a>
</div>
 </div>


Ejemplo del Cuadro con Link:
http://design-pwg.es.tl/davixm.htm

Saludos!
Moderador Design-PWG.

------------------------------------------------------------------------
UPDATE: Este tema será movido a su respectivo Foro de selección próximamente.

Gracias por el aporte!


Ultima edición por design-pwg el Jue Dic 22, 2011 10:25 am; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group