CSS3: Creating Web Site Banners

Inspired by Tamsin Baker’s beautiful Photoshop brushes “Urban Scrawl” 1 and 2, I was trying to create some shadowed banners using some CSS3 properties. Visit Tamsin’s site and check out all her inspiring artwork including the free Photoshop brushes: http://www.tamsinbaker.com/

Here is the result of my experiment with some example banners (click on the image to see the demo page):

You can download the ZIP file with all the images here: CSS3 Banners ZIP

The main idea is to create an image using the Urban Scrawl Photoshop brushes and to put it as the logo of the banner.

The CSS is built up like this:

h1{
padding-top: 10px;
font-size: 36px;
padding:0px;
margin: 0px;
line-height:100px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
width:310px;
float:left;
}
.slogan{
float: right;
margin:75px 20px 0px 0px;
font-size: 20px;
}

Here we define the heading and the slogan of the banner. In the next class we define the general banner layout:

.banner{
width:620px;
height: 100px;
margin:7px auto;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding-left:190px;
}

And now, we define each individual banner, by changing the background image, which is the logo, the font color and the font-family:

.banner0{
background: #656964 url(banner0.png) no-repeat center left;
}
.banner1{
color:#37535B;
background: #31B3DA url(banner1.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner2{
color:#656A64;
background: #81C573 url(banner2.png) no-repeat center left;
font-family: "Palatino Linotype";
}
.banner3{
color:#37535B;
background: #656964 url(banner3.png) no-repeat center left;
font-family: "Arial Narrow";
}
.banner4{
color:#2B8EAC;
background: #656964 url(banner4.png) no-repeat center left;
font-family: "Century Gothic";
}
.banner5{
color:#37535B;
background: #C6CC10 url(banner5.png) no-repeat center left;
font-family: "Trebuchet MS";
}
.banner6{
color:#37535B;
background: #b8d8fb url(banner6.png) no-repeat center left;
font-family: "Arial Narrow";
text-transform: uppercase;
letter-spacing: 4px;
}
.banner7{
color:#6e9cf9;
background: #a08c60 url(banner7.png) no-repeat center left;
font-family: "Arial Narrow";
font-style: italic;
}

The html looks like this:

 <div class="banner banner0"></div>
 <div class="banner banner3"></div>
 <div class="banner banner1">
  <h1>Sweet City</h1>
  <div class="slogan">there's a lot to discover in your town</div>
 </div>
 <div class="banner banner2">
  <h1>Automobile</h1>
  <div class="slogan">The true fan club</div>
 </div>
 <div class="banner banner4">
  <h1>Arrow Shmallow</h1>
  <div class="slogan">Best Services</div>
 </div>
 <div class="banner banner5">
  <h1>Radio Header</h1>
  <div class="slogan">Listen to the music!</div>
 </div>
 <div class="banner banner6">
  <h1>Energizer</h1>
  <div class="slogan">The Smarter Power</div>
 </div>
 <div class="banner banner7">
  <h1>Brickyton</h1>
  <div class="slogan">We build everything</div>
 </div>

The first two banners are complete images, but since we apply the general style of .banner to them, we get the rounded and shadowed borders.

We apply both classes, the .banner and the .bannerN to each element. This will apply the common style and the individual style to the element. Keep in mind, that we can control which property gets overwritten by defining the order of class application. Everything that we define in the individual class .bannerN will replace the property (if it existed) of the .banner class.

Here is the demo link again: DEMO

And also the ZIP: CSS3 Banners ZIP

Tamsin Baker’s homepage: http://www.tamsinbaker.com/

Thank you, Tamsin, and enjoy!

Update Note: There are some issues with older browsers and, of course, Internet Explorer, because of the color depth. To avoid problems of having the image in a slightly different color than the background color of the banner, you should use web colors when creating banners like these…