Share
¿Alguna vez has visto esas miniaturas que, cuando se ciernen, revelan un ícono en el medio para sugerir lo que está por suceder? ¿Alguna vez te has preguntado cómo se logra el efecto? ¿Alguna vez lo intentó, pero no logró que los íconos estuvieran en el centro, especialmente cuando sus miniaturas no tenían dimensiones fijas? Entonces este consejo rápido es para ti ...
Estoy hablando de miniaturas en las que puede hacer clic para activar una caja de luz, o tal vez una miniatura que se vincula a una pieza de la cartera. En cualquier caso, es una gran adición a la facilidad de uso de su sitio si puede sugerir qué sucederá cuando alguien se cierne sobre una miniatura..
Este Consejo rápido está dirigido a aquellos de ustedes que tienen un entendimiento de CSS, se han dado cuenta más o menos de qué se trata el posicionamiento y están buscando la excusa perfecta para ponerlo en uso ...
Rápidamente juntemos algunos documentos para demostrar de qué estoy hablando. En primer lugar, nuestro html:
Hover Demo Thingy
Luego comenzaremos nuestro archivo styles.css con algunas reglas de reinicio. Es posible que tengas tus propios métodos de reinicio preferidos, pero por el momento he usado Eric Meyer para iniciar nuestro css:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: ninguna (dominio público) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menu, nav, salida, ruby, sección, resumen, tiempo, marca, audio, video margen: 0; relleno: 0; borde: 0; tamaño de letra: 100%; fuente: heredar; alineación vertical: línea de base; / * Reinicio de la función de visualización de HTML5 para navegadores antiguos * / artículo, aparte, detalles, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul estilo de lista: ninguno; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
A continuación, para dar a nuestra página un poco de estructura de diseño, aquí hay tres columnas, dentro de un contenedor:
Y ahora, por supuesto, necesitamos agregar algunos estilos para que realmente se comporten como columnas dentro de un envoltorio flexible:
/ * nuestros estilos de demostración * / html, body background: # 29282e; .wrapper ancho: 90%; ancho máximo: 960px; margen: 30px auto; .col ancho: 27%; relleno: 0 3%; flotador izquierdo;
Así que ahí los tenemos; Tres columnas, cada una de 27% de ancho, con relleno a la izquierda y derecha de 3%, y todas ellas flotando ordenadamente en una fila. Nuestra envoltura es muy flexible al 90% del ancho de la ventana del navegador (hasta un máximo de 960px). También le hemos dado a nuestro cuerpo y html un bonito color de fondo oscuro.
Es hora de agregar algunas imágenes a la mezcla. He usado algunos fondos de pantalla de la colección de ciudades más inspiradoras de Atelier Olschinsky (consígalos en kuvva.com para su escritorio ...)
Cada imagen va a estar contenida dentro de un elemento de figura HTML5, pero envuelta directamente por un ancla para vincularla con algo (ya sea una versión ampliada lightbox, un sitio externo, etc.):
Así que colocaremos tres de nuestras figuras, una para cada miniatura de imagen, dentro de una columna propia.
Estas imágenes son demasiado grandes, por lo que para evitar que salgan de sus columnas, démosles un ancho máximo aplicando una regla de imagen fluida clásica:
figura img ancho máximo: 100%;
Un buen comienzo. Tenemos nuestro diseño fluido con tres columnas, cada una con una imagen que se enlaza en algún lugar.
Dejemos claro a los usuarios que hacer clic en las imágenes hace algo. Agregaremos un estado de desplazamiento, reduciendo la opacidad de la miniatura:
figura a: flotar img opacidad: 0.4; filtro: alfa (opacidad = 40); / * IE6-IE8 * /
Ahora para el icono de todos los importantes. Queremos que un ícono, ubicado en el centro de la miniatura, se haga visible cuando la imagen esté sobre el mismo. Puede ser el símbolo que desee, pero debería indicar al usuario lo que va a suceder. En esta demostración, por razones de facilidad, solo voy a usar un + Iniciar sesión para sugerir que se activará una versión más grande..
Lo agregaremos a la mezcla usando el pseudo elemento. :antes de:
a.enlarge: antes de contenido: "+"; bloqueo de pantalla; tamaño de fuente: 40px; línea-altura: 1em; altura: 1em; ancho: 1em; text-align: center; color: #fff; font-weight: negrita; posición: absoluta; índice z: 100;
Hemos colocado nuestro + como generado: antes del elemento, parte del ancla que rodea la imagen. Estamos utilizando la clase "ampliar" para identificar los anclajes que necesitarán +. Si necesitamos otro símbolo, podemos usar otro nombre de clase.
Para empezar necesitamos dictar el contenido (nuestro + carácter) y estado que es un elemento de nivel de bloque.
Importante! Las siguientes reglas entonces determinan las dimensiones. Hemos dicho que el tamaño de fuente es 40px. Luego dijimos que la altura de la línea, la altura y el ancho son todos iguales a 1em (40px por lo tanto). Esto ha creado un cuadrado de 40x40px. Al establecer la alineación del texto en el centro y la altura de la línea en 1em, garantía que el personaje está sentado justo en el centro vertical y horizontal de nuestra plaza.
Las siguientes reglas importantes son el posicionamiento absoluto (0px, 0px por defecto) y el índice z que determina el orden de apilamiento de nuestros elementos posicionados. Al establecer esto en 100, podemos asegurarnos de que nuestros otros elementos se sientan encima de él. Vamos a hacer eso ahora ...
figura img ancho máximo: 100%; posición: relativa; índice z: 900; figura una posición: relativa; bloqueo de pantalla; línea altura: 0px; texto-decoración: ninguno;
Aquí nos hemos asegurado de que las etiquetas img se encuentren sobre el + los iconos estableciendo el índice z más alto que 100. Para que esto tenga efecto, debemos establecer un tipo de posicionamiento ("relativo" en este caso). Nuestro ancla también tiene posición: relativo que significa el + El icono ahora está absolutamente posicionado contra él..
También notará algunos otros estilos agregados al ancla. Lo hicimos mostrar como un bloque, eliminamos cualquier decoración de subrayado y le dimos una altura de línea de 0px. La altura de la línea es importante y, si no se restablece, puede manifestarse como un relleno adicional en la parte inferior del elemento. Ahora nos hemos asegurado de que el anclaje se ajuste perfectamente a la imagen.
Nuestros íconos siempre están presentes, pero solo se hacen visibles cuando la imagen que los cubre está sobre.
En este momento, nuestros íconos se ubican por defecto en la parte superior izquierda de nuestros anclajes. Los necesitamos en el centro de las miniaturas, independientemente de qué tan grandes sean las miniaturas. Luego, posicionémoslos 50% desde la izquierda y 50% desde la parte superior. Trabajo hecho, a la derecha?
a.enlarge: antes de contenido: "+"; bloqueo de pantalla; tamaño de fuente: 40px; línea-altura: 1em; altura: 1em; ancho: 1em; text-align: center; color: #fff; font-weight: negrita; posición: absoluta; superior: 50%; izquierda: 50%; índice z: 100;
Hmm Realmente no. El icono no está cerca del centro de la miniatura ... Eso se debe a que los elementos están alineados en relación con su esquina superior izquierda. Mirar de nuevo:
Para compensar el posicionamiento, tenemos que desplazar la mitad de su altura hacia arriba y la mitad de su ancho a la izquierda. Usamos ems antes para determinar las dimensiones (1em = 40px), así que ahora usemos 0.5em (la mitad del ancho del cuadrado) para hacer el cambio. De esta manera, independientemente de cómo cambiemos el tamaño de fuente a, todas las mediciones serán proporcionales. Gracias a Gabri por señalar el uso de ems!
a.enlarge: antes de contenido: "+"; bloqueo de pantalla; tamaño de fuente: 40px; línea-altura: 1em; altura: 1em; ancho: 1em; text-align: center; color: #fff; font-weight: negrita; posición: absoluta; superior: 50%; izquierda: 50%; índice z: 100; margen: -0.5em 0 0 -0.5em;
Para ello aplicamos un margen negativo. -0.5em en la parte superior y en la izquierda hará el trabajo. Piense en ello como haber creado un vacío, en el que nuestro elemento es aspirado.
¡Bingo! Nuestro + El icono está perfectamente posicionado en el centro de nuestra miniatura. Intenta redimensionar el navegador, se mantendrá exactamente en el centro..
Hay bolsas de potencial para una técnica como esta:
Para los experimentados CSS, este es un truco muy sencillo, pero si nunca ha considerado posicionarse así, espero que este Consejo rápido haya sido útil..
Accentsconagua
