Simple CSS techniques that add extra detail to your website

In this article I will go over some simple CSS techniques that add that "extra touch" to virtually any website. These CSS properties are compatible with most modern browsers (except some of them don't work in IE, as usual) and are super easy to implement. There are many ways you can style these, so please don't be limited by some of the examples that I provide in this article. Comment and let me know if these are helpful to you and show off your work where you have used these!

text-shadow: the drop shadow example

Text-shadow property is fairly self-explanatory. It is there to create a drop shadow under your specified text. Example below shows this element creating a nice little shadow with a 1px offset on both x and y axis and another one with a 2px offset on both axis as well as 5px shadow "blur".

h1 {
text-shadow: #000 1px 1px 0;
background-color: #444;
}

Property values:

1. Color, which in this case is plain black (#000)
2. X-axis offset (1px)
3. Y-axis offset (1px)
4. Shadow blur (0). The higher the blur value, the more your shadow will be, you guessed it, blurry. NOTE: this value also uses pixels, so 1px, 2px, etc.

Best practices:

• Try to keep the blur value to a minimum because it can create some hideous looking results.
• Try to apply the shadow to elements with little text, such as headings. If you start applying the shadow property to elements with a lot of text, the text can become very difficult to read.
• The shadow property works best on darker backgrounds. If you end up applying it to the text on brighter backgrounds, ensure that your shadow color is set to that of the background color (only a little bit darker obviously).
• The whole idea behind adding small details to your website is to not make them too obvious and stand out like a sore thumb. People who are detail oriented will appreciate them, most however won't notice much. Keep your effects to a minimum and don't over-use them.

Examples:

• www.drupalstyle.com/templates - click on any of the filter drop-downs and look at the text
• http://preview.drupalstyle.ca/traffic - the logo and all of the headings

text-shadow: deboss example

Alternatively, text-shadow property can be used to create a pretty neat "deboss" effect. Instead of using a darker value for your "shadow", use a brighter one. It should be brighter than your background color in this case, otherwise the effect won't be visible/correct. Take a look at the image below to see what I'm talking about.

h1 {
text-shadow: #B1B1B1 1px 1px 0;
background-color: #999;
}

Best practices:

• This effect should be used on darker backgrounds.

Examples:

• www.drupalstyle.com/tutorials - check out the page heading
• www.metalabdesign.com - the effect can be seen throughout the website on all the headings

Rounded corners

In case your design has room for things like rounded corners on pretty much any CSS element that supports borders, then this is for you. Add the following code to get a 2px radius on all of the corners as seen on most of the elements on the form below:

div {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-opera-border-radius: 2px;
}

The advantage

...of using only CSS to achieve this effect is the simplicity and ease of use. You don't have to over-complicate your code with extra images, DIV'ss and many CSS properties, instead you add 3 lines of code to your CSS file.

The downside

...of using this effect is that only select browsers support it, with many old ones unable to re-produce it. Use this effect if your rounded corners are not a vital part of your design, otherwise consider other options.

Examples:

• www.chagallglobal.com/artists/stuart-yankell - scroll all the way down to the bottom of the page and you will see a button with rounded corners

CSS transparency

 Another great tick that can be achieved by using only CSS. Again, not all the browsers support it, but then again you shouldn't be using those anyways. As far as I know, you can apply it to any HTML tag. The code below will apply 50% opacity to whatever element you choose.

div {
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
}

Examples:

• www.drupalstyle.com/templates - click on any of the filter drop-downs