Cross-browser drop shadows using pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?

One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish. CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…

CSS Opacity That Doesn’t Affect Child Elements

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before…

CSS Gradients via Canvas

CSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers that implement the HTML5 canvas element. To use, just include css-gradients-via-canvas.js anywhere on the page. Unlike WebKit, this implementation does not currently allow gradients to be used for border images, list bullets, or generated content. The script employs document.querySelectorAll() – it has no external dependencies if this function is implemented; otherwise, it looks for the presence of jQuery, Prototype, or Sizzle to provide selector-querying functionality…

IE8 Rendering Modes: One Meta Tag to Rule Them All

You’ve mastered doctypes, now it’s time to get control over the new kid on the block in the browser rendering space. Internet Explorer 8 is gaining traction and is actually the first browser to extend – and in many ways replace – the doctype standards/quirks switch. With a single line of code – one meta tag to rule them all – you can reduce your QA time by exerting total control over how Internet Explorer 8 renders a page…