Rotar perfectamente y enmascarar miniaturas con CSS3

¿Alguna vez has visto un sitio web que muestra miniaturas de imágenes que están ligeramente rotadas? Es un efecto simple que agrega una capa de personalidad visual. Dicho esto, si no está logrando el efecto de rotación con CSS, ¡está trabajando demasiado! Aprende a hacerlo bien!

Tutorial republicado

Cada pocas semanas, revisamos algunas de las publicaciones favoritas de nuestros lectores de toda la historia del sitio. Este tutorial fue publicado por primera vez en agosto de 2011..


Introducción

Las galerías de imágenes con miniaturas rotadas son algo infrecuentes, pero es un truco sencillo para agregar estilo a su página web. Sin embargo, si no se hace correctamente, lograr y mantener este efecto a veces puede ser una molestia importante!

Para lograr correctamente este efecto, sus primeros pensamientos podrían dirigirse a la creación de miniaturas rotadas en Photoshop. Sin embargo, esto puede resultar difícil a largo plazo. Las desventajas de crear miniaturas rotadas de esta manera incluyen:

  • Consistencia del ángulo: Si no se giran todas las imágenes en el mismo ángulo, se pierde la consistencia visual de la página. Esto significa mantener una PSD de cada miniatura individual correctamente girada en un ángulo consistente. Por ejemplo, puede abrir su PSD y darse cuenta de que ha olvidado el ángulo de rotación de sus miniaturas..
  • Generación de miniaturas de CMS:Si está ejecutando un CMS (como Wordpress), sus miniaturas probablemente se están generando automáticamente. Usando el método PSD descrito anteriormente, tendrá que crear y cargar manualmente cada miniatura individual en su CMS. Además, si ya tiene un sitio existente pero desea aplicar el efecto de rotación a sus miniaturas, tendrá que recrear todas las miniaturas en Photoshop y luego volver a cargarlas todas.!
  • Manejabilidad a largo plazo: Digamos que ha creado todas las miniaturas ligeramente rotadas, pero ahora desea realinear o rediseñar su galería. Esto significa que tendrás que regenerar todas tus miniaturas. Si ha estado administrando sus miniaturas en Photoshop, esto significa que tiene que ajustar y volver a guardar cada miniatura individual de nuevo. Ugh.

¿No sería bueno si pudieras realizar esta pequeña rotación con una línea de código? ¡Bien tu puedes! Vamos a aprender como.


Paso 1: Entender nuestra meta

Una breve descripción de lo que estamos tratando de lograr revela los siguientes pasos:

  1. Crear una imagen en miniatura en Photoshop (no girada)
  2. Inserte la miniatura usando el img etiqueta
  3. Enmascara apropiadamente usando CSS (piensa en las máscaras de Photoshop)
  4. Gira la miniatura dentro de la máscara usando CSS3

Para asegurarnos de que nuestra galería se degrade con gracia, los pasos 1-3 se realizarán utilizando CSS. El paso 4 (el efecto de rotación) se llevará a cabo utilizando CSS3.


Paso 2: Comprensión del tamaño de la miniatura y los aumentos del ángulo de rotación

Antes de crear nuestras miniaturas, debemos determinar el tamaño de cada miniatura que aparecerá en la pantalla..

Si nuestras miniaturas son demasiado pequeñas y las giramos en un ángulo demasiado amplio, algunas de las esquinas nos darán un espacio vacío. Me gusta esto:

Por lo tanto, para llenar adecuadamente el área de la máscara, podemos concluir que cuanto más se gire nuestra miniatura, más grande tendrá que ser. En términos matemáticos, a medida que aumenta el ángulo de rotación de la miniatura, también debe hacerlo el tamaño de la miniatura (y viceversa).


Recuerde esta clave: la miniatura de la imagen siempre será más grande que la máscara de la imagen (tamaño de la miniatura> tamaño de la máscara)

Una advertencia a los rechazados por las matemáticas

Los pasos 3-6 describen cómo calcular matemáticamente el tamaño proporcional para la máscara de imagen y la miniatura. Comprender que no es necesario poder rotar imágenes con el CSS transformar propiedad. Más bien, su propósito es ayudarlo a comprender cómo determinar correctamente el tamaño de sus elementos para permitir una rotación completa de 360 ​​°. Esto asegura que no te quedarás con las esquinas vacías y feas..


Paso 3: proporcionalmente igual

