Using CSS, you can add effects to your website’s design to enhance its appearance, such as stitched or rounded borders, shadows, and background images. This can all be done with simple CSS3 coding.
For the sake of example, let’s begin with a blank box that you can add these effects to. After that, we will examine how these can be applied to images. You can start by adding a div tag to your HTML, with class=”customclass”.
It will look like this in your HTML file:
Then go into your stylesheet and define your custom id or class.
Here are some basic attributes to get started:
customclass {
background: #55ccaa;
position: relative;
width: 500px;
height: 400px;
margin: 20px;
padding: 10px;
}
BORDER EFFECTS
Thanks to CSS3, adding rounded corners to your box or image is simple.
All you need to do is write this code inside your custom class or id (this can be added to the “customclass” in your css file you just made:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Your box should now have rounded corners. It is important to note that many of these effects will not show properly in Internet Explorer versions prior to version 9.
If you want to add a stitched look to your box, you will need to add two things: the “border” property, and the “box-shadow” property:
border: 2px dashed #ffffff;
box-shadow: 0 0 0 6px #55ccaa;
-moz-box-shadow: 0 0 0 6px #55ccaa;
-webkit-box-shadow: 0 0 0 6px #55ccaa;
The border property adds a fancy border around your content, which is dashed to give it a stitched appearance. Other border styles you can experiment with are solid, dotted, double, groove, ridge, inset, and outset.
The box-shadow property is used here to create a solid line around the dashed border to help with the stitched look, but it can also be used to add a realistic shadow beneath your box. To add a shadow effect, simply add a second shadow in your box-shadow code, so it looks like this:
box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
IMAGES Let’s say you want to keep your new div but put an image in the background.
First, find the dimensions of the image and use those values for the “width” and “height.” Then, change your “background” property like so:
background: #55ccaa url(‘your.image/location.jpg’) no-repeat;
If you want all the images on your page to use these effects, you don’t need to add a div or any HTML at all. Simply add all the CSS to the “img” tag in your stylesheet like so:
img {
border-radius: 10px;
border: 2px dashed #ffffff;
box-shadow: 0 0 0 6px #55ccaa;
-moz-box-shadow: 0 0 0 6px #55ccaa;
-webkit-box-shadow: 0 0 0 6px #55ccaa;
box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 6px #55ccaa,2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
}
There you go, a simple but helpful tutorial about using the latest CSS3 styles to your HTML5 website with only minor effort.
Simple as that!
By Peter Marino, Chief Designer and COO of reelWebDesign.com, an HTML5 Web Design company in NYC.
