Skip to content

LunarLogic/auroral

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Demo

You can test all effects on the Auroral demo page.

#How to use

  1. Include a container for a background inside a wanted element. It needs to have one of the auroral classes.

    <section class="your-container">
      <div class="auroral-northern"></div>
    </section>
  2. In the head of your html file, add auroral stylesheet. Of course, you can add minified version instead.

    <head>
      <link rel="stylesheet" type="text/css" href="css/auroral.css"/>
    </head>

    Or:

    <head>
      <link rel="stylesheet" type="text/css" href="css/auroral.min.css"/>
    </head>
  3. Make sure, that your container (the one in which you put the auroral container) has these rules in 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:

  <section class="your-container">
    <div class="auroral-northern"></div>
    <div class="auroral-stars"></div>
  </section>

If you know how to use Sass you can play with the $star-number variable, to make sure there is a right amount of them! It sits in _stars.scss partial.

#Backgrounds

Currently available backgrounds (class names to be used in your container):

License

The library is licensed under The MIT License (MIT).

Go to Lunar Logic website to learn more about us and our work.

About

Animated background gradients with pure CSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published