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…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)

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.

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Position Fixed for IE6

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Animated Navigation using jQuery and CSS

How to create an animated navigation menu using jQuery & CSS. Fancy but a very simple technique! The good thing about this technique is that it degrades gracefully and is still accessible even if javascript is turned off…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Reinventing a Drop Down with CSS and jQuery

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)