CSS3 box-shadow is a very useful property — creating drop shadows programmatically can save web designers a lot of time in image editing software. However we have a problem if we need to replicate those shadows in Internet Explorer, which does not support this property. In this article, we present a cross-browser solution that uses box-shadow in supporting browsers, and IE filters to fake the drop shadows in IE.
CSS3 shadows and rounded corners are easy to understand at a basic level, but what if you want to start using them in more advanced UI styling, such as textured buttons and semi-transparent glass effects? In this article Opera designer Jan Henrik Helmers hows you how to create these UI features and more, using CSS3 features, and no images whatsoever.
Opera 10.50+ comes with support for the CSS3 Backgrounds and Borders specification. Amongst them are border-radius, border-image, multiple backgrounds and box-shadow. Opera 10.60+ updates this support with box-decoration-break and an updated background shorthand. We’ll showcase all these and more through examples and explanations.