Para evitar mostrar espacios vacíos en nuestra máscara, debemos determinar UNO de los siguientes:

  • Tamaño de la miniatura real
  • Tamaño de la máscara de imagen (parte visible de la miniatura)

Debido a que la miniatura y la máscara de la imagen son proporcionalmente iguales en tamaño, si configuramos el tamaño de una, podemos calcular el tamaño de la otra.


Paso 4: Determinando Dimensiones

En este ejemplo, primero estableceremos el tamaño de la máscara de imagen. Al establecer el tamaño de nuestra máscara de imagen, podemos usar un poco de matemáticas para calcular el tamaño de la miniatura:

  • Determine el tamaño de la máscara de imagen: 180x240 píxeles
  • Encuentra la longitud del lado diagonal
    • Utilice el teorema de Pitágoras (un2 + segundo2 = c2 )
      • Nuestro primer lado (a) es 180px
      • Nuestro segundo lado (b) es 240px
      • Entonces, 1802 + 2402 = c2 (longitud diagonal)
      • 90,000 = c2
      • 300 = c (saca la raíz cuadrada de cada lado)
    • Nuestra longitud diagonal (c) es igual a 300

La longitud diagonal es un número importante. Para permitir la rotación completa de 360 ​​° de nuestra miniatura, su lado más corto debe ser igual al lado más largo de la máscara de imagen. (Aunque es posible que no lo necesite, el aprovisionamiento para una rotación de 360 ​​° permitirá futuros cambios en su ángulo de rotación sin tener que cambiar el tamaño de sus miniaturas).


Paso 5: Calcular las dimensiones de las miniaturas

Como puede ver, el lado más corto de nuestra miniatura debe ser igual al lado más largo de nuestra máscara. Si no es así, nos quedaremos con un espacio vacío. Recuerde: el tamaño de la miniatura es proporcionalmente mayor que el tamaño de la máscara de imagen.

Calcular el tamaño de la miniatura para que se ajuste correctamente es fácil una vez que conocemos las dimensiones de la máscara de la imagen. Simplemente tomamos el lado más grande de la máscara (la diagonal) y dejamos que sea igual al lado más corto de nuestra miniatura..

  • El lado más grande de la máscara (300) es igual al lado más corto de la miniatura (x)
  • Usa las relaciones proporcionales para encontrar la longitud de la miniatura
    • 180: 300 (altura de la máscara: altura de la miniatura)
    • 240: y (longitud de la máscara: longitud de la miniatura)
  • Cruzar multiplicar para resolver
    • 180y = 72,000
  • y = 400 (longitud de la miniatura)

Ahora hemos determinado nuestros tamaños de máscara y miniatura. Sabemos si nuestra máscara de imagen es 180x240px, que la miniatura de la imagen dentro de esa máscara debe ser 300x400px para permitir una rotación de 360 ​​°.

Una nota feliz: Debido a que la máscara de la imagen y el tamaño de las miniaturas son proporcionalmente iguales, ¡estas matemáticas también funcionarán si primero establecemos el tamaño de nuestra miniatura! Usaríamos el mismo teorema de Pitágoras y las relaciones proporcionales para determinar los tamaños adecuados.


Paso 6: Finalmente algunos HTML

Ahora que conocemos todos nuestros tamaños, construyamos nuestras miniaturas rotadas comenzando con algunos HTML básicos.

    Miniaturas rotadas con CSS3    

Miniaturas rotadas con CSS3

Sólo valores numéricos

Este marcado HTML básico inserta lo siguiente:

  • - Esto permitirá al usuario cambiar el ángulo de rotación. Además, ponemos nuestro valor atributo para igualar la misma cantidad que estableceremos inicialmente en nuestro CSS (15 en este caso).
  • - Este mensaje de error se ocultará de la vista. Usando jQuery, lo mostraremos si el usuario ingresa algo además de un número en el cuadro de entrada.
  • - Estas son nuestras miniaturas que se pueden vincular a lo que quieras.
  • Limpia los dos - Despeja nuestras miniaturas flotadas
  • clase = "máscara" - La clase para nuestra máscara de imagen.

Paso 7: CSS Basic Page Styling

Apliquemos un estilo básico a nuestra página para darle estructura y simplicidad..

 cuerpo margen: 0; relleno: 0; fondo: #eee; Familia tipográfica: Ginebra, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;  #wrapper ancho: 840px; margen: 0 auto; fondo: #fff; borde: 1px sólido #ccc; relleno: 25px; borde superior: ninguno;  #error_message color: rojo; pantalla: ninguna; tamaño de letra: .8em; 

