[Solved] Pure CSS static starfield [closed]

by


As an exercise in “let’s see what happens if…” the following code was directly stolen from here and modified slightly to be static. The result is predictable: a basic, repetitive star field.

<html>
 <head>
  <title>Testing a starfield</title>
  <style>
#space, .stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}

body {
  background: #000;
}
  </style>
 </head>
 <body>
  <div id="space">
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
   <div class="stars"></div>
  </div>
 </body>
</html>

Obviously, the functional part of this CSS is building up the background-image in pieces made up of radial-gradient results.

0

solved Pure CSS static starfield [closed]