Web Design | Graphic Design | Web Development

Retro Motel Sign Made With CSS3

Posted on: April 22nd, 2013 by Scott JH No Comments

Retro Motel Sign

I’ve been playing around a lot with pseudo-elements and all of the wonderful animation features available in CSS3. Codepen, the web app for code sharing, is where I have been doing most of my experimentation. One of my favorite creations is this retro looking motel sign that I built on a whim.

As a minor tangent, I want to talk about why I enjoy front-end web development so much. I have an art background and have always loved to draw and create images. However, I also have a very analytical mind and enjoy solving puzzles. Web design requires me to use both the creative and analytical parts of my brain equally and this is what draws me to it. This sign is a perfect example of this marriage of right and left brain thinking.

I went into building this sign with only a vague idea what it might look like. I did a quick Google search for retro motel signs and found a lot of great stuff from the 50’s and 60’s. I was also inspired by some some of the wonderful retro illustrators I love like Darwyn Cooke and Shag

Markup

So, of course, I started with the markup. I knew going in that I wanted to use CSS3 animation to create the glowing and flickering effects of an actual functioning sign. The sign would have letters saying motel as well as vacancy. Of course, I put all of this inside a container so that I could manipulate positioning and so forth.

Here’s the Markup:

<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>

You might notice right away that I have put each letter in “motel” inside it’s own span. The reason I did this is because I want to adjust the poistioning of each letter as well as use pseudo-elements to create 3D effects. I inserted each span manulally in this case, but I would recommend using lettering.js for other projects.

CSS

In this project, CSS3 does most of the heavy lifting. The first thing I ccreated was the sign itself.

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;
}

To make it I triangle, I used the classic approach of leveraging border width and color. Nothing too complicated but it did require some trial and error.

Next, I decided I wanted a border for my triangle shaped sign. This is pretty straight forward as well. All we need to do is style a pseudo-element of the div.sign element.

/* 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;

}

Positioning is important here. I’ll be honest, I can’t say that this is the only way to do this. I just messed around a little bit with absolute versus realtive positioning and all it really changes are the values for position top. If positioned absolute, a top value of –11.5em seems to put the background where we need it. Your mileage may vary.

To create the pole that the sign is attached to I implemented some CSS3 gradients.

/*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))
);

}

I would recommend using the CSS3 Gradient Generator to create that gradient code. Much easier. However, take a look at the code and try to understand what makes it render that gradient.


Now for the “MOTEL” portion of the sign. I started with some basic styling for the h1 element

/*MOTEL*/
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;
}

Next, I had to wrap each letter in its own chunky box.

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;

}

The glowing effect and 3D effects are all done using drop-shadows. I would reccommend the CSS3 Maker to help you generate the code for these shadows.


Finally, we have to position the letters. Good thing they’re all wrapped in seperate spans. And, we only really need to reposition three of the spans vertically.

h1 span.one, h1 span.three, h1 span.five {
  top: 0.25em;
}

The last bit is the “VACANCY” sign. I wanted it to flicker slowly on and off. This actually makes it kind of creepy, but it also grabs your attention. The flickering was done using CSS3 animation and animating the color of the text plus adding in a text shadow to mimic the glow of the letters.

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;
}

@-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);}
}

Conclusion

Building a graphic this way isn’t perfect. Obviously, browser support for CSS3 animations is still catching up. I was pleased with the results I got though, because it shows that with a little creative leveraging of CSS and smart markup, you can create lots of wonderful graphics without having to add heavy images or (shudder) Flash animation.

Fork and share.

Tags: , , ,

Leave a Reply