Start Your Free 14-day Trial

.publishpath.com

No spaces, special characters, or punctuation

I'm a designer/developer and I build websites for customers. Enable the developer features and contact me about the program.

By clicking on the button below to sign up, you understand and agree that the use of Oracle's web site is subject to the LightCMS Terms of Service. Additional details regarding Oracle’s collection and use of your personal information, including information about access, retention, rectification, deletion, security, cross-border transfers and other topics, is available in the Oracle Privacy Policy.

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.

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!