Border Radius and Capital FM

Earlier on in the month I showed you how Capital FM used the HTML5 canvas tag to create a picture gallery. One of the features that I didn’t show you was when you clicked on a picture it popped up to show a bigger version of the picture. This effect is often referred to as a lightbox.

Capital FM used images, CSS and JavaScript to achieve this effect across all browsers. I am, however, going to show you how you could build this same effect using CSS3 and without requiring images to round the corners and create a drop shadow effect.

Firstly we create a link. When this link is clicked we will show our lightbox.

Next, we add our html mark-up to create our lightbox.

This consists of a div with an Id of lightBox, it also has the CSS class name blackBackground which we will use to style it later. This div will provide a black background to the picture. We will also make this background semitransparent.

When someone clicks the black background the lightbox will disappear.

We also have a white frame, which is just a white box that will frame the picture. It’s this white frame which will have the rounded corners.

We also have the picture that we are going to display and finally a close button that when clicked will hide the lightbox.

Next we add the JavaScript. To make things easy I have added a reference to the jQuery Library. I have added two functions. One called showLightbox and the other called hideLightbox.

These use the jQuery library to fade the lightbox in and out of view.

I used the fadeIn and fadeOut functions on the jQuery library to achieve this. The 500 parameter just means that the fade effect will last for 500 milliseconds; you can change this to create a longer or shorter fading effect.

Finally we will add the CSS. The first class is called blackBackground.

This class creates a black semitransparent rectangle that has a height and width of 100% so that it fills the screen.

I have used the new rgba property to express the colour of this background. This property not only sets the colour but also supports an alpha channel so that the colour can be semitransparent and site underneath will show through.

You simply set the Red, Green, Blue to achieve the colour you want; in this case 64,64,64 (which is black) and then set a value between 0 and 1 for the alpha channel. Here I have used 0.7 to achieve 70% transparency.

Next we have the CSS class whiteFrame. Here we have added border radius. This is the most basic example of border radius, where we have applied a 10px border radius to each corner. You could if you wanted, set each corner to have a different radius.

I have also added a box shadow effect. This will create a shadow all around the whiteFrame. IE9 supports Box shadow without a vendor Prefix, but if you want to support chrome, safari and Mozilla versions lower than 4 you will need to add the webkit and moz vendor prefixes.

Finally I have added a close button. Again I used the Border-radius property to give all corners a 10px rounding.

When we launch the site and click the show picture link we will see the lightbox fade into view. In browsers that support border radius, rgba colors and box shadow we will see the effect that can be seen here on the left. In older browser like IE7 we will see a flatter squarer version.

If you want to make older browsers look the same you will need to use images, JavaScript and CSS to achieve this. It is, however, it is up to you as to whether your website needs to look exactly the same across all browsers or if you will only use these sorts of visual effect on more modern browsers.