Con nombre Wolf sitio con CSS Grid y Flex, el proyecto número 18 del proyecto personal #100sitioswebchallenge.
Inspirado en el video de Brad Traversy CSS Grid Layout With Image Span y el sitio Multiple.
Puedes visualizar el sitio en: CSS Grid Wolf
DESAFÍOS
He estado jugando con la propiedad de CSS:
background-attachment: fixed;
La cual hace posible que una imagen se pueda dividir en diferentes panales de grid, dependiendo de cómo los quiera manipular.
Estuve investigando un poco más de este efecto y veía como en el pasado algunos diseñadores tenían que cortar imagen por imagen para lograr este efecto.
El efecto de ver una sola imagen en secciones.
No mentiré que aún sigo experimentando con esta propiedad, me asombra cómo un a sola línea puede modificar y darle forma a tu proyecto.
PROCESO
Este proyecto en esta versión fue muy sencilla, por lo que no hice la maquetación en Figma. Brinqué directamente a VS Code.
Usé la tipografía Roboto de Google Fonts y el ícono del lobo desde IconFinder.
HTML y CSS
Empezando la maquetación con HTML, la imagen sólo se mostraría como una imagen de fondo. Pero al usar la propiedad CSS:
background-attachment: fixed;
Es cuando la verdadera magia sucede, porque inmediatamente la imagen del lobo se reacomoda a través de todas las ventas del grid.
Aquí puedes ver el sitio antes y después de usar la propiedad que menciono.
Así se ve el sitio final, con un poco de efectos al pasar el cursor.
Sitio web responsivo
Y aquí el sitio de manera responsiva para que se pueda observar en diferentes aparatos móviles.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: CSS Grid Wolf
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (Grid, Flex)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Deja tus comentarios y sugerencias para el proyecto Wolf sitio con CSS Grid y Flex
