A BulletProof Idea*

Create BBC iPlayer style roll over boxes

// May 24th, 2009 // 3 Comments » // Code, css, tutorials

You must have seen those funky roll overs used on the BBC iPlayer website right? I have come up with a very basic way of doing the same thing, not with Javascript but with CSS and HTML.

Step One

First we need to prepare our image, so open your image editor of choice (I am using Fireworks for this example) and create a new canvas with a width of 178px and height of 200px. In the top half of the canvas place an image with a width of 178px and a height of 100px.

Now we make a copy of the image by selecting it and copying it. Paste it into the lower half of the canvas like below:

Then we add a black rectangle over the bottom image and reduce it’s opacity to around 80%
image

Finally add some text

Step 2 – The Code

Lets start with some really basic and easy mark up

and our css…

all we have done is move the bottom half of the image up on the hover state to cover the top half of the image by setting a background position. Easy!

You should get something like this:

Funky sliding door tabbed menus

// August 2nd, 2008 // 4 Comments » // Design, Free Stuff, css, downloads, tutorials

Tabbed sliding doors menus look funky and elegant as well as being scalable. You can add as much text as you want and the tabs just expand and don’t break apart, they also re-size nicely when you bump up the text in your browser.
So today I’m going to show you how to create my own little twist on the very popular Sliding Doors of CSS menus by Douglas Bowman

As you can see in the image (above) I have an overlapped current state or ‘on’ tab which is very simple to produce using some minimal HTML and CSS. First, lets get our hands dirty with some mark up.

The mark up

All we need is a simple unordered list like below:

<div id="mainNav">
<ul>
<li id="current"><a href="home.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Notice the first list item has an id of “current”

<li id="current"><a href="home.html">Home</a></li>

This is our ‘hook’ to set the ‘on’ state in our menu. In this case it is set for our home page. On subsequent pages, the “current” hook will be set on the other pages like the example below for our second page which will be our ‘Blog’ page.

<li><a href="home.html">Home</a></li>
<li id="current"><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>

And that’s all folks (the mark up that is). I told you it was simple!

Lets get funky!

Now we need some images for our menu, so open up the image tool of your choice (I used Adobe Fireworks for this tutorials example) and set a canvas size of 20 pixels wide and 45 pixels in height. Set the canvas color to transparent. This will be our background for our menu.

Fig 1

Now draw a rectangle on the top half of the canvas with a height of 32 pixels and a height of 20 pixels and set the colour fill to white.

Fig 2

With our rectangle still selected, select the gradient tool and choose the colours #B02E3E (red) and #FFFFFF (white) like in the example below.

Fig 3

Now draw the gradient from top to bottom so you get a gradient like the image below

Fig 4

Our final step will be to add a solid colour to the bottom, so again grab the rectangle tool and draw a rectangle shape on the bottom of the canvas with a width of 20px and a height of 14px. Set the colour fill to #B02E3E and you should now have a completed image like below. Save this as bg.png

Fig 5

Let’s make some funky tabs!

Here comes the tricky part – creating the rounded corner tabs – ok I’m kidding – it’s not that hard! So heres how:

Create the ‘on’ tab right hand ‘door’

Open a new document and make a canvas of 400 pixels wide and 150 pixels in height. Set the background colour to transparent.
Now grab our friend the rectangle tool and draw a slightly over-sized rectangle on the canvas about 417 pixels wide and 172 pixels in height and set the stroke colour to #999999 at 1 px. Position the top right corner of the rectangle to line up just against the top right of the canvas so you can just see the stroke outline (see below)

Fig 6

Set the rectangle roundness to 8 so you get a curved corner at the top right.

Fig 7

Lastly, lets add some effects to make the tab stand out. With the rectangle still selected, go to the properties menu and click on the filters button. Select inner shadow from the drop down menu and input the settings in the pic below:

Fig 8

Finally crop the image to size and you should have the right hand door completed like this:

Fig 9

Save the image as onRight.png

The left ‘door

Open a new document and make a transparent canvas of 9 pixels wide and 150 pixels in height. Again we draw another over sized rectangle with the rectangle tool (about 400 pixels wide and 157 pixels in height) and set the colour fill to #FFFFFF with a 1px stroke set to #777777.

Fig 10

Like with our right hand door, set the rectangle roundness to 8 and click on the filter menu in the properties panel, select inner glow and enter the settings below.

Fig 11

Crop it to size and you have completed the second part of our first sliding door tab. When we get stuck into the CSS we will be putting these two guys together. Save the image as onLeft.png

Fig 12

Making the ‘off’ door tabs

Quite simply, follow the same steps as figures 6-12 only this time we are going to change the filter effects with a different inner glow colour and settings. Use the following settings for both images set the glow colour to #B02E3E and save the left side tab as “leftOff.png” and the right sided one as “rightOn.png”

Fig 13

Heres what your completed images should look like for your “off” state tabs

Fig 14

Fig 15

Now we have all our images, lets get to work and style these bad boys!

Styling it up!

Lets start by setting up some defaults to the body. Notice I have set the font size to 62.5%. This knocks the base font size down to 10px which we can notch up in EM’s later within our menu.


body {
margin:0 auto;
padding:0;
width:550px;
font-size:62.5%;
background: #fff;
font-family:Tahoma, Arial, Helvetica, sans-serif, Verdana;
}

Now we are going to position our menu by floating it left and setting the width to 100% so that it fills the width we set in the body. We have also used our first image – the background (bg.png) which we set to tile on the x-axis across the width of our menu. This will be our cool funky background gradient image.


#mainNav {
margin-top:100px;
float:left;
width:100%;
background: url(img/bg.png) repeat-x bottom;
font-size:93%;
line-height:normal;}


Here lets nullify any margins to our unordered list and set a list style to “none” to get rd of those nasty bullet points and set some padding.

#mainNav ul {
margin:0;
padding:10px 25px 0;
list-style:none;}


Next step is to float the list elements in our menu left and insert the first of our tabbed images – our off left side “door”. We set this to be positioned top left and not to repeat.

#mainNav li {
float:left;
background: url(img/offLeft.png) no-repeat left top;
margin:0;
padding:0px 0 0 9px;}


A menu is not a menu unless we can click it, so lets add some CSS to our anchors. Again we float left and display our anchors as Block so that they are clickable. We add our second image (offRight.png) which is the right sided “door” and add some padding around our anchors or linked text which gives some breathing space inside the tabs when they are joined together. Notice the positioning of the image? We set it not to repeat, but this time we position it at the top right. As this is the “off” state we set the text decoration to none to get rid of the default underlining of text.


#mainNav a {
float:left;
display:block;
background:url(img/offRight.png) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;}


The last thing we need to do with the tabs is add a ‘hover’ to them. Here I have chosen a colour and an underline state when the cursor hovers over the tabs.


#mainNav a:hover {color:#b02e3e;text-decoration:underline;}


Setting the Current state

To show your site visitors what page they are currently on we set the images up for the “current” state by using the first set of “doors” we created earlier. I have given a height of 25 pixels so that the tab overlaps the bottom of our background image and stands out.


#mainNav #current {
background-image:url(img/onLeft.png);
color:#b02e3e;}


And finally……..


#mainNav #current a {
background-image: url(img/onRight.png);
color:#b02e3e;
padding-bottom:5px;
height:25px;}


And thats it folks! All there is to it – 5 images, an unordered list and 8 blocks of CSS to create a cool stylish menu. If you are stuck and are having trouble creating the images, you can download the source files including the HTML and the CSS for you to experiment with or even use on your website.
The menu is cool with all standards compliant browsers (Firefox/Safari/IE7/Opera etc..) and also works as far back as IE5.5 and IE6! Only watch out when using transparent PNG’s as I have done as IE 6 and below will not display the images with alpha transparency backgrounds so either serve up an alternative version using conditional comments or keep it the same using gifs. The choice is yours!
Have Fun!

Download

Download the source files

This work is licensed under a
Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.

Easy Flexible Rounded Boxes

// March 29th, 2008 // 1 Comment » // css, tutorials

A number of people have asked me what is the easiest way to make rounded boxes without resorting to Javascript and other such methods. Well, you’re in luck and here is a method I use which is simple and lean in terms of mark up, also the box is flexible which always contains the text no matter what size the text is re-sized in the browser.

All you need is two images and an unordered list and away you go, here’s what we are going to make today:

View Live Demo

The Images

First open up the image tool of your choice (I used Fireworks for this tutorial) and create an a rounded rectangle image about 273 x 170 pixels like the one below. It doesn’t matter what colour or gradient etc.. you choose – you be the boss here, or if you wish, you can download the images with the source files at the end of this tutorial.

Once you have done this, give it a name. I chose “top.gif” as this will be the top of our box which will contain our title or heading.

Next we need to create one more rounded rectangle image which will form the bottom half of our box. With your image tool still open create an image like the one below. This time make it 273 x 400 pixels:

Once done, save it as “bottom.gif” and that’s it all the images you need!

The Mark Up

Simple mark-up is all that is needed. Here we create a div class of “round_box” and inside that div there is a level 2 heading and an unordered list made up of links. That’s all there is to it!
Note: I put in “#” as a url in this example, replace this with whatever you choose. Save this as “box.html”

<div class="round_box">
	<h2>Menu</h2>
	<ul>
		<li><a href="#">A BulletProof Idea</a></li>
		<li><a href="#">Look What My RSS Dragged in #4</a></li>
		<li><a href="#">Green Press</a></li>
		<li><a href="#">Introducing Cardiff Geeks</a></li>
		<li><a href="#">Splashes Of Colour</a></li>
		<li><a href="#">Hidden Gems Inside Mac OSX</a></li>
	</ul>
</div>

Styling The Box

Again this is so easy – let’s start by specifying a font-size and type:

body {
  font-family: Helvetica, sans-serif;
  font-size:small;
  }

Now to style the links, here Im choosing green with a hover state of orange with underlined text.

a {
  color: #7DcE34;
  text-decoration:none;
  }

a:hover{text-decoration:underline;color:#ff9900;}

Now to give the bottom half of the box a width and a background image (bottom.gif):

.round_box {
  width: 273px;
  background: url(img/bottom.gif) no-repeat bottom left;
  }
 

Next we set the top of the box which will contain our second level heading or title and position it’s background image (top.gif). Notice I have set a border of 2px solid green, this gives a “join” between our two images.

.round_box h2 {
  margin: 0;
  padding: 6px 8px 4px 10px;
  font-size: 180%;
  color: #fff;
  border-bottom: 2px solid #7DcE34;
  background: url(img/top.gif) no-repeat top left;
  }
 

Now to style our unordered list:

.round_box ul {
  margin: 0;
  padding: 14px 10px 14px 10px;
  list-style: none;
  }
 

And our list items:

.round_box li {
  margin: 0 0 6px;
  padding: 0;font-size:120%;
  }

Save this as “box.css”, and that’s it finished!

Source Files

Download Source Files Boxes.zip (12kb)