En este artículo os voy a enseñar a crear una galería de imágenes en Html5 y CSS3 de una forma sencilla y rápida.
Una de las principales tareas a la hora de crear una página web es disponer de una galería de imágenes para mostrar nuestros trabajos o servicios.
Esta tarea que en principio parece sencillo puede complicarse sobre todo a la hora de que se muestren de formar responsiva, es decir, que se adapten a todos los dispositivos.
Para ello vamos a trabajar con HTML5 y CSS3 sin necesidad de implementar jQuery.
En primer lugar vamos a comenzar con nuestro archivo HTML5 para ello vamos a crear capa para cada fotografía y posteriormente agregaremos las imágenes.
El tamaño no debe de preocuparte porque ya nos encargaremos a la hora de aplicarle los estilos de configurar el tamaño de cada ventana.
Vamos a explicar un poco el código para que no te resulte muy complicado y sobre todo para que entiendas su funcionamiento.
Lo que hemos hecho ha sido crear un conjunto de cuadrículas o grids donde irán nuestras imágenes o fotografías acompañadas de un título y una descripción.
Las imágenes puedes utilizarlas de cualquier banco de imágenes gratuitos, o utilizar placeholder.com que nos permite crear imagenes de diferentes tamaños.
Muy importante no olvidar enlazar el archivo .css con los estilos de nuestra galería que podrás modificar a tu antojo.
En el CSS vamos a agregar los diferentes estilos a nuestra galería de imágenes en Html5 y Css3.
Destacar principalmente que cada vez que pasamos el ratón por cada una de las imágenes, éstas saldrán desde diferentes posiciones que tu puedes elegir.
Para este ejemplo he usado las más comunes.
Para que nuestra galería sea responsive utilizamos @media para que se adaptate a las diferentes resoluciones de pantalla.
Así mismo y como ya os comenté anteriormente nos encargamos de definir el tamaño de nuestra cuadrícula así como la posición en la que aparece la animación del título y la descripción.
Y con esto ya tenemos configurada y creada nuestra galería de imágenes en html5 y css3. ¿Fácil verdad?
Espero que te hay resultado de gran utilidad el crear una galería con fotografías en html y sobre todo que aprendas el código y lo modifiques para adaptarlo a tus necesidades. ¡Gracia!
Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…
Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…
¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……
¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…
Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…
¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios
se puede hacer sin que te lleve la imagen a esa pagina??