https://github.com/marfullsen/modal-with-aero-effect

Diseño CSS de una ventana con estilo Aero (Windows 7).
https://github.com/marfullsen/modal-with-aero-effect

aero css textures transparency transparent w7

Last synced: 4 months ago
JSON representation

Diseño CSS de una ventana con estilo Aero (Windows 7).

• Host: GitHub
• URL: https://github.com/marfullsen/modal-with-aero-effect
• Owner: Marfullsen
• Created: 2021-04-10T17:18:18.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-19T01:01:43.000Z (over 3 years ago)
• Last Synced: 2025-01-10T05:36:30.432Z (5 months ago)
• Topics: aero, css, textures, transparency, transparent, w7
• Language: HTML
• Homepage: https://marfullsen.github.io/modal-with-aero-effect/
• Size: 192 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.MD

Awesome Lists containing this project

README

        
# [Modal con efecto Aero](https://marfullsen.github.io/modal-with-aero-effect/)

[![PureCss](https://img.shields.io/badge/Vanilla-CSS-yellow.svg)]()

[![textiuras](https://img.shields.io/badge/Texturas-CSS-blue.svg)](https://github.com/Marfullsen/texturas-css)

[![Screenshot](./captura-001.png)](https://github.com/Marfullsen/bloc-de-notas-aero-effect/)

## ¿Qué es?

Esto es una [página estática](https://marfullsen.github.io/modal-with-aero-effect/) con un _modal_ que recrea el efecto Aero de Windows 7.

## ¿Qué significa _modal_?

Un _modal_ es una ventana emergente que aparece encima del contenido de una página web.

Desde el sitio [W3Schools](https://www.w3schools.com/w3css/w3css_modal.asp):

> _A modal is a dialog box/popup window that is displayed on top of the current page._

## ¿Cómo se logró hacer cada cosa?

La página se compone de tres elementos:

- Efecto Aero hecho con 

    - Color RGBA con transparencia;

    - Filtro de efecto borroso (en inglés *blur*);

- Fondo con textura y gradiente de dos colores.

- Los íconos de los botones rojo, amarillo y verde son de [Font Awesome](https://fontawesome.com/).

## Creditos.

Gracias a [tutsplus](https://webdesign.tutsplus.com/es/tutorials/how-to-create-a-frosted-glass-effect-in-css--cms-32535) por los conocimientos para crear el efecto Aero

Gracias a [transparenttextures](https://www.transparenttextures.com/) por las increíbles texturas.

Gracias a [MyColor.Space](https://mycolor.space/gradient) por la gradiente.