The new functions and features available in CSS3 can be intimidating and overwhelming at first. The best way to gain a foothold and get comfortable with it is to find the "low hanging fruit" in its new features. I've put together several of the ones I use personally, but I should also caution you in their use. You may not know this... but not all browsers support some of these features. Crazy, right? So when employing these techniques, be sure you're affecting the aesthetic of the page only and not the functionality.
Creating a sweet text shadow using CSS is really quite simple. The example below uses a standard black drop shadow. But of course, you could use text-shadow for other things as well, such as a subtle (or heinous) text glow.
The syntax is text-shadow: x-offset y-offset feather #color;
The new border radius attribute allows you to round off edges that would have previously been square. You would use this to create rounded edges or circles instead of images. This helps the site load more quickly because it doesn't have to download the now-superfluous images.
The syntax is border-radius: top-left top-right bottom-right bottom-left;
Example of single radius:
Example of multiple radii:
And you won't want to forget, until CSS3 is more widely adopted, that your CSS will need to target specific browsers. To do that, utilize -webkit-border-radius for Safari and Chrome and -moz-border-radius for Firefox.
The box-shadow attribute allows you to create either a drop shadow or glow around an element. This is just like the text-shadow but for areas.
The syntax is box-shadow: x-offset y-offset feather #color;
And just like the border-radius attribute, you'll have to target specific browsers to use this one.
I hope you find these useful! Do you have any simple CSS3 techniques that you like to use? If so, let us know in the comments. We'd love to see what you've found works for you!
Tue, April 12, 2011
by Evan Brandell filed under