¿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 republicadoCada 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..
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:
¿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.
Una breve descripción de lo que estamos tratando de lograr revela los siguientes pasos:
img
etiquetaPara 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.
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).
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..
Para evitar mostrar espacios vacíos en nuestra máscara, debemos determinar UNO de los siguientes:
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.
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:
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).
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..
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.
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 flotadasclase = "máscara"
- La clase para nuestra máscara de imagen.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.
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.
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 imagenesfrontera
, 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.Establezca nuestros tamaños de miniaturas de acuerdo con las dimensiones que calculamos en el Paso 5.
.máscara img altura: 300px; ancho: 400px;
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.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.
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;
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:
Ahora configuremos jQuery para cuando el documento esté listo:
jQuery (documento) .ready (función ($) // código aquí);
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í);
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).
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í
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);
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);););
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!