Created
August 25, 2015 18:01
-
-
Save wolfd/d8ecb2f3a582f237f182 to your computer and use it in GitHub Desktop.
CSS3 Logo
This file contains 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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <link rel="stylesheet" href="logo.css" /> | |
| </head> | |
| <body> | |
| <span class="orion-center"> | |
| <oletter>o</oletter> | |
| <oletter>r</oletter> | |
| <oletter>i</oletter> | |
| <oletter>o</oletter> | |
| <oletter>n</oletter> | |
| <bigstar> | |
| <span class="recenter"> | |
| <oletter class="inverted">o</oletter> | |
| <oletter class="inverted">r</oletter> | |
| <oletter class="inverted">i</oletter> | |
| <oletter class="inverted">o</oletter> | |
| <oletter class="inverted">n</oletter> | |
| </span> | |
| </bigstar> | |
| <star></star> | |
| <star></star> | |
| <star></star> | |
| </span> | |
| </body> | |
| </html> |
This file contains 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
| span.orion-center { | |
| position: fixed; | |
| left: 50%; | |
| top: 50%; | |
| width: 0; | |
| height: 0; } | |
| span.orion-center bigstar { | |
| position: absolute; | |
| display: inline-block; | |
| background-color: #21e0ea; | |
| width: 160px; | |
| height: 160px; | |
| margin-left: -80px; | |
| margin-top: -80px; | |
| text-align: center; | |
| overflow: hidden; } | |
| span.orion-center star { | |
| position: absolute; | |
| display: inline-block; | |
| background-color: #21e0ea; | |
| width: 60px; | |
| height: 60px; | |
| margin-left: -30px; | |
| margin-top: -30px; | |
| -webkit-animation: starout 1.5s; } | |
| span.orion-center star:nth-of-type(1) { | |
| left: -168px; | |
| top: -152px; } | |
| span.orion-center star:nth-of-type(2) { | |
| left: 0px; | |
| top: -140px; } | |
| span.orion-center star:nth-of-type(3) { | |
| left: -110px; | |
| top: 110px; } | |
| span.orion-center oletter { | |
| position: absolute; | |
| display: inline-block; | |
| line-height: 60px; | |
| vertical-align: middle; | |
| text-align: center; | |
| width: 60px; | |
| height: 60px; | |
| margin-left: -30px; | |
| margin-top: -30px; | |
| -webkit-animation: starout 1.5s; | |
| color: #f7751f; | |
| font-family: Helvetica, sans-serif; | |
| font-size: 60px; | |
| font-weight: lighter; } | |
| span.orion-center span.recenter { | |
| position: relative; | |
| top: 80px; | |
| left: 80px; | |
| width: 160px; | |
| height: 160px; | |
| display: inline-block; } | |
| span.orion-center span.recenter oletter.inverted { | |
| color: white; } | |
| span.orion-center oletter:nth-of-type(1) { | |
| left: -164px; } | |
| span.orion-center oletter:nth-of-type(2) { | |
| left: -82px; } | |
| span.orion-center oletter:nth-of-type(3) { | |
| left: 0px; } | |
| span.orion-center oletter:nth-of-type(4) { | |
| left: 82px; } | |
| span.orion-center oletter:nth-of-type(5) { | |
| left: 164px; } | |
| span.orion-center oletter:nth-of-type(3) { | |
| background-color: white; | |
| color: #f7751f !important; } | |
| @-webkit-keyframes starout { | |
| from { | |
| left: 0px; | |
| top: 0px; } } |
This file contains 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
| $orion-font: Helvetica, sans-serif; | |
| $orion-orange: rgb(247, 117, 31); | |
| $orion-blue: rgb(33, 224, 234); | |
| $center-radius: 80px; | |
| $animation-time: 1.5s; | |
| @mixin centered($width, $height) { | |
| width: $width; | |
| height: $height; | |
| margin-left: -$width / 2; | |
| margin-top: -$height / 2; | |
| } | |
| @function bigstar-size() { | |
| @return $center-radius * 2 | |
| } | |
| @function star-size() { | |
| @return bigstar-size() * (3/8) | |
| } | |
| @mixin star-branding() { | |
| background-color: $orion-blue; | |
| } | |
| @mixin star-shape() { | |
| position: absolute; | |
| display: inline-block; | |
| @include star-branding(); | |
| } | |
| @function letter-size() { | |
| @return star-size() | |
| } | |
| @function letter-spacing() { | |
| @return (bigstar-size() / 2 * 1/4) * 1.1; | |
| } | |
| @function letter-width() { | |
| @return letter-size() + letter-spacing() | |
| } | |
| span.orion-center { | |
| position: fixed; | |
| left: 50%; | |
| top: 50%; | |
| width: 0; | |
| height: 0; | |
| bigstar { | |
| @include star-shape(); | |
| @include centered(bigstar-size(), bigstar-size()); | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| star { | |
| @include star-shape(); | |
| @include centered(star-size(), star-size()); | |
| -webkit-animation: starout $animation-time; | |
| } | |
| star:nth-of-type(1) { | |
| left: bigstar-size() / 2 * -2.1; | |
| top: bigstar-size() / 2 * -1.9; | |
| } | |
| star:nth-of-type(2) { | |
| left: bigstar-size() / 2 * 0; | |
| top: bigstar-size() / 2 * -1.75; | |
| } | |
| star:nth-of-type(3) { | |
| left: - (bigstar-size() / 2 + star-size() / 2); | |
| top: (bigstar-size() / 2 + star-size() / 2); | |
| } | |
| oletter { | |
| position: absolute; | |
| display: inline-block; | |
| line-height: letter-size(); | |
| vertical-align: middle; | |
| text-align: center; | |
| @include centered(letter-size(), letter-size()); | |
| -webkit-animation: starout $animation-time; | |
| color: $orion-orange; | |
| font-family: $orion-font; | |
| font-size: letter-size(); | |
| font-weight: lighter; | |
| } | |
| span.recenter { | |
| position: relative; | |
| top: bigstar-size() / 2; | |
| left: bigstar-size() / 2; | |
| width: bigstar-size(); | |
| height: bigstar-size(); | |
| display: inline-block; | |
| oletter.inverted { | |
| color: white; | |
| } | |
| } | |
| @for $i from 0 to 5 { | |
| oletter:nth-of-type(#{$i + 1}) { | |
| left: (letter-width() * ($i - 2)); | |
| } | |
| } | |
| oletter:nth-of-type(3) { | |
| background-color: white; | |
| color: $orion-orange !important; | |
| } | |
| } | |
| @-webkit-keyframes starout { | |
| from { | |
| left: 0px; | |
| top: 0px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment