CSS3: Quick Tips

Transparency settings via CSS have been around for some time, and even Internet Explorer has made way for transparency using non-standard filters. But CSS3 expands on our options by adding RGBA colors to the well-known opacity property:

Using CSS3 Opacity poperty, we’ve set the element to be 60% opaque (or 40% transparent). The Opacity property accepts any decimal value between zero and one, with zero representing full transparency.

You can also set the color option with an alpha setting:

Adding rounded corners to an HTML element used to be anything but trivial, but with CSS3’s border-radius property makes those old-school solutions seem obsolete:

Including this code will add a 40px radius to each of the corners on the affected element. The above example code is the shorthand notation, and is the simplest and most common way to use border-radius.

Drop shadows were impossible without the use of images or some kind of complex scripting. Using the text-shadow property on an element is much easier.

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. This property accepts four values: The first is a color value, the next two values represent horizontal and vertical offsets and the last value is an optional blur radius setting.

Many developers have been irked by the current W3C default box model. With that box model, if you define and element to be 500px wide and 24px 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 box-sizing property, however, you can easily fix this problem by telling the browser to render widths and heights with padding and borders included:

The default value of ‘content-box’ 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.

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 images or scripts:

The syntax is quite similar to that of text-shadow, with two key differences. 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 color (and opacity, if you use RGBA) of the shadow, you can create some neat effects.

Let’s try to make an outer glow effect and we’ll apply the glow to an element that appears on a dark background:

Here we set our shadow color to a light yellow shade, removed any offsets, 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 values until you get your glow looking just right.

With CSS3 we can do simple animations that play with certain events occurring on a page. Transitions are common on links nowadays, so here’s a simple color transition that you can put on all text links on your site:

The event that triggers the transition is the :hover event, defined using the :hover pseudo-class. The transition property accepts four values. The first is the name of a property, which is any animatable CSS property. You could also use the ‘all’ keyword here to indicate that every property should animate, not just specific ones.

The next value we’re defined is the duration of the transition, which could be defined in seconds(s) or milliseconds(ms). The third value is the timing function, which defines the speed, or timing of the animation. Finally, you could also set a delay, but we haven’t in our example.

If you’ve messed with around with CSS3 transforms, then you’ve probably noticed a limitation. Each time you do a transform, the starting point of the transform is fixed in the middle of the element. So, for example, if you do a rotation transform, the object will spin right in place.

With CSS’s transform-origin property, you can define a custom origin, or starting point, for your transformation:

The two values represent horizontal and vertical offsets, respectively.

Leave a Reply

Your email address will not be published. Required fields are marked *