A collection of 3D neon signs made with pure CSS and lots of text-shadows..... Features some Font Awesome icons and a few funky neon themed fonts.
A Pen by Thomas Trinca on CodePen.
Created
December 17, 2016 10:28
-
-
Save CodeMyUI/af6545eb0862b42f80391416c9adcfa2 to your computer and use it in GitHub Desktop.
Neon Signs
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
| <div id="container"> | |
| <div class="neon-circle"> | |
| <div class="sign-one"> | |
| Cocktails<br> | |
| <div class="and">&</div> | |
| ~Dreams~ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="container"> | |
| <div class="sign-two"> | |
| <i class="fa fa-heart-o" aria-hidden="true"></i> | |
| <div class="off">G</div>IRLS<br> | |
| <i class="fa fa-heart-o" aria-hidden="true"></i> | |
| GI<div class="off">RL</div>S<br> | |
| <i class="fa fa-heart-o heart-off" aria-hidden="true"></i> | |
| GIRLS<br> | |
| </div> | |
| </div> | |
| <div id="container"> | |
| <div class="sign-three"> | |
| <div class="restaurant">Restaurant</div> | |
| <div class="bar">Bar</div> | |
| <div class="jackpots">JACKPOTS</div> | |
| </div> | |
| </div> | |
| <div id="container"> | |
| <div class="sign-four"> | |
| EXCHANGE<br> | |
| <i class="fa fa-usd currency" aria-hidden="true"></i> | |
| <i class="fa fa-eur currency" aria-hidden="true"></i> | |
| <i class="fa fa-gbp currency" aria-hidden="true"></i> | |
| <i class="fa fa-jpy currency" aria-hidden="true"></i> | |
| <i class="fa fa-rub currency" aria-hidden="true"></i> | |
| </div> | |
| </div> | |
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
| @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'); | |
| @font-face { | |
| font-family: moon; | |
| src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/moon.ttf); | |
| } | |
| @font-face { | |
| font-family: clipneon; | |
| src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/clip.ttf); | |
| } | |
| @font-face { | |
| font-family: lasenter; | |
| src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/lasenter.ttf); | |
| } | |
| html, | |
| body { | |
| background-color: black; | |
| display: table; | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| #container { | |
| display: table-cell; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| .neon-circle { | |
| -moz-box-shadow: 0px 0px 0px 8px rgba(254,208,40,1), 0px 0px 8px 10px rgba(240,19,11,1), inset 0px 0px 8px 4px rgba(240,19,11,1), 0px 0px 98px 8px rgba(250,29,22,1), inset 0px 0px 98px 8px rgba(250,29,22,1); | |
| -webkit-box-shadow: 0px 0px 0px 8px rgba(254,208,40,1), 0px 0px 8px 10px rgba(240,19,11,1), inset 0px 0px 8px 4px rgba(240,19,11,1), 0px 0px 98px 8px rgba(250,29,22,1), inset 0px 0px 98px 8px rgba(250,29,22,1); | |
| -webkit-transform: matrix3d(0.77,0,-0.64,-.001,0.00,1,0.00,0,0.64,0,0.77,0,0,0,0,1); | |
| background: ; | |
| border-radius: 13vw; | |
| box-shadow: 0px 0px 0px 8px rgba(254,208,40,1), 0px 0px 8px 10px rgba(240,19,11,1), inset 0px 0px 8px 4px rgba(240,19,11,1), 0px 0px 98px 8px rgba(250,29,22,1), inset 0px 0px 98px 8px rgba(250,29,22,1); | |
| height: 20vw; | |
| margin-left: 2vw; | |
| margin-right: -5vw; | |
| transform: matrix3d(0.77,0,-0.64,-.001,0.00,1,0.00,0,0.64,0,0.77,0,0,0,0,1); | |
| width: 20vw; | |
| } | |
| .sign-one { | |
| padding-top: 3.5vw; | |
| padding-right: 4vw; | |
| font-family: lasenter; | |
| font-size: 5vw; | |
| line-height: 4vw; | |
| padding-top: ; | |
| text-shadow: | |
| .1vw 0vw .25vw #28D7FE, .2vw 0vw .25vw #28D7FE, .4vw 0vw .25vw #28D7FE, | |
| .1vw 0vw .1vw #1041FF, .2vw 0vw 0vw #1041FF, .4vw 0vw 0vw #1041FF, | |
| .1vw 0vw .1vw #1041FF, .2vw 0vw .1vw #1041FF, .4vw 0vw 0vw #1041FF, | |
| .1vw 0vw .8vw #1041FF, .2vw 0vw .8vw #1041FF, .4vw 0vw .8vw #1041FF, .2vw 0vw .5vw #1041FF, | |
| .1vw 0vw .5vw #1041FF, .2vw 0vw .5vw #1041FF, .4vw 0vw .5vw #1041FF, | |
| .1vw 0vw 10vw #1041FF, .2vw 0vw 10vw #1041FF, .4vw 0vw 10vw #1041FF; | |
| color: #28D7FE; | |
| } | |
| .and { | |
| color: #FED128; | |
| padding-left: 5vw; | |
| padding-top: .5vw; | |
| text-shadow: | |
| -.1vw 0vw .25vw #FED128, -.2vw 0vw .25vw #FED128, -.4vw 0vw .25vw #FED128, | |
| -.1vw 0vw .1vw #F0130B, -.2vw 0vw .1vw #F0130B, -.4vw 0vw .1vw #F0130B, | |
| -.1vw 0vw .1vw #F0130B, -.2vw 0vw .1vw #F0130B, -.4vw 0vw .1vw #F0130B, | |
| -.1vw 0vw .8vw #F0130B, -.2vw 0vw .8vw #F0130B, -.4vw 0vw .8vw #F0130B, .2vw 0vw .5vw #F0130B, | |
| -.1vw 0vw .5vw #F0130B, -.2vw 0vw .5vw #F0130B, -.4vw 0vw .5vw #F0130B, | |
| -.1vw 0vw 10vw #FA1C16, -.2vw 0vw 10vw #FA1C16, -.4vw 0vw 10vw #FA1C16; | |
| } | |
| .sign-two { | |
| -webkit-transform: matrix3d(0.77,0,0.64,.001,0.00,1,0.00,0,-0.64,0,0.77,0,0,0,0,1); | |
| color: #A9FFDC; | |
| font-family: clipneon; | |
| font-size: 5vw; | |
| line-height: 5vw; | |
| text-shadow: 0vw 0vw 3vw #F40A35; | |
| transform: matrix3d(0.77,0,0.64,.001,0.00,1,0.00,0,-0.64,0,0.77,0,0,0,0,1); | |
| text-shadow: | |
| -.1vw 0vw .25vw #A9FFDC, -.2vw 0vw .25vw #A9FFDC, -.4vw 0vw .25vw #A9FFDC, | |
| -.1vw 0vw .1vw #00CC2A, -.2vw 0vw .1vw #00CC2A, -.4vw 0vw .1vw #00CC2A, | |
| -.1vw 0vw .8vw #00CC2A, -.2vw 0vw .8vw #00CC2A, -.4vw 0vw .8vw #00CC2A, .2vw 0vw .5vw #00CC2A, | |
| -.1vw 0vw .5vw #00CC2A, -.2vw 0vw .5vw #00CC2A, -.4vw 0vw .5vw #00CC2A, | |
| -.1vw 0vw 10vw #16FA19, -.2vw 0vw 10vw #16FA19, -.4vw 0vw 10vw #16FA19; | |
| } | |
| .sign-three { | |
| margin-bottom: ; | |
| margin-left: -4vw; | |
| margin-right: -4vw; | |
| } | |
| .restaurant { | |
| -ms-transform: rotate(-10deg); /* IE 9 */ | |
| -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ | |
| color: #28D7FE; | |
| font-family: lasenter; | |
| font-size: 5vw; | |
| transform: rotate(-10deg); | |
| text-shadow: | |
| .1vw 0vw .25vw #28D7FE, .2vw 0vw .25vw #28D7FE, .4vw 0vw .25vw #28D7FE, | |
| .1vw 0vw .1vw #1041FF, .2vw 0vw 0vw #1041FF, .4vw 0vw 0vw #1041FF, | |
| .1vw 0vw .1vw #1041FF, .2vw 0vw .1vw #1041FF, .4vw 0vw 0vw #1041FF, | |
| .1vw 0vw .8vw #1041FF, .2vw 0vw .8vw #1041FF, .4vw 0vw .8vw #1041FF, .2vw 0vw .5vw #1041FF, | |
| .1vw 0vw .5vw #1041FF, .2vw 0vw .5vw #1041FF, .4vw 0vw .5vw #1041FF, | |
| .1vw 0vw 10vw #1041FF, .2vw 0vw 10vw #1041FF, .4vw 0vw 10vw #1041FF; | |
| } | |
| .bar { | |
| color: #A9FFDC; | |
| font-family: clipneon; | |
| font-size: 4vw; | |
| margin-left: 14vw; | |
| margin-top: -.75vw; | |
| text-shadow: | |
| -.1vw 0vw .25vw #A9FFDC, -.2vw 0vw .25vw #A9FFDC, -.4vw 0vw .25vw #A9FFDC, | |
| -.1vw 0vw .1vw #00CC2A, -.2vw 0vw .1vw #00CC2A, -.4vw 0vw .1vw #00CC2A, | |
| -.1vw 0vw .8vw #00CC2A, -.2vw 0vw .8vw #00CC2A, -.4vw 0vw .8vw #00CC2A, .2vw 0vw .5vw #00CC2A, | |
| -.1vw 0vw .5vw #00CC2A, -.2vw 0vw .5vw #00CC2A, -.4vw 0vw .5vw #00CC2A, | |
| -.1vw 0vw 10vw #16FA19, -.2vw 0vw 10vw #16FA19, -.4vw 0vw 10vw #16FA19; | |
| } | |
| .jackpots { | |
| font-family: moon; | |
| font-size: 6.3vw; | |
| margin-left: 1.5vw; | |
| } | |
| .sign-four { | |
| -webkit-transform: matrix3d(0.77,0,-0.64,-.001,0.00,1,0.00,0,0.64,0,0.77,0,0,0,0,1); | |
| color: #F0D6DE; | |
| font-family: clipneon; | |
| font-size: 5vw; | |
| line-height: 6vw; | |
| margin-right: 2vw; | |
| transform: matrix3d(0.77,0,-0.64,-.001,0.00,1,0.00,0,0.64,0,0.77,0,0,0,0,1); | |
| text-shadow: | |
| .1vw 0vw .25vw #F0D6DE, .2vw 0vw .25vw #F0D6DE, .4vw 0vw .25vw #F0D6DE, | |
| .1vw 0vw .1vw #F181B2, .2vw 0vw 0vw #F181B2, .4vw 0vw 0vw #F181B2, | |
| .1vw 0vw .1vw #F181B2, .2vw 0vw .1vw #F181B2, .4vw 0vw 0vw #F181B2, | |
| .1vw 0vw 1vw #F181B2, .2vw 0vw 2vw #F181B2, .4vw 0vw 2vw #F181B2, .2vw 0vw 5vw #F181B2, | |
| .1vw 0vw .5vw #F20B70, .2vw 0vw .5vw #F20B70, .4vw 0vw 6vw #F20B70, | |
| .1vw 0vw 4vw #F20B70, .2vw 0vw 20vw #F20B70, .4vw 0vw 10vw #F20B70, | |
| .1vw 0vw 10vw #F20B70, .2vw 0vw 30vw #F20B70, .4vw 0vw 10vw #F20B70; | |
| } | |
| .currency { | |
| color: #FDF8FD; | |
| font-size: 4vw; | |
| text-shadow: | |
| .1vw 0vw .25vw #FDF8FD, .2vw 0vw .25vw #FDF8FD, .4vw 0vw .25vw #FDF8FD, | |
| .1vw 0vw .1vw #F1EC81, .2vw 0vw 0vw #F1EC81, .4vw 0vw 0vw #F1EC81, | |
| .1vw 0vw .1vw #F1EC81, .2vw 0vw .1vw #F1EC81, .4vw 0vw 0vw #F1EC81, | |
| .1vw 0vw 1vw #F1EC81, .2vw 0vw 2vw #F1EC81, .4vw 0vw 2vw #F1EC81, .2vw 0vw 5vw #F1EC81, | |
| .1vw 0vw .5vw #F2E90B, .2vw 0vw .5vw #F2E90B, .4vw 0vw 6vw #F2E90B, | |
| .1vw 0vw 2vw #F2E90B, .2vw 0vw 5vw #F2E90B, .4vw 0vw 0vw #F2E90B; | |
| } | |
| .fa-heart-o { | |
| color: #FBB4FF; | |
| text-shadow: | |
| -.1vw 0vw .25vw #FBB4FF, -.2vw 0vw .25vw #FBB4FF, -.4vw 0vw .25vw #FBB4FF, | |
| -.1vw 0vw 1vw #E82FF5, -.2vw 0vw .8vw #E82FF5, -.4vw 0vw .8vw #E82FF5, .2vw 0vw .5vw #E82FF5, | |
| -.1vw 0vw 10vw #CB16FA, -.2vw 0vw 10vw #CB16FA, -.4vw 0vw 10vw #CB16FA; | |
| } | |
| .off { | |
| color: #4A7061; | |
| display: inline-block; | |
| text-shadow: | |
| -.1vw 0vw .25vw #4A7061, -.2vw 0vw .25vw #4A7061, -.4vw 0vw .25vw #4A7061, | |
| -.1vw 0vw .1vw #184D23, -.2vw 0vw .1vw #184D23, -.4vw 0vw .1vw #184D23, | |
| -.1vw 0vw .8vw #184D23, -.2vw 0vw .8vw #184D23, -.4vw 0vw .8vw #184D23, .2vw 0vw .5vw #184D23, | |
| -.1vw 0vw .5vw #184D23, -.2vw 0vw .5vw #184D23, -.4vw 0vw .5vw #184D23, | |
| -.1vw 0vw 2vw #184D23, -.2vw 0vw 2vw #184D23, -.4vw 0vw 2vw #184D23; | |
| } | |
| .heart-off { | |
| animation: heart .1s ease infinite; | |
| -moz-animation: heart .1s ease infinite; | |
| /* Firefox */ | |
| -webkit-animation: heart .1s ease infinite; | |
| /* Safari and Chrome */ | |
| -o-animation: heart .1s ease infinite; | |
| /* Opera */ | |
| } | |
| @keyframes heart { | |
| 0%, | |
| 100% { | |
| /* Enable hardware acceleration to fix laggy transitions */ | |
| -webkit-transform: translateZ(0); | |
| -moz-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| -o-transform: translateZ(0); | |
| transform: translateZ(0); | |
| color: #FBB4FF; | |
| text-shadow: | |
| -.1vw 0vw .25vw #FBB4FF, -.2vw 0vw .25vw #FBB4FF, -.4vw 0vw .25vw #FBB4FF, | |
| -.1vw 0vw 1vw #E82FF5, -.2vw 0vw .8vw #E82FF5, -.4vw 0vw .8vw #E82FF5, .2vw 0vw .5vw #E82FF5, | |
| -.1vw 0vw 10vw #CB16FA, -.2vw 0vw 10vw #CB16FA, -.4vw 0vw 10vw #CB16FA; | |
| } | |
| 50% { | |
| /* Enable hardware acceleration to fix laggy transitions */ | |
| -webkit-transform: translateZ(0); | |
| -moz-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| -o-transform: translateZ(0); | |
| transform: translateZ(0); | |
| color: #8F5493; | |
| text-shadow: | |
| -.1vw 0vw .25vw #8F5493, -.2vw 0vw .25vw #8F5493, -.4vw 0vw .25vw #8F5493, | |
| -.1vw 0vw .8vw #59125E, -.2vw 0vw .8vw #59125E, -.4vw 0vw .8vw #59125E, .2vw 0vw .5vw #59125E, | |
| -.1vw 0vw 3vw #42114E, -.2vw 0vw 3vw #42114E, -.4vw 0vw 3vw #42114E; | |
| } | |
| } | |
| .jackpots { | |
| animation: jackpots 1s 0s ease infinite; | |
| -moz-animation: jackpots 1s 0s ease infinite; | |
| /* Firefox */ | |
| -webkit-animation: jackpots 1s 0s ease infinite; | |
| /* Safari and Chrome */ | |
| -o-animation: jackpots 1s 0s ease infinite; | |
| /* Opera */ | |
| } | |
| @keyframes jackpots { | |
| 0%, | |
| 100% { | |
| text-shadow: | |
| -.1vw 0vw .1vw #FED128, -.15vw 0vw .2vw #FED128, -.2vw 0vw .2vw #FED128, | |
| -.1vw 0vw 3vw #F0130B, -.2vw 0vw 3vw #F0130B, -.4vw 0vw 3vw #F0130B, | |
| -.1vw 0vw 5vw #F0130B, -.2vw 0vw 5vw #F0130B, -.4vw 0vw .8vw #F0130B, .2vw 0vw 10vw #F0130B; | |
| color: #FED128; | |
| } | |
| 50% { | |
| text-shadow: | |
| -.1vw 0vw .1vw #705C12, -.15vw 0vw .2vw #705C12, -.2vw 0vw .2vw #705C12, | |
| -.1vw 0vw .1vw #5C0704, -.2vw 0vw .1vw #5C0704, -.4vw 0vw .1vw #5C0704, | |
| -.1vw 0vw .2vw #5C0704, -.2vw 0vw .2vw #5C0704, -.4vw 0vw .2vw #5C0704, .2vw 0vw .5vw #5C0704; | |
| color: #705C12; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment