Category Archives: resource

Fiddling with CSS3 box-shadow

Box shadow declarations can confuse me. So I decided to create a jsfiddle to show the basics and where I could play with additional styling in the future.

You can use box-shadow to help create double borders, and you can play with the values to get just shadows on certain sides of the box. You can shadow inside or outside the box. You can add multiple values for box-shadow, separated by commas, to build up your styling.

Here is a great reference for box-shadow, with additional examples.

Advertisements

Confusing layout stuff, explained

The bottom line? Layout of html pages, using CSS, can be confusing. I keep learning more things along the way. For instance, there are things like hasLayout in IE, and block formatting contexts in the W3C spec. Here are a couple of articles that are good explanations of both of these things.

hasLayout

block formatting context

Sprite Magic

There is a technique for cutting down the load time of your pages called CSS sprites. Basically, instead of loading a lot of little images into your page, you load one big image that contains all the little images. You then create a “window” using height and width for viewing a piece of the image and you move the desired piece into place using background position. That’s the quick summary. For further information on this technique, read this article on alistapart.com.

One thing I find with most of the examples on the web is that they use the technique on block level elements. That works, because you can set the width and the height of a block level element. But what if you want to use this technique for inline images, like icons? You can’t set the height on an inline element. Are you out of luck? The answer is no, but it’s not quite as neat. You have to use a blank.gif (1px by 1px) and set the width and height of the image to make the sprite window. Then you set the class name of the sprite on the image and the background image shows through. Voila! But wait, you say, why even bother if you are using an image in place of another image? Well, you really only have to load two images for all your icons on the page, the blank.gif and the large sprite image. If you have 10 icons in your page, that’s loading 8 less images. When performance is critical, this technique might just be worth it. You decide.

Here is a nice little tool for creating css sprites – the large sprite image and the css for the background positioning of the individual sprites – which makes this technique practically effortless.

Run multiple versions of IE on your PC

If you are a web developer, you can’t afford to blow away your prior version of IE because you still need to test in that browser! Tredosoft to the rescue with their multiple ie installer. I have only done this myself on Windows XP, and it works well. There is one gotcha I encountered, which is fixable. You have to go into the registry, but it’s not too scary. Until I made the fix, my conditional IE comments were broken. I could test for IE, but I couldn’t test for a specific IE version. Not too cool, especially if you are trying to use Dean Edwards’ IE7 script, but here is the fix….http://www.positioniseverything.net/articles/multiIE.html, which just happens to be from one of my favorite sites (it’s included in my blogroll).

Dean Edwards’ IE7 script

This set of script files, found here, are a cross-browser programmer’s best friend. Upload them to your server, link them into your page with a simple script tag, and voila, you add web standards to your IE browsers. For me, the alpha transparency and min-width stuff is worth the price (it’s free!), but it contains so much more. There is also a google group you can join that Dean himself contributes to.