6 títulos de imagen fresca con CSS3

CSS3 es realmente poderoso. Solía ser que necesitamos imágenes o un montón de líneas de código de JavaScript para hacer un simple efecto de transición. Hoy en día podemos hacer lo mismo con solo CSS3..

En este tutorial, le mostraremos cómo crear leyendas de imagen con varias transiciones simplemente usando CSS3.

Manifestación
Descargar fuente

Soporte del navegador

Esta leyenda dependerá en gran medida de las propiedades de transformación y transición que son características relativamente nuevas, por lo que sería conveniente tomar nota del soporte del navegador necesario para ejecutar la leyenda sin problemas..

Los siguientes son navegadores que ya admiten transformación y transición:

Internet Explorer 10+ (aún no lanzado)
Firefox 6+
Cromo 13+
Safari 3.2+
Opera 11+

Ahora, vamos a empezar el tutorial..

Estructura HTML

Tenemos 6 imágenes; Cada imagen con un estilo de subtítulos diferente..

     Leyenda simple
  
     Título completo
 Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Fade Caption
 Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Título de diapositiva
 Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      Esta es la leyenda de rotación
 Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     Título de estilo libre
 Lorem ipsum dolor sit amet, consultor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS básico

Antes de diseñar cualquier elemento, siempre es un buen comienzo restablecer todas las propiedades con este restablecimiento de CSS y darles sus valores de estilo predeterminados, por lo que todos los navegadores mostrarán el mismo resultado (excepto quizás IE6).

Los estilos se separarán en el archivo style.css, por lo que nuestro archivo HTML se verá limpio. Sin embargo, no olvide agregar un estilo de enlace dentro de la etiqueta de cabecera para aplicar las reglas de estilo en el archivo..

OK, comencemos a diseñar el elemento, comenzando por la etiqueta html y la identificación del envoltorio principal:

 html color de fondo: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; altura: auto; margen: 80px auto 0 auto; text-align: center; ancho: 660px;

Estilo de cuadro de imagen

Aplicamos algunos estilos comunes en los cuadros que contienen las imágenes. Las casillas se mostrarán lado a lado usando el flotador a la izquierda. Observe que también agregamos desbordamiento: propiedad oculta; Esto hará que todos los objetos del interior que pasan a través del div se oculten..

También declaramos propiedad de transición en cada imagen dentro del cuadro, en caso de que necesitemos la transición de imagen más adelante.

 #mainwrapper .box border: 5px solid #fff; cursor: puntero; altura: 182px; flotador izquierdo; margen: 5px; posición: relativa; desbordamiento: oculto; ancho: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img posición: absoluta; izquierda: 0; -webkit-transición: todos los 300 ms de facilidad; -moz-transición: todos los 300 ms de facilidad de salida; -o-transición: todos los 300 ms de facilidad de salida; -ms-transición: todos los 300 ms de facilidad de salida; transición: todos los 300 ms de facilidad;

Estilo Común del Título

El título tendrá algunos estilos comunes y también propiedades de transición. En lugar de usar la propiedad de opacidad, usamos el modo de color RGBA con 0.8 para el canal alfa para hacer que el subtítulo se vea un poco transparente sin afectar el texto en el interior.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0.8); posición: absoluta; color: #fff; índice z: 100; -webkit-transición: todos los 300 ms de facilidad; -moz-transición: todos los 300 ms de facilidad de salida; -o-transición: todos los 300 ms de facilidad de salida; -ms-transición: todos los 300 ms de facilidad de salida; transición: todos los 300 ms de facilidad; izquierda: 0;

Leyenda 1

El primer título tendrá un efecto de transición simple que se usa comúnmente para un título. El título subirá desde la parte inferior cuando nos movemos sobre la imagen. Para solucionarlo, el título tendrá una altura fija de 30 px y aplicamos su posición inferior -30 px para ocultarlo debajo de la imagen.

 #mainwrapper .box .simple-caption altura: 30px; ancho: 200px; bloqueo de pantalla; abajo: -30px; línea de altura: 25 puntos; text-align: center;

Leyenda 2

El segundo tipo tiene el ancho y alto de la dimensión de la imagen / caja (200x200px) y la transición sería como un efecto de puerta deslizante que se deslizará de arriba a abajo.

 #mainwrapper .box .full-caption width: 170px; altura: 170px; superior: -200px; alineación de texto: izquierda; relleno: 15px;

Leyenda 3

El tercer título tendrá efecto de desvanecimiento. Entonces, agregamos opacidad: 0 para su estado inicial.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacidad: 0; ancho: 170px; altura: 170px; alineación de texto: izquierda; relleno: 15px;

Leyenda 4

El cuarto título se deslizará de izquierda a derecha, por lo que fijamos 200 px a la izquierda (izquierda: 200 px) como su posición inicial.

 ** Caption 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; altura: 170px; alineación de texto: izquierda; relleno: 15px; izquierda: 200px;

Leyenda 5

El quinto subtítulo tendrá efecto rotativo. No solo girará el título, sino también la imagen. Es más como el cambio de posición girando.