Note aquí que escondimos nuestro mensaje de error de forma predeterminada, ya que cambiaremos su visibilidad más adelante en jQuery.

Añadir algunos efectos CSS3

Agreguemos algunos detalles más para mejorar nuestro estilo básico.

 #wrapper radio del borde: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; cuadro de sombra: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; 

Ahora tenemos nuestro contenido centrado con un buen espaciado y algunos efectos CSS3 para un estilo de página mejorado.


Paso 8: Máscara de imagen de estilo CSS

Apliquemos la máscara de imagen a nuestras miniaturas. En nuestro HTML, envolvimos cada miniatura en una etiqueta de anclaje y le dimos una clase de máscara que utilizaremos en nuestro CSS.

 .máscara posición: relativa; altura: 180px; ancho: 240px; flotador izquierdo; desbordamiento: oculto; margen: 15px; borde: 5px sólido # f6f6f6; cuadro de sombra: 0 0 1px # 000; -moz-box-shadow: 0 0 1px # 000; -webkit-box-shadow: 0 0 1px # 000; 

Aquí hay una descripción de las propiedades CSS que usamos (y por qué las usamos):

  • posición: relativo - Nuestro img Las etiquetas serán posicionadas absolutamente dentro de nuestra máscara de imagen.
  • altura, anchura - Anteriormente determinamos las dimensiones de nuestra máscara de imagen. Aquí es donde colocamos esos tamaños..
  • flotador izquierdo - Flota nuestras imágenes para que aparezcan en forma de galería..
  • desbordamiento: oculto - Como se calculó anteriormente, nuestras miniaturas serán de 300x400px. Sin embargo, solo mostraremos una parte (180x240px) de ellos. Esta propiedad actúa como máscara, ocultando la parte de nuestras miniaturas que se extiende fuera de las dimensiones de 180x240.
  • margen - Espacia nuestras imagenes
  • frontera, sombra de la caja - Esto nos da un doble borde (en los navegadores compatibles). los frontera Esta propiedad nos da un borde grueso, blanquecino, alrededor de la imagen, mientras que sombra de la caja nos da un borde delgado y negro alrededor de nuestro borde grueso, blanquecino.

Paso 9: CSS dimensionando las miniaturas

Establezca nuestros tamaños de miniaturas de acuerdo con las dimensiones que calculamos en el Paso 5.

 .máscara img altura: 300px; ancho: 400px; 

Paso 10: CSS Centrando las miniaturas

En este momento, nuestras miniaturas están posicionadas relativamente (desde la esquina superior izquierda).

Queremos que nuestra miniatura se centre horizontal y verticalmente dentro de la máscara.

Para lograr esto, usamos las siguientes reglas CSS:

 .máscara img posición: absoluta; margen superior: -150px; / * la mitad de la altura * / margen izquierdo: -200px; / * la mitad del ancho * / superior: 50%; izquierda: 50%; 

Aquí hay una descripción de lo que hicimos:

  • posición: absoluta - Esto posiciona la miniatura absolutamente dentro de la máscara de imagen.
  • margen - Establecemos márgenes negativos que son exactamente la mitad de la altura y el ancho de la imagen (300x400) y luego configuramos nuestras propiedades de posicionamiento parte superior y izquierda que tiran de los elementos de nuevo en el centro perfecto.

Paso 11: Rotación de miniaturas de CSS

Estaremos usando la propiedad CSS3 transformar Para rotar nuestros elementos. Así, nuestro CSS incluirá todos los prefijos del navegador.

 .máscara img -webkit-transform: rotate (15deg); -moz-transform: rotate (15deg); -o-transformar: rotar (15deg); -ms-transformar: rotar (15deg); transformar: rotar (15deg); 

El CSS aquí es bastante simple. Simplemente colocamos nuestro ángulo de rotación entre paréntesis seguido de "grados".

En este ejemplo, usamos 15 como valor de rotación, pero podría poner un valor diferente allí. Debido a que calculamos correctamente los tamaños de nuestra máscara y miniatura, hemos aprovisionado espacio para una rotación completa de 360 ​​°. Un entero positivo gira la imagen a la derecha, un entero negativo gira la imagen a la izquierda.


Paso 12: Efecto de desplazamiento de imagen CSS

