A Pen by Ian Hunter on CodePen.
Created
February 5, 2020 21:56
-
-
Save ianfhunter/cae76bfb915ed7a540c09034c913dbac to your computer and use it in GitHub Desktop.
Pure CSS night sky
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- I wanted to use no images and no JavaScript, only pure CSS | |
| --> | |
| <!-- I used box-shadow to create pixelated stars, but you can use linear-gradients to make them small blurry dots. | |
| --> | |
| <!-- Random set of stars is animated with keyframes. | |
| --> | |
| <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet"> | |
| <div class="toolbar"> | |
| <a href="Details">Details</a> | |
| <a href="Details">RSVP</a> | |
| <a href="Dayplan">Day Plan</a> | |
| <a href="Dayplan">Registry</a> | |
| <a href="Dayplan">Directions</a> | |
| </div> | |
| <div class="stars small"></div> | |
| <div class="stars medium"></div> | |
| <div class="stars large"></div> | |
| <div class="content"> | |
| <div class="content-aligner"> | |
| <div class="title">Save The Date</div> | |
| <p /> | |
| <div class="names">Kate Goodbody & Ian Hunter</div> | |
| <div class="place">Farnham Estate, Co. Cavan</div> | |
| <div class="date">28 Feb 2021</div> | |
| <p /> | |
| <p /> | |
| <p /> | |
| <div class="under_construction">Invitation and Details to follow</div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#094c72+98,01293f+100 */ | |
| background: rgb(9,76,114); | |
| background: -webkit-radial-gradient(bottom, ellipse cover, rgb(9,76,114) 0%,rgb(1,41,63) 100%); | |
| background: -webkit-radial-gradient(ellipse at bottom, rgb(9,76,114) 0%, rgb(1,41,63) 100%); | |
| background: -webkit-radial-gradient(bottom, ellipse, rgb(9,76,114) 0%, rgb(1,41,63) 100%); | |
| background: radial-gradient(ellipse at bottom, rgb(9,76,114) 0%,rgb(1,41,63) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#094c72', endColorstr='#01293f',GradientType=1 ); | |
| } | |
| @function box-shadow($stars) { | |
| $bxshadow: (); | |
| @for $i from 1 to $stars { | |
| $bxshadow: append($bxshadow, (random(2000) + 0px) (random(2000) + 0px) #fff, comma); | |
| } | |
| @return unquote($bxshadow); | |
| } | |
| $bxshadow-large: box-shadow(300); | |
| $bxshadow-medium: box-shadow(500); | |
| $bxshadow-small: box-shadow(800); | |
| .stars.large { | |
| height: 3px; | |
| width: 3px; | |
| background: transparent; | |
| box-shadow: $bxshadow-large; | |
| animation: blink-large 7s infinite; | |
| } | |
| .stars.medium { | |
| height: 2px; | |
| width: 2px; | |
| background: transparent; | |
| box-shadow: $bxshadow-medium; | |
| animation: blink-medium 5s infinite; | |
| } | |
| .stars.small { | |
| height: 1px; | |
| width: 1px; | |
| background: transparent; | |
| box-shadow: $bxshadow-small; | |
| animation: blink-small 3s infinite; | |
| } | |
| @keyframes blink-large { | |
| 0% { | |
| box-shadow: $bxshadow-large; | |
| } | |
| 70% { | |
| $colors: '#fff', 'transparent'; | |
| $stars: $bxshadow-large; | |
| @for $i from 1 to length($stars) { | |
| $star: set-nth(nth($stars, $i), 3, unquote(nth($colors, random(length($colors))))); | |
| $stars: set-nth($stars, $i, $star); | |
| } | |
| box-shadow: $stars; | |
| } | |
| 100% { | |
| box-shadow: $bxshadow-large; | |
| } | |
| } | |
| @keyframes blink-medium { | |
| 0% { | |
| box-shadow: $bxshadow-medium; | |
| } | |
| 70% { | |
| $colors: '#fff', 'transparent'; | |
| $stars: $bxshadow-medium; | |
| @for $i from 1 to length($stars) { | |
| $star: set-nth(nth($stars, $i), 3, unquote(nth($colors, random(length($colors))))); | |
| $stars: set-nth($stars, $i, $star); | |
| } | |
| box-shadow: $stars; | |
| } | |
| 100% { | |
| box-shadow: $bxshadow-medium; | |
| } | |
| } | |
| @keyframes blink-small { | |
| 0% { | |
| box-shadow: $bxshadow-small; | |
| } | |
| 70% { | |
| $colors: '#fff', 'transparent'; | |
| $stars: $bxshadow-small; | |
| @for $i from 1 to length($stars) { | |
| $star: set-nth(nth($stars, $i), 3, unquote(nth($colors, random(length($colors))))); | |
| $stars: set-nth($stars, $i, $star); | |
| } | |
| box-shadow: $stars; | |
| } | |
| 100% { | |
| box-shadow: $bxshadow-small; | |
| } | |
| } | |
| .content{ | |
| color: white; | |
| text-align: center; | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 20px; | |
| display: table; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .content-aligner{ | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| .title, .names{ | |
| font-size: 30px; | |
| } | |
| .toolbar{ | |
| background: #060631; | |
| color: grey; | |
| text-align: center; | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 30px; | |
| padding: 15px; | |
| } | |
| .toolbar a{ | |
| color: #e7ecff; | |
| padding-left: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment