Useful CSS (including CSS3) Snippets

In this weeks web design blog post, I thought I’d collect together some useful snippets that I like to keep handy for all my new projects. Things like the text selection styling add a really nice subtle touch of progressive enhancement, without taking anything away from clients using older browsers.

Placeholder Text Styling

With HTML5 comes the placeholder attribute for input elements. Whilst it doesn’t have great fallback support, it is a nifty tag for users with fancy new browsers – and as such, it can be styled. Level of support varies, but you can get your styles started with:

::-webkit-input-placeholder { color: #ccc; font-style:italic }
:-moz-placeholder           { color: #ccc; font-style:italic }

Placeholder styling doesn’t have a regular selector yet, but eventually I’d say something like “placeholder” would be a safe bet! Until then, remember that currently only Webkit and Firefox support styles for the Placeholder attribute – though Opera can’t be too far behind, having added support for the HTML5 attribute itself last December.

Text Selection Colour

Change the colour of your highlighted text to one of your choosing, by using the code below. The example here will give you a lovely shade of purple, with white text. The code below contains the standard vendor prefixes (Firefox, Opera and Safari respectively) and then the regular one. It’s important to always put the proper one last.

::-moz-selection       { background:#451f8f; color:#fff }
::-o-selection         { background:#451f8f; color:#fff }
::-webkit-selection    { background:#451f8f; color:#fff }
::selection            { background:#451f8f; color:#fff }

Image Preloader

This is a nifty trick for giving your website a slick, AJAX-like feel, without anything of the sort being needed. Make your preloader.gif a tiny, animated gif file and it will load first, before any bigger images. Ta-daa!

img
{
    background: url(img/preloader.gif) no−repeat 50% 50%;
}

Box Shadow & Text Shadow

I’m going to group these two together because in terms of the values you get to play with, they’re very similar. Box shadow still requires some vendor prefixes to ensure the widest support [possible] – again making sure that the regular expression is declared last.

Both box shadow and text shadow have 4 values. In order, these are:

1. Horizontal Offset – positive puts the shadow to the right, negative to the left
2. Vertical Offset – positive will put the shadow underneath, negative above
3. Blur Radius – 0 is the sharpest, and the higher the number, the more blurred the shadow
4. Colour – no explanation should be needed for this!

/* Box Shadow: Creates a regular, drop shadow effect */
.block-element {
-moz-box-shadow:       3px 3px 3px #666;
-webkit-box-shadow:    3px 3px 3px #666;
box-shadow:            3px 3px 3px #;
}

/* Box Shadow: Creates an inner shadow effect */
.block-element {
-moz-box-shadow:       inset 0 0 5px #666;
-webkit-box-shadow:    inset 0 0 5px #666;
box-shadow:            inset 0 0 5px #666;
}

/* Text Shadow */
.text-element {
text-shadow:       1px 1px 0 #666;
}