CSS/HTML for Real World Signage

html5_css3Sometimes we can use HTML and CSS to create something that isn’t shown on a computer screen. Here is a real world example from a day in my life. I spent about 30 minutes on this project.

I live in a condominium complex and I’m assigned a parking space; somebody rudely parked in my spot at 11:30pm on a Sunday night — ick. I was told by the HOA I could put up a sign. I found a nice sign on Google; but being a PNG, I wanted to tweak the text and make a sort of reusable template for future needs. Enter HTML and CSS — my longtime friends.

parking-sign-storeI wanted to create something like the following using HTML and CSS, in a store such an 8.5×11 sign cost a few dollars:

So I fired up SublimeText and using the built in Snippets library keyed <html>[TAB] and a generic HTML5 based webpage was in my editor with no body content. I then added 3 paragraphs with my sign text and used CSS to style it. The HTML document in its entirety is:

<!DOCTYPE html>
<html>
<head>
  <title>Parking Sign</title>
<link href='http://fonts.googleapis.com/css?family=Lekton:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
  <style type="text/css">
    body {
font-family: 'Metrophobic','Lekton', sans-serif;
      border: 1em solid #9d2433;
      border-radius: 0.45in;
      width: 8.5in;
      height: 11in;
    }
    .warning {
      text-transform: uppercase;
      color: #9d2433;
    }
    p.notice {
      width: 6in;
      margin: auto;
      font-size: 7em;
      text-align: center;
      padding: 0.5in 0.5in 0 0.5in;
      font-weight: bold;
    }
    p.consequences {
      margin-top: 0.25in;
      font-size: 4em;
      text-align: center;
      line-height: 1.5em;
    }
    p.code {
      font-size: 1.75em;
      text-align: center;
      margin-top: 1in;
      padding: 0 1in 0 1in;
    }
    p { margin: 0 0 0 0; }
  </style>
</head>
<body>
<p class="notice warning">assigned parking only</p>
<p class="consequences warning">violators<br>will be towed<br>at owner's<br> expense</p>
<p class="code warning">Quail Meadows Rules & Regulations Vehicle Policy § 1.10, 2.1</p>
</body>
</html>

HTML Breakdown:

  • I played with 2 Google Fonts to try to find a font that looked rather official looking. As in my signage image.
  • I also took a picture of my condo’s tow warning for Fire Lanes (a County code) to match the red color used on signs in the area.

    A real tow-away sign a few feet from my parking spot, I want to match the colors.

    A real tow-away sign a few feet from my parking spot, I want to match the colors.

  • In my paragraph text; the Violators warning using inline <br> tags to space the text exactly as desired — it’s a small hack but for a 1-off project it’s ok.

CSS Breakdown:

  • Of note in this CSS usage is that the CSS is itself inline in the document. All these rules would trump external stylesheets. Typically you don’t see CSS rules defined like this inline, but again for a simple project this is fine to keep everything in 1 file.
  • I did make use of some CSS3 in this small project by using the Border Radius property.

The final end result is essentially this file in PDF of my sign, you can also of course save the above HTML as index.html and load it in your browser to see it. I use Linux to print the HTML page to a PDF file to preserve the colors used on the page.

Final HTML+CSS sign example (The PDF margins are much cleaner).

Final HTML+CSS sign example (The PDF margins are much cleaner).

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , , , , , | Posted under Media | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × = 20

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>