A CodePen by Scott J Haselwood. Retro Motel Sign - I wanted to play with css3 animations so I created this retro motel sign. I figured you could insert the spans in the h1 element by using lettering.js or something like that. No images used.
<div class="container"> | |
<div class="sign"> | |
<h1><span class="one">M</span><span class="two">o</span><span class="three">t</span><span class="four">e</span><span class="five">l</span></h1> | |
<h2>Vacancy</h2> | |
</div> | |
</div> |
body { | |
background: black; | |
} | |
.container { | |
position: relative; | |
width: 75%; | |
margin: 0 auto; | |
padding: 2em 25%; | |
} | |
div.sign { | |
position: absolute; | |
width: 9em; | |
height: 0; | |
border: 10em solid #00A0B0; | |
border-right-color: transparent; | |
border-bottom-color: transparent; | |
border-left-color: transparent; | |
border-left-width: 16em; | |
} | |
/*the pole*/ | |
div.sign:before { | |
content: ""; | |
position: absolute; | |
display: block; | |
z-index: -10; | |
left: 3em; | |
width: 1em; | |
height: 16em; | |
background: linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%); | |
background: -o-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%); | |
background: -moz-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%); | |
background: -webkit-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%); | |
background: -ms-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%); | |
background: -webkit-gradient( | |
linear, | |
left top, | |
right top, | |
color-stop(0.32, rgb(112,128,144)), | |
color-stop(0.66, rgb(54,59,59)) | |
); | |
} | |
/* sign background */ | |
div.sign:after { | |
content: ""; | |
position: relative; | |
top: -22em; | |
left: -18em; | |
z-index: -5; | |
display: block; | |
width: 10em; | |
height: 0; | |
border: 11em solid #EB6841; | |
border-right-color: transparent; | |
border-bottom-color: transparent; | |
border-left-color: transparent; | |
border-left-width: 17em; | |
} | |
h1 { | |
position: relative; | |
z-index: 2; | |
left: -3.5em; | |
top: -3.5em; | |
font-family: helvetica; | |
text-transform: uppercase; | |
font-size: 3em; | |
color: #EB6841; | |
text-shadow:3px 2px 5px #eb6e4c; | |
} | |
h1 span { | |
position: relative; | |
margin-left: 0.25em; | |
background: white; | |
padding: 0.25em; | |
border: 5px solid #EDC951; | |
border-radius: 10px; | |
-moz-box-shadow: 2px 0px 19px #edc951; | |
-webkit-box-shadow: 2px 0px 19px #edc951; | |
box-shadow: 2px 0px 19px #edc951; | |
} | |
h1 span.one, h1 span.three, h1 span.five { | |
top: 0.25em; | |
} | |
h2 { | |
position: relative; | |
z-index: 3; | |
left: -0.25em; | |
top: -6em; | |
font-family: arial; | |
text-transform: uppercase; | |
text-align: center; | |
padding: .25em; | |
width: 5em; | |
background: black; | |
border: medium solid slategray; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
animation: flash 3s infinite; | |
-webkit-animation: flash 3s infinite; | |
-moz-animation: flash 3s infinite; | |
-ms-animation: flash 3s infinite; | |
-o-animation: flash 3s infinite; | |
} | |
/* coming soon */ | |
h2:before { | |
} | |
@-keyframes flash { | |
0% {color: rgba(34, 5, 7, 0.9);} | |
50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;} | |
100% {color: rgba(34, 5, 7, 0.9);} | |
} | |
@-webkit-keyframes flash { | |
0% {color: rgba(34, 5, 7, 0.9);} | |
50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;} | |
100% {color: rgba(34, 5, 7, 0.9);} | |
} | |
@-moz-keyframes flash { | |
0% {color: rgba(34, 5, 7, 0.9);} | |
50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;} | |
100% {color: rgba(34, 5, 7, 0.9);} | |
} | |
@-ms-keyframes flash { | |
0% {color: rgba(34, 5, 7, 0.9);} | |
50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;} | |
100% {color: rgba(34, 5, 7, 0.9);} | |
} | |
@-o-keyframes flash { | |
0% {color: rgba(34, 5, 7, 0.9);} | |
50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;} | |
100% {color: rgba(34, 5, 7, 0.9);} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment