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…
Direct link: Cross-browser drop shadows using pure CSS
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.
Direct link: CSS Opacity That Doesn’t Affect Child Elements
An article about text rotation using just CSS. Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer back to version 5.5 even…
Direct link: Text Rotation with CSS
How do you get position:fixed css working in Internet Explorer 6?
The trick is to use an Internet Explorer CSS expression. You can’t simply put the logic in there directly or it’ll cache the result and not update. The simplest fix is to wrap your logic in eval…
Direct link: CSS Position Fixed for IE6
Direct link: Animated Navigation using jQuery and CSS
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…
Direct link: A Look at Some of the New Selectors Introduced in CSS3
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…
Direct link: CSS Gradients via Canvas
A great tutorial explaining how you can use a single image sprite and some clever CSS to replace HTML date fields with fancy images…
Direct link: Date Display Technique with Sprites
The standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can only contain simple text. This tutorial shows how to replace a dropdown with a custom control using CSS and jQuery…
Direct link: Reinventing a Drop Down with CSS and jQuery
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…
Direct link: IE8 Rendering Modes: One Meta Tag to Rule Them All