Beveled Images Using Cascading Style Sheets

By HTMLGoodies Staff

Web developer James Edwards recently wrote a blog about creating beveled images using Cascading Style Sheets (CSS). He came up with four techniques that will allow you to do just that, and shows you the pros and cons of each method.

Edwards' first technique involves using generated content on the image itself. This "ultra-clean" technique requires no additional markup, but alas, it only works in Opera.

The second technique Edwards presents is to use generated content on a wrapper element. This works with a wider range of web browsers, but requires additional markup and explicit dimensions.

His forth technique is to use shadows instead of borders. This is the most visually appealing technique, but, again, it only works in one browser--this time Firefox 3.5 or later.

The last technique works for all browsers, but requires more additional markup and explicit dimensions. Edwards details the methodology behind his techniques, and explains how to take it further by using colorful borders for a "gel-like" effect.

View Full Article

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

Thanks for your registration, follow us on our social networks to keep up-to-date