5 Essential CSS3 effects

Discover the CSS3 techniques needed to recreate visual tricks that were once the domain of Photoshop, like:
– Rounded Corners on Boxes
– Drop shadows on text
– Box shadows and glow effects
– Tooltips
– Box sizing

Rounded Corners on Boxes
As is the case with many design techniques, adding rounded corners to an HTML element has traditionally been anything but trivial. Extra markup, bloated scripts, sliced images and other less-than-optimal methods have all at some time been used to achieve rounded corners. But CSS3’s border-radius property makes those old-school solutions obsolete. Here’s the syntax:

.example {
border-radius: 40px;
}

Including this code will add a 40px radius to each of the corners on the affected element. The example code above is the shorthand notation, and is the simplest and most common way to use border-radius. However there are several other quick tips for using this property, a few of which we’ve included below:
• With longhand, you are able to define a different radius value for each corner
• You can create an ellipse by increasing the radius values
• Fluid elliptical shapes can be created by setting the border radius to 50px for all corners
• You can set different vertical and horizontal radius values on a single corner using the slash-based syntax.

Drop shadows on text
In years past, drop shadows were impossible without the use of images or some kind of incredibly complex scripting or proprietary code. We’re going to add some simple CSS3 to create a drop
shadow on a heading element.

h1 {
text-shadow: #999 2px 2px 4px;
}

Now our text has some subtle visual depth added, and this is accomplished with no images, no JavaScript, and only a single line of CSS. So how does this piece of code work? Well, this new property accepts four values. The first value is a colour value. In our example we’re using #999, which is a light grey. This can be any valid CSS3 colour value, including an RGBA or HSLA value that incorporates an alpha transparency setting. The next two values represent horizontal and vertical ofsets. In our example, 2px is just enough to give us the efect we’re after. The last value is an optional blur radius setting, which we’ve set at 4px to keep our shadow from appearing overly sharp.

Box shadows and glow effects
CSS3 allows us to add a shadow to virtually any element on the page using the box-shadow property. This is done with pure CSS with no need for cumbersome images or scripts. But CSS3 expands on our options by adding RGBA colours to the well-known opacity property. Here’s how the CSS3 code looks when we want to create a simple box-shadow:

.shadow {
box-shadow: #aaa 2px 2px 20px 5px;
}

The syntax is quite similar to that of text-shadow, with two key diferences. We have the option to include a spread distance (5px in our example) and an optional inset keyword (not included in
our example) to put the box-shadow on the inner part of the element. But box-shadows can be used to create more than just customary shadows. Because you’re permitted to change the colour (and opacity, if you use RGBA or HSLA) of the shadow, you can create some neat efects. Let’s try to make an outer glow efect, and we’ll apply the glow to an element that appears on a dark background.
Here’s the code:

.shadow {
box-shadow: #f0ff66 0 0 30px 8px;
}

Here we’ve set our shadow colour to a light yellow shade, removed any ofsets, and we’re using a relatively high blur radius setting along with a moderate spread distance. Depending on the
design and the context of the box, you could fiddle with these.

Tooltips
Tooltips are another element that have always required JavaScript. While you may still need a fallback option for older browsers, modern browsers let us create tooltips using pseudo-elements along with an HTML attribute. So let’s say we have the following HTML:

001 Lorem ipsum dolor sit amet hover over this link
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.

a:link {
position: relative;
text-decoration: none;
border-bottom: solid 1px;
}

a:hover:after, a:hover:before {
display: block;
}

This paragraph of text has a link with a data tooltip attribute, which is an HTML5 data attribute (see bit.ly/4AbRRY). We can use this attribute to serve up our tooltip.

We’re relatively positioning every link element to create context for absolutely positioned child elements. We remove the link underlining, and add a bottom border to mimic it. This is to avoid
the underline appearing on the tooltip. Next we create two pseudo-elements that will appear on hover. The :before pseudoelement will make a triangle shape using pure CSS. This will form the bottom of our tooltip. The :after pseudo-element forms the main part of the tooltip. It has rounded corners using border-radius, along with some other aesthetic properties. But the most important part of this element is the value for the content property. Instead of a customary value in quotes, or a commonly used empty string, we’re using the attr() function, which allows us to grab any attribute value from the element we’re targeting (in this case, the link). As a side point here, we could use the title attribute, which would seem to it this purpose well, but then we would have more than one tooltip appearing on hover, potentially causing readability and usability problems. The only other parts of the code that you should take note of are the top and left properties, which position the tooltip relative to the link. In this case, we’re using pixel values, and we’re focusing the positioning on the top-left corner of the link. For your own project, you may need to adjust the positioning depending on the size of the text, or other factors.

Box sizing
Many developers have been irked by the current W3C default box model. With that box model, if you deine an element to be 500px wide with 20px of padding all around, then the element will actually have a width of 540px. This is not normally a problem – until you decide to change the padding. If you increase the padding, while still requiring that the total allotted space remain the same, then you have to recalculate your element’s width. Therefore, it can get a little bit tricky to maintain these sizes. With CSS3’s box-sizing property, however, you can easily ix this problem by telling the browser to render widths and heights with padding and borders included:

.element {
width: 200px;
padding: 0 30px;
box-sizing: border-box;
}

The default value of ‘content-box’ (which represents the standard box model) is overridden by our value of ‘border-box’, preventing the box from getting larger in area due to any increase in
padding or border sizes. This is much more intuitive and actually works the same way that the box model works in Internet Explorer in ‘quirks mode’ (or in IE5.5 mode).