Web Design | Graphic Design | Web Development

Posts Tagged ‘Design’

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.

Info Graphics and Baseball

Posted on: October 22nd, 2012 by Scott JH 1 Comment

As a designer I have always been enamored with info graphics. Part of this comes from my love of data. That love of data, in turn, was most likely born from my love of baseball statistics. I have been a fan of the game of baseball since I was at least 9 years old. I lived and died with the success of my team, the Atlanta Braves. I think that at almost any point in the mid 90’s I could have told you the Braves’ batting order and each players batting average EXACTLY. I probably could have rattled off the team’s win/loss record and the ERA (Earned Run Average) of each pitcher as well of. I was obsessed.

Now, as a designer, I use my knowledge of color, space, and form to communicate with people. I was inspired to create an info graphic recently because it was something I had never attempted. Info graphics are extremely popular all across the web. The best info graphics help a person easily visualize a large set of numbers or data points. What better subject for my first info graphic than the World Series.

The initial idea was quite simple: each team would be represented by a circle and the size of each circle would represent the total number of World Series wins for each team. I had to decide on a formula to represent the wins. I chose to do this by imagining that each circle would be filled up by wins and that each win would have to correspond to 10 pixels square. I designed a formula in a spreadsheet and them plugged in the wins and, voila, I had a diameter I could plug into to Adobe Illustrator to make each circle. At this point, I realized I needed to make each circle a bit bigger so I multiplied each diameter by ten so that they would all grow proportionally to each other.

Once I had all my circles laid out, I started refining the visual information. One thing I realized I needed to communicate was the fact that many teams have played in different cities over their history. One example of this is my team, the Atlanta braves, who have been based in Boston, Milwaukee and Atlanta, and have won a World Series in each of those locations. In fact, the Braves are the only team to win a World Series for three separate cities. The Giants, Dodgers, Twins, and Athletics have all played for different cities as well. To address this, I decided to look at each circle as a pie and split them into pieces based on the wins for each different city. The Braves have three wins and played for three cities, so each win is one third of the pie. The San Francisco Giants win in 2010, was their first win for the City by the Bay, and therefore it accounts for one sixth of their total wins as a franchise – the other 5 being for New York.

After all the essential info was laid out I decided to flesh out the graphic a bit more. Because the intent is for this graphic to be a handy guide to the history of the World Series I felt like putting in just a bit more info. I added the six teams who have played in the World Series and never won as well as the two which have never even gone to the World Series. I also utilized the always controversial asterisk to note that one of the Cincinnati Rads’ World Series victories came in the 1919 series which was famously fixed. In that series, Eight members of the Chicago White Sox were paid to throw the game.

My hope is that this little graphic will make it’s way around the Internet as a handy guide for fans and newbies alike. Feel free to link to it and share it all you want. More baseball content to come.

pdx Bingo

Posted on: October 8th, 2012 by Scott JH No Comments

I’ve got a new project brewing and it has been a fun one. I decided I need to start making things. That’s really the key to creativity and getting attention.

Just. Start. Making. Things.

I draw. I write. I code.

These are the things I do. So, I decided to build something no one needed or wanted (except me) and put it out there to see see if maybe someone did want it after all.

Enter pdxBingo

The idea is very simple and, perhaps, obvious. In fact, it has been done, just not as a web app. The idea is a bingo game where the object is to spot classic “Portland” characters while you’re out and about. Specifically, while you’re at a bar or Saturday Market. Portland, OR (where I reside) is filled with all manner of eccentric people. You may be familiar with IFC’s show Portlandia, which pokes fun at the eccentricities of Portland’s residents. The show is so dead on that it is sometimes painful to watch. The point being that Portland has a very particular character and it’s denizens often exhibit very particular affectations. They smoke American Spirits. They drink PBR. They are very passionately devoted to their second-to-last place MLS team (this one is TOTALLY me). Many where these. And above all else, the people of Portland are absolutely aware that they are weird and PROUD of it.

So, have fun with this. There will be more updates to come. Works on your smart phone or iPad. Send feedback.

App in progress: Exquisite Corpse

Posted on: August 13th, 2012 by Scott JH 1 Comment

I want to build an app that lets people play a game called Exquisiste Corpse. This was a wonderful game created by the Dadas in the early 20th century. The essential concept is that each participant adds to a drawing or poem that they can only see on line or section of. In my case, I would like users to be able to see one previous line, contribute the next line, and then eventually be able to see the completed poem. This is all for the sake of fun and I was surprised to find that no one had created something like this.

In this post, I want to take you through the steps I’m using to create this app. So far, I only have the front end completed. I’m polishing my back-end programming skills to eventually get this up and running.

First Step: Mockflow

I was introduced to this service by one of my professors and I think it’s a really great tool. There are lots of wire frame apps out there, but I like mockflow because it limits you to information architecture only. Having limitations often really spurs your creativity. Mockflow also gives you the ability to easily share you mock-ups with clients. Exported PDFs have functioning links. Now you even have the option of exporting a wire-frame as HTML5 to help get the design and development moving along more quickly.

Here is a concept wire-frame for the app:

Next Step: HTML and CSS

Normally, I would create a mock up in Photoshop, but I decided to head right to the text editor this time. Why? Well, since the interface was so simple there wasn’t a lot to figure out. Most of the work has been done in Mockflow. I am pleased with it so far. The paper textured background came from Subtle Patterns which is a great resource for backgrounds. The fonts are from Google’s web font service, which I am loving. I built this all on top of the HTML5 boilerplate. My hope is to get this working so that people can play with it and create strange spontaneous poetry. Below is a screen shot and a link to the demo version. Enjoy!

Demo Version

Designing for Boomers

Posted on: October 21st, 2011 by Scott JH No Comments

Over the last few months I have been chewing on issues of usability and age. Their is this cliched view that young people are “good at computers” and the older generation (we’ll say 60 and up) are just never going to figure them out.

I don’t buy it.

(more…)