es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo crear CSS puro en el efecto Hacer clic en el zoom de la imagen

CSS no tiene una pseudoclase para apuntar eventos de clic, y esto constituye uno de los mayores puntos débiles de los desarrolladores front-end. La pseudo-clase más cercana es :active que estiliza un elemento para el período de tiempo que un usuario presiona su mouse sobre él.

Sin embargo, este efecto es efímero: una vez que el usuario suelta el mouse, : :active ya no funciona. Necesitamos encontrar alguna otra forma de emular el evento click en CSS .

Esta publicación se ha escrito en respuesta a la solicitud de un lector, y explica cómo orientar el evento de clic con CSS puro en un caso de uso específico, zoom de imagen .

Puede ver el resultado final a continuación: una solución solo CSS para zoom de imagen al hacer clic .

Cuándo usar la solución CSS-Only

Antes de continuar, quiero decir que, para el zoom de imagen, recomiendo el método de solo CSS (que cambia las dimensiones de la imagen), solo cuando desee que una o varias imágenes tengan la función de zoom.

Para una galería adecuada, JavaScript proporciona más flexibilidad y eficiencia.

Técnicas de front-end que utilizaremos

Ahora que ha sido advertido, repasemos rápidamente las 3 técnicas clave que usaremos:

  1. los Etiqueta HTML que permite a los navegadores crear áreas enlazables sobre una imagen . Lea más en el elemento en mi publicación anterior.
  2. El atributo de usemap de uso de etiqueta, que conecta la imagen al mapa de imagen.
  3. La :target CSS :target que representa un elemento que se ha segmentado utilizando su selector de ID.
1. Crea la base de HTML

Primero, creemos la base HTML. En el siguiente código, agregamos una imagen para ampliarla y expandimos y cerramos los íconos de los botones para acercar y alejar.

Es importante tener una ID en la imagen para hacer zoom, y el botón Cerrar necesita ser un enlace que tenga el atributo href="#", explicaré por qué más adelante en la publicación.

2. Agregue el CSS

Inicialmente, el ícono Cerrar no debería mostrarse . Las propiedades de position, margin-, left e bottom colocan los íconos de Expandir y Cerrar donde queremos que estén, en la esquina superior derecha de la imagen.

Los pointer-events: none; la regla permite que los eventos del mouse pasen a través del icono Expandir y lleguen a la imagen .

 .img {altura: 150px; ancho: 200px; } .close {background-image: url ("Close-icon.png"); background-repeat: no-repeat; abajo: 418px; pantalla: ninguna; altura: 32px; izquierda: 462px; margin-top: -32px; posición: relativa; ancho: 32px; } .expand {inferior: 125px; margin-left: -32px; margen-derecha: 16px; puntero-eventos: ninguno; posición: relativa; } 
3. Agregue el mapa de imagen

En el mapa de la imagen, el área en la que se puede hacer clic debe estar en la esquina superior derecha de la imagen, justo debajo del ícono Expandir, y sobre su tamaño. Colocar el elemento antes de la primera etiqueta en el HTML. Vincularemos la imagen al mapa en el próximo paso.

En el bloque de código anterior, el etiqueta define la forma, el tamaño y el URI de un área enlazable dentro de un mapa de imagen. Para una forma rectangular, el atributo de shape toma el valor rect, y los cuatro valores del atributo coords representan la distancia en píxeles entre:

  1. el borde izquierdo de la imagen y el borde izquierdo del área de enlace
  2. el borde superior de la imagen y el borde superior del área de enlace
  3. el borde izquierdo de la imagen y el borde derecho del área de enlace
  4. el borde superior de la imagen y el borde inferior del área de enlace

El valor del atributo href tiene que ser el identificador hash de la imagen (esta es la razón por la cual la imagen debe tener un id .).

4. Enlace la imagen al Mapa de imagen

Agregue el atributo de usemap a la imagen para usemap al mapa de imagen . Su valor debe ser la representación hash del atributo de name del etiqueta que agregamos en el Paso 3.

 Cómo funciona el botón Cerrar 

Como el botón Cerrar se agregó como una imagen de fondo (Paso 2), y en realidad es una etiqueta con el atributo href=# (Paso 1), cuando se hace clic en él, elimina el identificador de fragmento del final del URI. Por lo tanto, también elimina la pseudo-clase de :target de la imagen y la imagen vuelve a su tamaño anterior .

Ahora se ha completado el efecto de zoom con solo CSS, revise la demostración a continuación o lea un poco más sobre la teoría detrás de los mapas de imágenes en la siguiente sección.

Información de fondo: por qué y no?

A estas alturas, ciertamente comprende que lo más importante para que funcione esta solución de solo CSS es apuntar a la imagen utilizando el atributo href="#imgid", que también podría hacerse utilizando la etiqueta en lugar del mapa de imagen.

Esto puede ser cierto, sin embargo cuando se trata de imágenes, usando el elemento es más apropiado. Es aún más importante que cuando desee que el zoom suceda al hacer clic en un área más grande en la imagen en lugar de solo en el ícono Expandir, te da una solución fácil.

El valor default para el atributo de shape crea un área rectangular enlazable que cubre toda la imagen . Si fuera a utilizar en su lugar, tendría que codificarlo para cubrir la imagen, y también podría tener que usar un elemento contenedor para el mismo propósito.

Para hablar también sobre las advertencias de esta solución, la propiedad CSS de pointer-events (que usamos en el Paso 2) solo es compatible con Internet Explorer a partir de la versión 11 .

Para admitir navegadores IE antes de eso, es posible que desee utilizar en lugar de , o haga que la imagen se amplíe haciendo clic en cualquier parte de ella (en este caso, no será necesario el ícono de Expandir).

55 temas de WordPress frescos y de alta calidad

55 temas de WordPress frescos y de alta calidad

WordPress es el sistema de gestión de contenido más confiable y solicitado, y hay una buena razón para eso. Ofrece una variedad de características que cualquier persona puede administrar fácilmente el contenido de su sitio web a través de esta plataforma. Esto es especialmente cierto para los temas de WordPress de 2017, ya que hay tantas características y funcionalidades que pueden hacer que su sitio web se destaque en muy poco tiempo .Pero c

(Consejos de tecnología y diseño)

35 nombres de enrutador WiFi inusual que necesita ver

35 nombres de enrutador WiFi inusual que necesita ver

La respuesta a la mayoría de sus problemas de WiFi radica en un enrutador WiFi, sin embargo, una de las partes más interesantes es nombrar el enrutador Wifi. Es tan obvio y aburrido llamar al enrutador wifi de su hogar 'home123' o homewifi. Algunas personas creativas intentan hacer que sus nombres de enrutador wifi sean graciosos y divertidos .¿

(Consejos de tecnología y diseño)