Create a stylish content box using only CSS3
With web designers visual methods being driven more and more by CSS lately and less of a reliance on images, it’s now pretty easy to create neat elements for your site. Here’s an example of a content box based on stylish web trends made possible with, our ever improving friend, CSS3.
There are some slight differences in the syntax between mozilla and webkit browsers, especially for the gradient, but the more you use it the more it becomes second nature. Lets go…
Step 1
We don’t need to show our html markup as it’s just a standard doctype with a div inside the body tag <div id=”container”> and inside this div a <h2> title and some lorem ipsum text inside <p> tags.
First lets start by adding a basic reset and styling for the typography
html, body, div, h1, h2, p { border: 0; margin: 0; padding: 0; }
a { color: #007ae1; }
a:hover { color: #003c6f; }
h2 {
text-align: center; padding-top: 20px; margin-bottom: 10px; font: 24px Georgia; color: #333;
}
p {
font: 13px Helvetica, Arial; color: #333; padding: 10px 15px 0 15px;
}
Step 2
In the HTML we created a div with an id of container, all of the below is encased inside #container { }, so lets move on to the fun part of styling it up
Firstly the sizing and positioning:
margin: 30px auto;
width: 250px;
height: 270px;
A subtle border and rounded corners:
border: 1px solid #fff;
border-radius: 10px; /*Fallback for if/when IE supports it*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Then the background colour elements:
We need to declare a fallback colour for IE (we could use a background image for IE users but currently I’m conforming to the “it doesn’t need to look the same in every browser” so for users with supporting browsers, they get a more visually pleasing experience) then apply a linear gradient going from a subtle grey at the top downwards but finishing 15% from the top:background: #ffffff; /*fallback for IE*/
background: -moz-linear-gradient(top, #f1f1f1, #fff 15%);
background: -webkit-gradient(linear, 0 0, 0 15%, from(#f1f1f1), to(#fff));
And lastly the box shadow:
By declaring a 0px distance for the X and Y directions we get a nice shadow all around our box and by using rgba we can alter the alpha channel to drop the opacity to make it more of a subtle effect:box-shadow: 10px 10px 5px #999;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
The end result:
An easy to style content box with CSS3 and not a single image in sight. It also degrades ok for non-supporting browsers (IE!) and is easier to edit at short notice without having to re-slice and upload images. Give it a go on your next build.
