Easy ways to start using advanced CSS techniques

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.

Text Shadow

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; 

Example:

Border Radius

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.

Box Shadow

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;

Example:

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!

4 comments (Add your own)

1. Michael Thomas wrote:
Two of my most used bookmarks are great CSS Generators:

Rounded Corners: http://border-radius.com/

Gradient Generator: http://gradients.glrzad.com/

I think it's absolutely critical to understand the fundamentals of the syntax for these topics, but when in production mode using a Generator can help speed things along!

Wed, April 13, 2011 @ 10:46 AM

2. Ethan Sisson wrote:
Thanks for sharing those, Michael. Just to add to that, my favorite gradient generator is http://www.colorzilla.com/gradient-editor/.

And you're right on. You've got to understand the syntax and proper use of these things. For example, the ColorZilla gradient generator doesn't output a non-vendor linear-gradient declaration, so I have to manually copy and paste the -moz gradient and remove the vendor prefix. It's still my favorite gradient generator though, as it has a familiar interface for editing a gradient (i.e. Photoshop, et al.).

Fri, April 15, 2011 @ 12:48 PM

3. Skip wrote:
cheap auto insurance 83093 cheap car insurance >:]]]

Wed, July 10, 2013 @ 12:38 AM

4. auto insurance quotes wrote:
And I was just wondering about that too!

Fri, September 13, 2013 @ 5:51 AM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free