JMiur [E]

Las posibilidades del CSS3 sólo están comenzando a ser aplicadas y de alguna manera, son infinitas. Las opciones son muchísimas y en general, bastante simples de aplicar. En este caso, Gem@ nos enseña cómo realizar una serie de efectos originales creados por codrops. Acá, sólo voy a intentar reproducir uno de ellos pero el resto, se pueden ver en el demo online o descargar directamente a la PC.

Todos ellos tienen una estructura similar; dentro de un DIV con cierta clase CSS (view), agregamos una imagen cuyo tamaño define el resto de las propiedades y luego, otro DIV que permanecerá oculto (mask) y cuyo contenido puede ser variable.
<div class="view">
  <img src="URL_IMAGEN" />
  <div class="mask">
    <h4> el título </h4>
    <p> el trexto </p>
    <a href="#" class="info"> LEER MAS </a>
</div>
</div>
Obviamente, el CSS es lo que importa y es ... largo porque, lamentablemente, hay que repetir muchas propiedades ya que los navegadores, aún n ose han decidido a unificarlas.
<style>
.view { /* el DIV principal al le damos la misma dimensión que a la imagen a usar, en este caso, 300x188 */
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img { /* la imagen */
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view:hover img { /* se "anima cuando ponesmos el cursor encima */
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view .mask { /* el DIV oculto con los textos */
    background-color: #ABC;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view:hover .mask { /* se muestra el DIV */
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view h4 { /* el título que permanece oculto */
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover h4 { /* se muestra el título */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .view p { /* el texto que permanece oculto */
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover p { /* se muestra el texto */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .view a.info { /* el enlace que permanece oculto */
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .view:hover a.info { /* se muestra el enlace */
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>

estilos con estilo

Vivamus ultrices enim ac ante commodo et interdum odio pulvinar! Duis vel nisl at sapien luctus tincidunt. Mauris in erat risus, id euismod felis.

LEER MAS

18 comentarios:

Unknown  

JMiur al clickear en el supuesto leer más, ¿Se podra abrir una ventana modal? ¿Me dirias cómo? Gracias :D

JMiur  

Dependerá de lo que quieras mostrar en esa ventana modal y que tipo de ventanas modales estás utilizando.

Unknown  

Hasta ahora ninguna, y al abrirse quisiera que aparezca un video. ¿Cómo podria lograrlo?

JMiur  

Primero que nada, busca algun tipo de script que cree esas ventanas modales. Hay muchas y para todos los gustos.

Cada una de ellas tiene su propia forma de hacer eso.

Unknown  

Me gustaria usar una con jQuery que reproduzca videos ¿Cuál me aconsejas?

JMiur  

Eso no podría decirte, es un gusto personal; en general, todas funcionan bien.

Unknown  

Si quisiera utilizar esta ¿Cómo seria? http://emiliocoboscmc.blogspot.com/2012/05/modalbox-una-ventana-modal-propia.html

Responder
Gem@  

Es una maravilla los ejemplos que nos muestran en codrops no solo en esa entrada sino en general.
Oye, y también tiene su historia explicarlo pasito a pasito diciendo donde poner cada cosa y verlo en la misma entrada online eh :)

JMiur  

Es divertido ¿verdad? Un poco largo pero divertido :D

Responder
VEGITO  

HOLA BUEN DIA TENGO UNA DUDA TENGO UN BLOG DE CINE Y QUIERO PONER UNA GALERIA DE VIDEOS DE YOUTUBE YA E VISTO MUCHAS PERO YO QUISIERA PONER UNA DOND SOLO SE VENA LAS IMGENES Y AL DARLE CLIK A LA IMAGEN APARESCA EL TRIALER EN UNA VENTA MODAL SE PUEDE HACER ESO DE ANTEMANO GRACIAS

JMiur  

Sí, poder se puede; debes buscar un script que lo haga.

Responder
Coco Travel & Adventure  

Hola, JMiur: Coloqué este nuevo efecto y funciona bien, excepto porque no aparece el título de la imagen, sólo el texto descriptivo y el enlace a "Leer más". ¿Podrías ayudarme a encontrar la falla, por favor?
Saludos.

Responder
Coco Travel & Adventure  

Hola, JMiur, ya solucioné lo del título de la imagen, pero ahora quiero preguntarte si tienes idea de cómo lograr que un determinado gadget no aparezca en todas las entradas del blog, sino en una sola.
Gracias por tu tiempo y atención.
Saludos.

JMiur  

Fíjate en esta entrada. Debería usar un condicional similar a este:

<b:if cond='data:blog.url != &quot;URL_ENTRADA&quot;'>

con la URL_ENTRADA correspodiente.

Coco Travel & Adventure  

¡Gracias, JMiur! Saludos.

Responder
wiLliam  

Estos efectos son para blogger tbm

JMiur  

Para cualquier página web.

Responder
Berta Fernández-Viña Fernández  

Me encanta!!! y que sencillo de implementar. Gracias J.Miur
Un saludo

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR