Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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