Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Rota y Enmascara Miniaturas Con CSS3

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

¿Has visto alguna vez una web que muestra miniaturas de imágenes que están ligeramente giradas? Es un sencillo ejemplo que añade una capa de personalidad visual. Dicho esto, si no consigues el efecto de rotación con CSS, ¡estás trabajando muy duro! ¡Aprende a hacerlo de la forma adecuada!

Tutorial Reeditado

Cada pocas semanas, revisitamos algunos de los artículos preferidos de nuestros lectoresa lo largo de la trayectoria de nuestro sitio. Este tutorial fue publicado por primera vez en agosto de 2011.


Introducción

Las galerías de imágenes con miniaturas rotadas son de alguna manera poco frecuentes, pero es un simple truco para añadir estilo a tu página web. En cualquier caso, si no se hace correctamente, ¡lograr y mantener este efecto puede en ocasiones ser una auténtica molestia!

Para conseguir este efecto adecuadamente, tu primera idea podría ser crear miniaturas viradas en Photoshop. Aunque, esto puede ser complicado a la larga. Entre las desventajas de crear miniaturas giradas de esta forma figuran:

  • La Consistencia de Ángulo: Si las imágenes no están todas rotadas con el mismo ángulo, la consistencia visual de la página se pierde. Esto implicará el mantenimiento de un PSD para cada miniatura individual adecuadamente rotada con un ángulo consistente.
  • La Generación de Minuaturas en el CMS: Si estás ejecutando un CMS (como por ejemplo WordPress), tus miniaturas están siendo probablemente generadas automáticamente. Empleando el método de los PSDs descrito anteriormente, tendrás que crear y cargar manualmente cada miniatura en tu CMS. Además, si ya tienes un sitio existente pero quieres aplicar el efecto de rotación a tus miniaturas, tendrás que recrear todas las miniaturas en Photoshop y después cargarlas de nuevo.
  • La Gestión a Largo Plazo: Digamos que has creado todas tus miniaturas ligeramente rotadas, pero ahora quisieras volver a alinear o rediseñar tu galería. Esto significaría que tendrías que generar de nuevo todas tus miniaturas. Si has estado gestionando tus miniaturas en Photoshop, esto significa que tendrás que ajustar y volver a guardar las miniaturas individuales otra vez. ¡Uf!

¿No sería estupendo si pudieses realizar esta pequeña rotación con una línea de código? Bien, ¡puedes! Aprendamos ha hacerlo.


Paso 1: Entender Nuestro Objetivo

Un breve vistazo sobre lo que estamos intentando conseguir revela los siguientes pasos:

  1. Crear una imagen en Photoshop (sin rotar)
  2. Insertar la miniatura usando la etiqueta img
  3. Enmascararlas adecuadamente con CSS (piensa en las máscaras de Photoshop)
  4. Rota las miniaturas dentro de la mascara usando CSS3
Example of image thumbnail and mask

Para asegurarnos de que nuestra galería se degrada gracilmente, los pasos del 1 al 3 se lograrán usando CSS. El paso 4 (el efecto de rotación) se logrará usando CSS3.


Paso 2: Entender el Tamaños de las Miniaturas y el Incremento de los Ángulos de Rotación

Antes de crear nuestras miniaturas, necesitamos determinar cuan grandes serán las miniaturas que aparecerán en la pantalla.

Si tus miniaturas son demasiado pequeñas y las rotamos demasiado en ángulo, algunas esquinas dejarán visible un espacio vacío. De la siguiente manera:

Empyt space in the mask corners

Por tanto, para cubrir adecuadamente el área de máscara, podemos concluir que cuanto más giremos nuestras miniaturas, más grandes tendrán que ser estas. En términos matemáticos, conforme el ángulo de rotación de las miniaturas aumente, igualmente tendrá que hacerlo el tamaño de las miniaturas (y vice versa).

Increase in rotation means an increase in size
Recuerda esta clave: la imagen de la miniatura siempre será más grande que la imagen de la mascara (tamaño de la miniatura > tamaño de la máscara)

Advertencia para Aquellos Alérgicos a las Matemáticas

Los pasos del 3 al 6 describen como calcular matemáticamente el tamaño proporcional para la imagen de la máscara y de la miniatura. Entenderlo no es necesario para ser capaz de rotar las imágenes con la propiedad CSS transform. En lugar de eso, su propósito es ayudarte a entender cómo determinar adecuadamente el tamaño de tus elementos para permitirte una rotación de 360º Esto te asegura que no tendrás esas feas esquinas vacías.


Paso 3: Proporcionalmente Iguales

Para evitar mostrar un espacio vacío en nuestra máscara, tenemos que determinar UNA de las siguientes cosas:

  • Tamaño de la actual miniatura
  • Tamaño de la máscara de la imagen (porción visible de la miniatura)

Como la miniatura y la máscara de la imagen son proporcionalmente iguales en tamaño, si establecemos el tamaño de una podremos calcular el tamaño de la otra.


Paso 4: Determinar las Dimensiones

En este ejemplo, vamos a establecer el tamaño de la máscara de nuestra imagen primero. Indicando el tamaño de la máscara de la imagen podremos usar algunos cálculos matemáticos para determinar el tamaño de la miniatura.

  • Determinar el tamaño de la máscara de la imagen: 180x240 píxeles
  • Encuentra la longitud de la línea diagonal
    • Usa el teorema de Pitágoras ( a2 + b2 = c2 )
      • Nuestro primer lado (a) tiene 180px
      • Nuestro segundo lado (b) tiene 240px 
      • Así que, 1802 + 2402 = c2 (longitud diagonal)
      • 90,000 = c2
      • 300 = c (toma la raíz del cuadrado de cada lado)
    • La longitud de nuestra diagonal (c) es igual a 300
pythagorean theorem

La longitud de la diagonal es una medida importante. Para permitir la rotación de 360º de nuestra miniatura, su lado más corto debe ser igual al lado más largo de la máscara de la imagen. (Aunque puedas no necesitarlo, preveér una rotación de 360º te permitirá cambios futuros en tu ángulo de rotación sin tener que redimensionar las miniaturas).

Thumbnails shortest side equals masks's longest side

Paso 5: Calcular las Dimensiones de las Miniaturas

Como puedes ver, el lado más corto de nuestras miniaturas debe ser igual al lado más largo de nuestra máscara. Si no es así, nos quedará espacio en blanco. Recuerda: el tamaño de las miniaturas es proporcionalmente mayor que el tamaño de la máscara de la imagen.

Proportional relationship between thumbnail and mask

Calcular el tamaño de las miniaturas de forma que encajen fácilmente una vez sepamos las dimensiones de la máscara de la imagen. Simplemente tomamos el lado más largo de la máscara (la diagonal) y hacemos la longitud del lado más corto de nuestra miniatura igual.

  • El lado más largo de la máscara (300) es igual al lado más corto de la miniatura (x)
  • Usa las relaciones de proporcionalidad para encontrar la longitud de la miniatura.
    • 180 : 300 (la altura de la máscara : la altura de la miniatura)
    • 240 : y (longitud de la máscara : longitud de la miniatura)
  • Realiza una Regla de Tres para Resolver
    • 180y = 72,000
  • y = 400 (longitud de la miniatura)
Finding y2

Ahora hemos determinado el tamaño de nuestras máscaras y miniaturas. Sabemos que si nuestra máscara de imagen es 180x240px, que la imagen de la miniatura que irá en su interior debe ser de 300x400px para permitir una rotación de 360º.

Una Nota Feliz: Como el tamaño de la máscara de la imagen y de la miniatura son proporcionalmente iguales, ¡estas matemáticas también funcionarán si establecemos primero el tamaño de la miniatura! Usaríamos el mismo teorema de Pitágoras y la relación de proporcionalidad para determinar los tamaños apropiados.


Paso 6: Por Último Algo de HTML

Ahora que sabemos todos nuestros tamaños básicos, construyamos nuestras miniaturas rotadas empezando con algo de HTML básico.

Este código básico HTML inserta lo siguiente:

  • <input> - Esto permitirá al usuario cambiar el ángulo de rotación. También, hemos establecido un atributo value para igualar la misma cantidad que establecemos inicialmente en nuestro CSS (15 en este caso).
  • <span> - Este mensaje de error se ocultará de la vista. Usando jQuery, lo mostraremos si el usuario introduce algo además de un valor numérico en la casilla para introducir valores.
  • <img> - Estas son nuestras miniaturas, que pueden ser enlazadas a lo que quieras.
  • clear:both -  Aplicar el valor clear a ambos lados de nuestras miniaturas flotadas
  • class="mask" - La clase para nuestra máscara de imagen
basic HTML layout

Paso 7: CSS Básico para Aplicar Estilo a la Página

Apliquemos un poco de estilo básico a nuestra página para dotarla de estructura y simplicidad.

Advierte que aquí hemos ocultado nuestro error_message por defecto, ya que cambiaremos su visibilidad más tarde con jQuery.

Añade Algunos Efectos CSS

Añadamos algunos detalles más para mejorar nuestro estilo básico

basic CSS styling

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


Paso 8: Aplicar Estilo CSS a la Máscara

Apliquemos la máscara de imagen a nuestras miniaturas. En nuestro HTML, hemos envuelto cada miniatura en una etiqueta de ancla y le hemos asignado la clase de mask que usaremos más tarde en nuestro CSS.

Aquí tienes una descripción del las propiedades CSS que hemos usado (y el porqué las hemos usado):

  • position:relative - Nuestras etiquetas img serán posicionadas de forma absoluta dentro de nuestra máscara de imagen
  • heightwidth - Anteriormente determinamos las dimensiones de nuestra máscara de imagen. Aquí es donde colocamos estas dimensiones.
  • float:left - Aplica la propiedad float a nuestras imágenes, de forma que aparezcan en forma de galería.
  • overflow:hidden - Tal y como hemos calculado con anterioridad, nuestras miniaturas serán de 300x400px. No obstante, sólo mostraremos una porción (180x240px) de las mismas. Esta propiedad funciona como máscara, ocultando la porción de las miniaturas que se extiende fuera de las dimensiones 180x240px.
  • margin - El espacio fuera de nuestras imágenes
  • borderbox-shadow - Esto nos da un doble borde (en los navegadores que lo admiten). La propiedad border nos proporciona un truco, un borde blanco hacia afuera de la imagen mientras que box-shadow nos da un fino borde negro alrededor de nuestro borde blanco exterior.
