Night sky with twinkling stars

Night sky with twinkling stars

19 244045
Night sky with twinkling stars

Night sky with twinkling stars

Have you noticed the beauty of the night sky? When lightly visible clouds slowly floating through the sky, and the stars twinkling behind them in the night sky. I think it’s a great show, so I decided to implement it by means of the Web technologies, without using javascript, all in pure CSS3. This article is intended more for beginners, but will also be useful for self-confident developers. First of all, I recommend you look at the demo, it will clearly show you that we’re going to do.

Preview

Night sky with twinkling stars

Live Demo 1
Live Demo 2
Live Demo 3
Live Demo 4

Step 1. HTML

Our composition consists of three basic elements: stars, twinkling and clouds.

index.html

    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="clouds"></div>

Step 2. CSS

Before I give all the styles I would like to explain the logic. As you might have guessed – floating clouds is the usual picture, just a cloud is implemented as a semi-transparent object that moves around the screen using CSS3 animation (with keyframes). Stars – also a constant object, it is the background to our scene. The time has come to find out – how to make twinkling stars. Speaking the truth, this is a simple trick again. To achieve this effect, it was necessary to add another moving image between stars and clouds (semi-transparent image with black spots, which cover the stars – unseen clouds).

style.css

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
.stars {
  background:#000 url(images/stars.png) repeat top center;
  z-index:0;
}
.twinkling{
  background:transparent url(images/twinkling.png) repeat top center;
  z-index:1;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}
.clouds{
    background:transparent url(images/clouds.png) repeat top center;
    z-index:3;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}

That’s it. Everything is ready now. In the package, you can find several versions of the images of clouds and stars – you can experiment.


Live Demo 1
Live Demo 2
Live Demo 3
Live Demo 4

[sociallocker]

download the sources

[/sociallocker]


Conclusion

That’s all for today, thanks for your patient attention, and if you really like what we did today – share it with all your friends in your social networks using the form below.

SIMILAR ARTICLES


19 COMMENTS

  1. Yeah, like it and would love to implement it on one of my sites, but it’s pushing everything down.

    I’d like to time them to appear at nigh only and to have them in the background.

    I’ve tried to z-position it back to no avail.

    Thanks!

    • Hi Dorian,
      Yes, don’t forget, that this is full-screen demo, if you want to use it as a part of your website, I think that you should resize it in this case. If you need to be displayed only in night time, you should generate this code in night time

  2. This is great! But, doesn’t seem to work in Safari on a Mac. Is there something I might be missing, or something else in my CSS that is messing with it? Thanks again for the twinkling stars though…it looks awesome!

    • Hi Walter,
      You should check if the Safari on Mac is webkit-based, or it uses another base (prefix). Because it works perfect in Safari for Windows

  3. Hello there!

    My best friend love this effect, and she want to have it in her page. I try to help her but i’m too novice to figure out how :( would You be so kind to help me with a step by step instuction? Please :) i cant find in this page any package to download… a simply copy/paste won’t be enought i guess.

    All the best

    Charlie

    • Hi Charlie,
      The download form is in the end of our article. Download the package – it will help you understand how it works.

  4. Hi!

    little step forward. now i have the twinkle star background, but i have a long text above it (the page content) what need to scroll down to read it and the stars scrolls as well. how can i fix the bg effect to not able to scroll?

    Thanks

    Charlie ;)

    • Hi Charlie,
      You just need to draw the rest of your code before or after the code of twinkling stars (with clouds).
      Don’t forget to apply ‘position:relative’ to your internal code (you also may consider to add z-index param)

  5. Hi Andrey,

    This is awesome.. Being a non-scripting guy I’m very much impressed.

    Actually I was searching for a script that can float ballons/stars in the screen as soon as some one executes a script and say happy birthday.. Yes I’m thinking to present a nice collage of pics with twinkling stars, floating balloons etc.,

    Also, how to execute the source code after downloading

  6. wow very nice demo..
    works fine, cant seem to get clouds to #remove in css, or use on for main page..
    id like this demo to add a slow-motion in reverse,.. of stars twinkling..
    But you guessed it wont work on main page with any content.. So that defeats my intended use. Think due too many layers overlap, over images.. Once they re-sequence stars should move opposite direction as clouds go, very slow.., and as time moves on say my location they would also.. maybe might mess with later. Might even try a milky way galaxy demo next time, could make it out of 3600.png star layers, and have them revolve in sequence or #random and turn off clouds. Coders always welcome to help another..THx again peace n love

    • Hello,
      It can work with pages with some internal content. You just need to organize your html code properly (for example – put the twinkling stars above or below your main content).

  7. Thanks for the tutorial, will implement it in my website.
    The tip of setting position to relative helped me a lot.

Leave a Reply