https://github.com/adriancarriger/frosted-glass

❄️ Add a live frosted glass blur effect over any type of web content, including text.
https://github.com/adriancarriger/frosted-glass

blur frosted-glass stenciljs web-components

Last synced: about 1 month ago
JSON representation

❄️ Add a live frosted glass blur effect over any type of web content, including text.

• Host: GitHub
• URL: https://github.com/adriancarriger/frosted-glass
• Owner: adriancarriger
• License: mit
• Archived: true
• Created: 2017-11-21T18:43:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-29T21:54:14.000Z (over 4 years ago)
• Last Synced: 2024-10-14T06:52:16.068Z (about 2 months ago)
• Topics: blur, frosted-glass, stenciljs, web-components
• Language: HTML
• Homepage: https://codesandbox.io/s/github/adriancarriger/frosted-glass/tree/master/demos/vanilla/navbar
• Size: 21.5 MB
• Stars: 64
• Watchers: 4
• Forks: 6
• Open Issues: 12
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-web-effect - frosted-glass - Add a live frosted glass blur effect over any type of web content, including text. (🚀 A series of exquisite and compact web page cool effects / Other Effect)
• awesome-web-effect - frosted-glass - Add a live frosted glass blur effect over any type of web content, including text. (🚀 A series of exquisite and compact web page cool effects / Other Effect)

README

        
# Frosted Glass [![npm version](https://badge.fury.io/js/frosted-glass.svg)](https://badge.fury.io/js/frosted-glass)

❄️ Add a live frosted glass blur effect over any type of web content, including text.

️️

[![Build Status](https://img.shields.io/circleci/project/github/adriancarriger/frosted-glass/master.svg?maxAge=60)](https://circleci.com/gh/adriancarriger/frosted-glass)

[![Codecov](https://img.shields.io/codecov/c/github/adriancarriger/frosted-glass/master.svg?maxAge=60)](https://codecov.io/gh/adriancarriger/frosted-glass)

[![Dependency Status](https://img.shields.io/david/adriancarriger/frosted-glass.svg?maxAge=60)](https://david-dm.org/adriancarriger/frosted-glass)

[![devDependency Status](https://img.shields.io/david/dev/adriancarriger/frosted-glass.svg?maxAge=60)](https://david-dm.org/adriancarriger/frosted-glass?type=dev)

[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://github.com/ionic-team/stencil)

## Demos



  





  





  





  



[![Navbar blur example gif](https://raw.githubusercontent.com/adriancarriger/frosted-glass/master/images/navbar-blur.gif)](https://plnkr.co/edit/CgAaJS?p=preview)

## Install

```bash

npm install frosted-glass --save

```

## Setup

- Add a script tag in the head of your index.html

```html

```

## Usage

- Add a `frosted-glass-container` element

- Add a child `frosted-glass` element that should have a blur effect applied

```html

  
Welcome!

  

    
Nav content

  


```

## Optional properties

### `frosted-glass`

- `blur-amount` - specifies the blur amount applied

- `overlay-color` - adds an overlay on top of the blur

### `frosted-glass-container`

- `stretch` - ensures that edges get blurred by [stretching the container dimentions by 5%](https://github.com/adriancarriger/frosted-glass/blob/master/src/components/frosted-glass-container/frosted-glass-container.scss#L5-L7)

#### Example

```html

  

```

## License

frosted-glass is licensed under the MIT Open Source license.

For more information, see the [LICENSE](LICENSE) file in this repository.