Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LunarLogic/auroral
Animated background gradients with pure CSS
https://github.com/LunarLogic/auroral
Last synced: 22 days ago
JSON representation
Animated background gradients with pure CSS
- Host: GitHub
- URL: https://github.com/LunarLogic/auroral
- Owner: LunarLogic
- License: mit
- Created: 2016-07-26T13:56:01.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-10T15:00:18.000Z (over 6 years ago)
- Last Synced: 2024-04-16T09:07:51.681Z (2 months ago)
- Language: CSS
- Size: 39.1 KB
- Stars: 277
- Watchers: 20
- Forks: 20
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-css-only - Auroral - Animated background gradients with pure CSS. (Uncategorized / Uncategorized)
README
# Auroral - Animated background gradients
Auroral is a collection of animated background gradients, that can be used almost anywhere. They are built with pure CSS. To learn how it works, [read the article](http://blog.lunarlogic.io/2016/let-your-website-cast-the-northern-lights-auroral/).
# Demo
You can test all effects on the [Auroral demo page](https://lunarlogic.github.io/auroral/).
#How to use
1. Include a container for a background inside a wanted element. It needs to have [one of the auroral classes](#backgrounds).
```html
```
2. In the head of your html file, add [auroral stylesheet](https://github.com/LunarLogic/auroral/blob/master/css/auroral.css). Of course, you can add [minified version](https://github.com/LunarLogic/auroral/blob/master/min/style.css.min) instead.
```html
```
Or:
```html
```
3. Make sure, that your container (the one in which you put the auroral container) has these rules in CSS:
```css
.your-container {
display: block; // if it is not a block element
position: relative;
overflow: hidden;
}
```
# Stars!
What is a night sky without the stars? Add them by appending an element with the ***auroral-stars*** class right after the auroral container:
```html
```
If you know how to use [Sass](http://sass-lang.com/) you can play with the ***$star-number*** variable, to make sure there is a right amount of them! It sits in [_stars.scss partial](https://github.com/LunarLogic/auroral/blob/master/scss/_stars.scss).
#Backgrounds
Currently available backgrounds (class names to be used in your container):
- auroral-northern (Northern Lights style),
- auroral-northern-intense ([Intense Northern Lights](http://mynorthwest.com/wp-content/uploads/cms/15/1540/154044.jpg)),
- auroral-northern-dimmed ([Delicate Northern Lights](http://www.seattletimes.com/nation-world/photos-of-the-day-march-7-2016/)),
- auroral-northern-dusk (Delicate Northern Lights spin-off),
- auroral-northern-warm ([Warm Northern Lights](http://cdn.images.express.co.uk/img/dynamic/151/590x/Northern-Lights-586620.jpg)),
- auroral-agrabah (Inspired by the colors of the night sky in [Aladdin](http://www.imdb.com/title/tt0103639/) :D).
## License
The library is [licensed](https://github.com/LunarLogic/starability/blob/master/LICENSE) under [The MIT License (MIT)](http://choosealicense.com/licenses/mit/).
Go to [Lunar Logic website](http://www.lunarlogic.io/) to learn more [about us](http://www.lunarlogic.io/company) and [our work](http://www.lunarlogic.io/portfolio).