Como un efecto adicional, vamos a agregar una línea simple de CSS que cambia nuestro color de borde cuando el usuario se desplaza sobre e imagen.

 .máscara: desplazarse borde-color: #ddd;

Paso 13: jQuery Cambiando Dinámicamente el Valor de Rotación

Como una pequeña ventaja, vamos a permitir que el usuario ingrese un valor en nuestro cuadro de entrada que cambia el ángulo de rotación de CSS. Así que primero, agreguemos jQuery al final de nuestra página justo antes del cierre cuerpo etiqueta junto con un enlace a nuestro script personalizado:

  

Paso 14: Documento de jQuery listo

Ahora configuremos jQuery para cuando el documento esté listo:

 jQuery (documento) .ready (función ($) // código aquí);

Paso 15: jQuery Initial Function

Creamos una función para cada vez que se haga clic en nuestro botón "actualizar".

 $ ('botón'). haga clic en (función () // código aquí);

Paso 16: jQuery que almacena el valor actual de la rotación

Queremos almacenar el valor numérico de CSS para el ángulo actual de rotación en una variable.

 var rotation_angle_value = $ ('# rotation_amount'). val ();

Este código encuentra el rotation_amount id (que asignamos a la entrada) y obtiene su valor actual. Si lo recuerdas, ponemos la inicial. valor atributo igual a 15 (el mismo que en nuestro código CSS para el ángulo de rotación).


Paso 17: jQuery usando la función isNaN ()

Queremos que el valor de entrada del usuario sea nuestro nuevo ángulo de rotación. Sin embargo, queremos asegurarnos de que el usuario no ingrese accidentalmente un valor no numérico. Ahí es donde el isNaN () la función javascript viene en. isNaN () significa "no es un número". Esta función hace exactamente lo que sus nombres implican: comprueba si el valor que le pasas "no es un número".

Por lo tanto, vamos a utilizar el isNaN () Funciona y le pasa nuestro valor de ángulo de rotación (tal como lo ingresó el usuario). Si no es un número, mostraremos nuestro mensaje de error..

 // verifique si el valor de entrada del usuario es un número o no si (isNaN (rotation_angle_value)) // no es un número $ ('# error_message'). show (); // resto del código aquí

Paso 18: Actualización de jQuery nuevo ángulo de rotación

Si el valor recién ingresado del usuario no es un número, hemos mostrado un mensaje de error. Ahora usaremos un más declaración para cuando tener ingresó un valor numérico. Primero escondemos el mensaje de error..

 else $ ('# error_message'). hide (); 

Debido a que el ángulo de rotación se almacena varias veces en nuestro CSS (debido a los distintos prefijos del navegador) tenemos que actualizar TODOS esos valores con jQuery. Entonces, lo que haremos es almacenar la sintaxis del valor de CSS en una variable (con el nuevo valor de ángulo). Esencialmente, estamos escribiendo. girar (15deg) y reemplazando el valor de '15' con el valor que el usuario ingresó.

 var rotation_angle = 'rotate (' + rotation_angle_value + 'deg)';

Luego creamos un objeto CSS con valores relacionales. Definimos cada una de nuestras propiedades CSS (los prefijos del navegador para la transformación), luego insertamos el valor como la variable que acabamos de definir..

 var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, '-o-transform': rotation_angle, '-ms-transform': rotation_angle, 'transform': rotation_angle,

Ahora simplemente pasamos esa variable almacenando nuestras propiedades y valores de CSS a jQuery para actualizar nuestro CSS!

 $ ('. mask img'). css (updated_css);

Paso 19: jQuery Final jQuery Code

Así es como se ve todo nuestro jQuery:

 jQuery (document) .ready (function ($) $ ('button'). click (function () // obtener el valor del ángulo de rotación var rotation_angle_value = $ ('# rotation_amount'). val (); if (isNaN (rotation_angle_value)) // no es un número $ ('# error_message'). show (); else // es un número $ ('# error_message'). hide (); // almacena la sintaxis del valor CSS con el nuevo valor del ángulo de rotación var rotation_angle = 'rotate (' + rotation_angle_value + 'deg)'; // almacena las propiedades y valores de CSS var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, ' -o-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // actualiza nuestro CSS $ ('. mask img '). css (updated_css);););

Conclusión

Espero que hayas aprendido algo, sobre todo el hecho de que comprometerte con diseños no flexibles en Photoshop a menudo se puede evitar mediante el uso de técnicas CSS3 directamente en el navegador. Gracias por seguirnos!