Este es un sitio web con efecto glass usando sólo HTML y CSS para lograrlo. El proyecto 24 del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Land A
DESAFÍOS
Realmente no hice ningún truco em específico si es lo que se necesita para lograr el efecto de glass. Sólo jugué con la transparencia del color del background y agregar una imagen como fondo para que se notara un poco el efecto.
Esta es la única línea para lograrlo
background-color: rgba(255, 255, 255, 0.7);
PROCESO
Paleta de colores y estilos
Paleta de colores: FFFFFF 000000
Tipografía:
Mockup (Bosquejo)
Antes de iniciar cualquier proyecto primero hago la maquetación en Figma. Sobre todo cuando sólo trabajo con HTML y CSS
HTML y CSS
Este es el proceso desde la maquetación con HTML hasta la creación de estilos con CSS.
Sitio web responsivo
Y por último me aseguro de usar queries para lograr el sitio responsivo.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Land A
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Deja tus comentarios para el sitio con efecto glass usando HTML y CSS.
