Sitio con efecto glass usando sólo HTML y CSS

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.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...