Por lo tanto, agregamos propiedades de transformación con una rotación de -180 grados, a menos que prefiera rotar el monitor para leer el título..

 #mainwrapper # box-5.box .rotate-caption width: 170px; altura: 170px; alineación de texto: izquierda; relleno: 15px; superior: 200px; -moz-transform: rotate (-180deg); -o-transformar: rotar (-180deg); -webkit-transform: rotate (-180deg); transformar: rotar (-180deg);  #mainwrapper .box .rotate width: 200px; altura: 400px; -webkit-transición: todos los 300 ms de facilidad; -moz-transición: todos los 300 ms de facilidad de salida; -o-transición: todos los 300 ms de facilidad de salida; -ms-transición: todos los 300 ms de facilidad de salida; transición: todos los 300 ms de facilidad;

Leyenda 6

El último subtítulo tendrá escala de transformación. Sin embargo, en los subtítulos anteriores, el texto en su interior se mostrará junto con el cambio de transición .caption. En esta sección lo haremos un poco diferente..

El texto aparecerá después de que se realiza el cambio de transición. Por lo tanto, agregamos retardo de transición en el texto, en este caso las etiquetas h3 y p.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; izquierda: -200px; ancho: 170px; -webkit-transición: todos los 300 ms de facilidad; -moz-transición: todos los 300 ms de facilidad de salida; -o-transición: todos los 300 ms de facilidad de salida; -ms-transición: todos los 300 ms de facilidad de salida; transición: todos los 300 ms de facilidad;  #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transición-retraso: 300ms; -o-transición-retardo: 300ms; -ms-transición-retardo: 300ms; retardo de transición: 300ms;  #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transición-retraso: 500ms; -o-transición-retardo: 500ms; -ms-transición-retardo: 500ms; retardo de transición: 500ms;

Vamos a hacer que se muevan

En la siguiente sección, definiremos el comportamiento de los subtítulos cuando pasemos el mouse sobre las imágenes o cuadros..

Comportamiento de subtítulos 1: mostrar.

Para el primer título, nos gustaría que aparezca (desde la parte inferior) cuando pasamos el mouse sobre el cuadro. Para abordar este movimiento, utilizamos la propiedad de transformación y el código CSS a continuación le dice a la leyenda que mueva el 100% de su peso a la parte superior.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transformar: traducirY (-100%); -webkit-transform: translateY (-100%); transformar: traducirY (-100%);

Si no obtiene el punto de tener un valor negativo para la traducciónY, es posible que desee leer este tutorial primero para obtener más información..

Comportamiento de subtítulos 2: bájalo.

Por el contrario, el segundo título se moverá hacia abajo desde la parte superior. Por lo tanto, tendremos un valor positivo para traducirY.

 #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transformar: traducirY (100%); -webkit-transform: translateY (100%); transformar: traducirY (100%);

Comportamiento de subtítulos 3: Fade in.

El tercer título es en realidad el más fácil. Cuando el recuadro está activado, la opacidad de los subtítulos se convertirá en 1, haciéndolo visible, y como hemos agregado la propiedad de transición en la clase de subtítulos, la transición debería ejecutarse sin problemas..

 #mainwrapper .box: hover .fade-caption opacity: 1;

Comportamiento de los subtítulos 4: deslízalo hacia la izquierda.

Como mencionamos anteriormente, este título se deslizará desde la izquierda, sin embargo, la imagen también se deslizará hacia la derecha. Así que aquí tenemos 2 declaraciones CSS..

El código CSS a continuación indica que cuando pasamos el cursor sobre el cuadro, el título se deslizará 100% de su ancho hacia la izquierda. Observe que ahora usamos translateX, porque queremos que la diapositiva se mueva horizontalmente de derecha a izquierda.

 #mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! important; -moz-transform: translateX (-100%); -o-transformar: traducirX (-100%); -webkit-transform: translateX (-100%); opacidad: 1; transformar: traducirX (-100%);

Cuando pasamos el ratón sobre el cuadro, la imagen se deslizará hacia la izquierda..

 #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transformar: traducirX (-100%); -webkit-transform: translateX (-100%); transformar: traducirX (-100%);

Comportamiento de subtítulos 5: girarlo.

Esta leyenda es diferente del resto, ya que no se moverá de derecha a izquierda, sino que girará. Cuando el recuadro está activo, el div que contiene la imagen y el título girará -180 en sentido contrario a las agujas del reloj, ocultando la imagen y mostrando el título..

 / ** Rotate Caption: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotate (-180deg); -o-transformar: rotar (-180deg); -webkit-transform: rotate (-180deg); transformar: rotar (-180deg);

Comportamiento de subtítulos 6: escalarlo.

Esta leyenda combinará varios efectos de transformación. Cuando el recuadro está activado, la imagen se ampliará en un 140% (1.4) desde su dimensión inicial.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transformada: escala (1.4); -webkit-transform: scale (1.4); transformar: escala (1.4);

Y si viste el CSS arriba debajo Leyenda 6 Encabezado, hemos ocultado el texto a la izquierda por 200px. Este código CSS a continuación le dice al texto que se mueva a su posición inicial. Entonces, el texto se deslizará de izquierda a derecha simultáneamente..

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);

Manifestación
Descargar fuente

Resumen

Aunque estas características de CSS son geniales, pero aún no es de aplicación generalizada, debido a las limitaciones de compatibilidad del navegador que mencionamos anteriormente. Sin embargo, siga experimentando con estas nuevas funciones, ya que esta es la forma en que configuraremos una página web en el futuro..

Creditos

Las miniaturas de imágenes en el tutorial se toman de los siguientes sitios web (captura de pantalla):

Un libro aparte
Archiduquesa
Vlog
Hongkiat
La granja de saludo
Mark Ecko