thumbnails not rotated

Paso 9: Ajustar el Tamaño de las Miniaturas con CSS

Establecer el tamaño de las miniaturas de acuerdo a las dimensiones que hemos calculado en el Paso 5.


Paso 10: Centrar las Miniaturas con CSS

Ahora mismo, nuestras miniaturas están posicionadas de forma relativa (desde la esquina superior izquierda).

thumbnail positioned in the top left

Queremos que nuestras miniaturas estén centradas horizontal y verticalmente dentro de la máscara.

thumbnail positioned in the center

Para lograr esto, usamos las siguientes reglas CSS:

Aquí tienes una descripción de lo que hemos hecho:

  • position:absolute - Esto posiciona la miniatura de forma absoluta dentro de la máscara de imagen
  • margin - Establecemos márgenes negativos que son exactamente la mitad de la altura y la anchura de la imagen (300x400), después establecemos las propiedades de nuestro posicionamiento a top y left lo cual empuja los elementos de nuevo a un centro perfecto.
thumbnails centered positioning

Paso 11: Rotación de la Miniatura con CSS

Vamos a usar la propiedad CSS3 transform para rotar nuestros elementos. Así que, nuestro CSS incluirá todos los prefijos para los navegadores. 

El CSS aquí es bastante sencillo. Simplemente hemos colocado nuestro ángulo de rotación entre paréntesis seguido por "deg".

En este ejemplo hemos usado un valor de rotación de 15, pero podrías poner un valor diferente ahí. Como hemos calculado los tamaños de nuestra máscara y miniatura adecuadamente, ¡hemos previsto espacio suficiente para una rotación completa de 360º! Una cifra positiva gira la imagen a la derecha, un valor negativo la gira a la izquierda.

thumbnails rotated

Paso 12: Efecto Hover Sobre la Imagen

Como efecto adicional, vamos a añadir una simple línea de CSS que cambia el color de nuestro borde cuando el usuario sitúa el cursor sobre la imagen.


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

Como pequeño extra, vamos a permitir al usuario introducir un valor en nuestro campo de introducción de valores que cambia el ángulo de rotación CSS. Así que primero, añadimos jQuery al final de nuestra página, justo antes de la etiqueta de cierre body junto con un enlace a nuestro script personalizado:


Paso 14: Preparar el Documento para jQuery

Configuremos ahora jQuery para cuando el documento esté preparado:


Paso 15: Función Inicial jQuery

Creamos una función para cualquier momento en el que nuestro botón "actualizar" sea pulsado.


Paso 16: Almacenar con jQuery el Actual Valor de Rotación

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

Este código encuentra el id de rotation_amount (el cual hemos asignado a input) y obtiene su actual valor. Si recuerdas, establecimos el atributo value inicial a 15 (lo mismo que en nuestro código CSS  para el ángulo de rotación).


Paso 17: Usar la Función jQuery isNaN()

Queremos hacer que el valor que introducen los usuarios sea el nuevo ángulo de rotación. Pero, queremos asegurarnos que el usuario no introduzca accidentalmente un valor no numérico. Aquí es donde la función javascript isNaN() es útil. isNaN() declara "no es un número". Esta función hace exactamente lo que su nombre implica: comprueba si el valor que le pasas "no es un número".

Así que, usaremos la función isNaN() y la pasaremos a nuestro valor de ángulo de rotación (según lo introduzca el usuario). Si no es un número, mostraremos un mensaje de error. 


Paso 18: Actualizar un Nuevo Ángulo de Rotación con jQuery

Si el nuevo valor introducido por el usuario no es un número, mostraremos un mensaje de error. Ahora usaremos una declaración else para cuando hayan introducido un valor numérico. Primero esconderemos el mensaje de error.

Como el ángulo de rotación está almacenado varias veces en nuestro CSS (debido a los varios prefijos de navegación) tenemos que actualizar TODOS esos valores con jQuery. Así que lo que haremos es almacenar la sintaxis del valor CSS en una variable (con el valor del nuevo ángulo). Esencialmente, estamos escribiendo rotate(15deg) y sustituyendo el valor '15' con el valor introducido por el usuario.

similar CSS values

Después creamos un objeto CSS con valores relacionados. Definimos cada propiedad de nuestro CSS (los prefijos del navegador para la transformación), después insertamos el valor como la variable que acabamos de definir.

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


Paso 19: Código Final jQuery

Este es el aspecto de todo nuestro jQuery: 


Conclusión

Espero que hayas aprendido algo, sobre todo a no limitarte con diseños no flexibles en Photoshop, ya que normalmente se puede evitar usando directamente técnicas CSS3 directamente en el navegador. ¡Gracias por seguir el tutorial!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.