Shining Bright: The Starry CSS Background That Lit Up My UI

In this case, I think a video says a lot more than a thousand words

Hey there, fellow cosmic voyagers of the web! Today, I’m thrilled to unveil one of the dazzling secrets behind my recent web UI triumph — a starry background that’s not just eye-catching but was created entirely with the magic of CSS (or SCSS, to be precise), If you fear javascript, no need to worry, this is completely JS-free.

The Starry Background:

Intriguingly, the starry background was a creative addition to my UI project. It wasn’t part of the original design, but sometimes, the best ideas come to us in the midst of creation. I decided to infuse a touch of celestial wonder into my work, inspired by the stars already present in the design. The result? A mesmerizing starry canvas that elevates the entire user experience.

Here’s a sneak peek at the code snippet that brought this cosmic spectacle to life:

<div class="star-layers">
 <div class="star-layer" id="stars"></div>
 <div class="star-layer" id="stars2"></div>
 <div class="star-layer" id="stars3"></div>
</div>

But it doesn’t stop there; let’s dive deeper into the enchanting world of CSS magic.

Explore the Live Code:

For those of you who want to see this celestial symphony in action, I invite you to explore the live version on CodePen. Here’s the link: Live Starry Background.

Take a moment to tinker with the code, adjust parameters, and experience the magic firsthand.

The Code Magic:

Let’s break down the enchanting code that powers this starry wonderland. At its core, this starry background is driven by CSS keyframe animations and creative box-shadow manipulation.

The basic idea is, have different layers (for parallax effect), each layer moving slightly different. In each layer, we have the little white dots (the stars) scattered randomly around the viewport, and the layers move upwards. That is it.

Here’s a glimpse of the CSS lines that made it all possible:

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

This keyframe animation, animStar, is responsible for animating the stars' movement across the night sky. By transitioning the stars' vertical position from their starting point to a higher negative value, it creates the illusion of stars gently floating overhead. Without the animation, the whole thing would basically look like some random looking polka dot canvas.

But the real wizardry lies in the stars themselves. To generate the stars, we employed a nifty SCSS function that creates random box-shadow values for stars of varying sizes. This dynamic approach gives our starry background a natural, organic appearance.

// Function to generate multiple box-shadow values for stars
@function multiple-box-shadow($number_of_stars) {
  $value: "#{random(2000)}px #{random(2000)}px #FFF"; // Initial shadow
  @for $i from 2 through $number_of_stars {
    $value: "#{$value}, #{random(2000)}px #{random(2000)}px #FFF"; // Add more shadows
  }
  @return unquote($value); // Return the concatenated value
}

This is what I would say powers the whole thing, you can create multiple box shadows for an element, giving them different colors and positions, that is the core of the whole thing.

We create three different layers of stars, with different sizes and different animation durations making the bigger starts look heavier because they take longer to reach the top.

$shadows-small: multiple-box-shadow(700); // Small stars
$shadows-medium: multiple-box-shadow(200); // Medium stars
$shadows-big: multiple-box-shadow(100); // Big stars

#stars {
    box-shadow: $shadows-small; // Apply small star shadows
    animation: animStar 50s linear infinite;
    &::after {
      box-shadow: $shadows-small; // Apply small star shadows to pseudo-element
    }
  }

  #stars2 {
    width: 2px;
    height: 2px;
    box-shadow: $shadows-medium; // Apply medium star shadows
    animation: animStar 100s linear infinite;
    &::after {
      width: 2px;
      height: 2px;
      box-shadow: $shadows-medium; // Apply medium star shadows to pseudo-element
    }
  }
  #stars3 {
    width: 3px;
    height: 3px;
    box-shadow: $shadows-big; // Apply big star shadows
    animation: animStar 150s linear infinite;
    &::after {
      width: 3px;
      height: 3px;
      box-shadow: $shadows-big; // Apply big star shadows to pseudo-element
    }
  }

The Cosmic Aesthetic:

The starry background not only adds a captivating visual element but also blends seamlessly with the overall aesthetics of the project. It’s a testament to the power of creativity and the limitless possibilities of web development and CSS.

Conclusion:

This master piece was inspired by a SASS version I found while tinkering around code pen. You can see that on this code pen.

As I unveil this cosmic gem, I invite you to explore the stellar world of CSS and its potential to transform the ordinary into the extraordinary. Stay tuned for more deep dives into the technical intricacies of this project.

So, fellow star gazers, fasten your seatbelts as we embark on this journey through the cosmos of web development. Together, we’ll continue to push the boundaries of what’s possible in the realm of UI design and CSS sorcery.