#dailycssimages 46 - Your Choice -- Spaaaace!

dailycssimages-46-your-choice-spaaaace.markdown

#dailycssimages 46 - Your Choice -- Spaaaace!

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<h1>"There wouldn't be a sky full of stars if we were all meant to wish on the same one."</h1>
<h2>-Frances Clark</h2>

<div id="wrap">
  <div class="starfield small">
    <div class="starfield__stars"></div>
    <div class="starfield__stars"></div>
  </div>
  <div class="starfield medium">
    <div class="starfield__stars"></div>
    <div class="starfield__stars"></div>
  </div>
  <div class="starfield large">
    <div class="starfield__stars"></div>
    <div class="starfield__stars"></div>
  </div>
</div>

script.js

// Source for the CSS stars: https://www.codesmite.com/article/controlling-a-spaceship-with-css?ref=webdesignernews.com

style.css

@import url('https://fonts.googleapis.com/css?family=Satisfy|Space+Mono');

* { 
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box; 
}

body {
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
  height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1 {
  font-family: 'Satisfy', cursive;
  color: white;
  font-size: 2.5em;
  text-align: center;
}

h2 {
  font-family: 'Space Mono', monospace;
  color: white;
  text-align: center;
}

#wrap {
  position: absolute;
/*   height: 100%;
  width: 100%; */
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  border: 10px solid #0A6FA5;
  border-radius: 50%;
  -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
  overflow: hidden;
  background: #1D2B64;
    background: -webkit-radial-gradient(ellipse at bottom, #1D2B64 , #F8CDDA);
      background: radial-gradient(ellipse at bottom, #1D2B64 , #F8CDDA);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.starfield {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
/*   width: 100%;
  height: 100%; */
    -moz-transform: translate(-50%,-50%) translateZ(0);
      -webkit-transform: translate(-50%,-50%) translateZ(0);
        -ms-transform: translate(-50%,-50%) translateZ(0);
          transform: translate(-50%,-50%) translateZ(0);
}

.starfield__stars {
    position: absolute;
    left: 0;
    top: -600px;
    height: 100%;
    width: 100%;
}

.starfield.small .starfield__stars {
    width: 1px;
    height: 1px;
    box-shadow: 489px 468px #FFF, 364px 571px #FFF, 43px 463px #FFF, 209px 205px #FFF, 59px 60px #FFF, 473px 456px #FFF, 208px 391px #FFF, 518px 463px #FFF, 255px 131px #FFF, 582px 331px #FFF, 165px 297px #FFF, 32px 70px #FFF, 585px 302px #FFF, 532px 459px #FFF, 242px 453px #FFF, 85px 389px #FFF, 282px 598px #FFF, 554px 250px #FFF, 347px 299px #FFF, 93px 352px #FFF, 179px 106px #FFF, 119px 572px #FFF, 405px 248px #FFF, 88px 57px #FFF, 228px 135px #FFF, 519px 302px #FFF, 94px 260px #FFF, 57px 111px #FFF, 450px 4px #FFF, 5px 544px #FFF, 321px 589px #FFF, 438px 298px #FFF, 399px 319px #FFF, 278px 551px #FFF, 134px 468px #FFF, 481px 318px #FFF, 253px 14px #FFF, 53px 33px #FFF, 229px 248px #FFF, 393px 386px #FFF, 490px 96px #FFF, 392px 109px #FFF, 180px 49px #FFF, 537px 174px #FFF, 204px 317px #FFF, 27px 408px #FFF, 571px 580px #FFF, 512px 410px #FFF, 288px 280px #FFF, 168px 504px #FFF, 214px 148px #FFF, 283px 43px #FFF, 221px 368px #FFF, 582px 89px #FFF, 445px 334px #FFF, 4px 455px #FFF, 185px 392px #FFF, 198px 260px #FFF, 202px 91px #FFF, 145px 558px #FFF, 90px 110px #FFF, 346px 473px #FFF, 25px 238px #FFF, 159px 457px #FFF, 468px 549px #FFF, 466px 106px #FFF, 298px 222px #FFF, 428px 477px #FFF, 433px 169px #FFF, 344px 582px #FFF, 207px 527px #FFF, 333px 381px #FFF, 51px 383px #FFF, 415px 590px #FFF, 268px 238px #FFF, 337px 93px #FFF, 536px 584px #FFF, 169px 31px #FFF, 343px 37px #FFF, 33px 258px #FFF, 337px 577px #FFF, 115px 408px #FFF, 566px 552px #FFF, 518px 41px #FFF, 480px 254px #FFF, 288px 140px #FFF, 14px 381px #FFF, 482px 185px #FFF, 83px 252px #FFF, 33px 326px #FFF, 175px 87px #FFF, 502px 551px #FFF, 171px 58px #FFF, 33px 133px #FFF, 266px 294px #FFF, 522px 120px #FFF, 119px 559px #FFF, 227px 378px #FFF, 423px 536px #FFF, 260px 230px #FFF;
}

.starfield.medium .starfield__stars {
    width: 2px;
    height: 2px;
    box-shadow: 83px 561px #FFF, 299px 500px #FFF, 422px 71px #FFF, 191px 473px #FFF, 265px 582px #FFF, 49px 588px #FFF, 574px 142px #FFF, 205px 94px #FFF, 185px 392px #FFF, 25px 148px #FFF, 27px 102px #FFF, 199px 543px #FFF, 37px 51px #FFF, 78px 212px #FFF, 227px 155px #FFF, 218px 25px #FFF, 186px 556px #FFF, 82px 506px #FFF, 477px 568px #FFF, 586px 165px #FFF, 557px 304px #FFF, 311px 210px #FFF, 37px 1px #FFF, 575px 24px #FFF, 262px 150px #FFF, 321px 551px #FFF, 285px 548px #FFF, 115px 141px #FFF, 414px 590px #FFF, 132px 201px #FFF, 7px 291px #FFF, 438px 437px #FFF, 469px 350px #FFF, 127px 394px #FFF, 179px 539px #FFF, 145px 427px #FFF, 168px 576px #FFF, 67px 580px #FFF, 370px 494px #FFF, 243px 176px #FFF;
}

.starfield.large .starfield__stars {
    width: 3px;
    height: 3px;
    box-shadow: 464px 394px #FFF, 98px 87px #FFF, 271px 211px #FFF, 121px 274px #FFF, 530px 259px #FFF, 226px 448px #FFF, 480px 198px #FFF, 358px 460px #FFF, 161px 479px #FFF, 214px 127px #FFF, 432px 186px #FFF, 525px 166px #FFF, 118px 206px #FFF, 448px 522px #FFF, 150px 207px #FFF;
}

.starfield.small .starfield__stars:nth-child(1) {
  -moz-animation: stars 20s linear infinite; 
    -webkit-animation: stars 20s linear infinite; 
      animation: stars 20s linear infinite;  
}

.starfield.medium .starfield__stars:nth-child(1) {
  -moz-animation: stars 30s linear infinite; 
    -webkit-animation: stars 30s linear infinite; 
      animation: stars 30s linear infinite;  
}

.starfield.large .starfield__stars:nth-child(1) {
  -moz-animation: stars 50s linear infinite; 
    -webkit-animation: stars 50s linear infinite; 
      animation: stars 50s linear infinite; 
}

.starfield.small .starfield__stars:nth-child(2) {
  -moz-animation: stars 20s linear infinite 10s; 
    -webkit-animation: stars 20s linear infinite 10s; 
      animation: stars 20s linear infinite 10s;  
}

.starfield.medium .starfield__stars:nth-child(2) {
  -moz-animation: stars 30s linear infinite 15s; 
    -webkit-animation: stars 30s linear infinite 15s; 
      animation: stars 30s linear infinite 15s;  
}

.starfield.large .starfield__stars:nth-child(2) {
  -moz-animation: stars 50s linear infinite 25s; 
    -webkit-animation: stars 50s linear infinite 25s; 
      animation: stars 50s linear infinite 25s; 
}

@keyframes stars {
    0% {
        -moz-transform: translateY(0) translateZ(0);
        -webkit-transform: translateY(0) translateZ(0);
        -ms-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
    }
    100% {
        -moz-transform: translateY(2000px) translateZ(0);
        -webkit-transform: translateY(2000px) translateZ(0);
        -ms-transform: translateY(2000px) translateZ(0);
        transform: translateY(2000px) translateZ(0);
    }
}