In This Issue...

Introduction

Welcome to Design View 5.

Well, it's official. CSS is still hot topic #1 with the Web designers who visit SitePoint.com. Just four weeks after its release, over 2,500 people have grabbed a copy of 'The CSS Anthology: 101 Essential Tips, Tricks & Hacks' - more than twice as many as any of our previous books have done in their release month!

Although we knew this was a great book before we launched it, we have to admit that the interest level has been a surprise for us - a happy one at that.

But let's say you've managed to cunningly avoid the whole CSS bandwagon 'till now. You might be considering taking another look at it ... but where to start,.. where to start?

Here are some 'easy wins' to get you rolling:

1. Inknoise's Layout-o-matic: Everyone loves a button. Choose from 1,2, or 3 column layouts, set your margins and padding and 'ker-CHING!' - instant 'pre-hacked' layouts.
2. Accessify's List-o-matic: Hey, why not give that elegant new layout the kind of navigation that just screams 'now'? Ian Lloyd's nifty List-o-matic builds you flatteringly styled, list-based navigation in all this season's 'in' colors. Available in horizontal and vertical.
3. Centricle's Ruler 1.2: Another highly useful little bookmarklet. Jab this button, choose a color, drag a marquee in your browser window and you have a 'PhotoShop-like' info-window giving you pixel measurement feedback in realtime. Brilliant for trying to figure out percentages and column scaling.

The first two of these tools will help give you a solid code base to build on, while the third will help you keep track of what you're looking at. All are immediately useful and, importantly, absolutely free.

Screen Calipers 3.0

On the subject of screen measurement tools, if you're looking for a dedicated screen ruler application that isn't limited to the inside of a browser, Nico Westerdale (iconico.com) has just released V3.0 of his impressive 'Screen Calipers'. I admit to having been a fan of this tool for a number of years now.

Apart from the standard functionality available in previous versions (e.g. choice of units, skins, transparency, etc.) the latest version has 360° rotation abilities - a very cool feature, although I admit I haven't worked out where to use that yet.

Regardless, like all of Nico's Web utilities, it's well-designed and very useful. Download a copy with most of the features enabled free-of-charge, or pay a small fee for the full feature set.

Quick Tip: Transparency

Ahh ... 1996. Clinton gets a second term, Hootie and his Blowfish are 'Best New Act' and PNG is rubber-stamped as a W3C recommendation.

Heady days indeed. Alas, for any number of reasons, all three have found the intervening years a bit of a struggle.

Of course, PNG's problems have not been of its own making (which is certainly more than can be said for Bill). It's a lovely format with sublime transparency support, impressive compression abilities and very nice cross-platform gamma correction.

Unfortunately for pretty little PNG, IE's blithe and complete ignorance of it's finer points has usually left it standing in the corner while all the nice developers danced with GIFs and JPEGs. Very sad.

So, what are PNG's issues? As has been well documented, IE6 and 5.5 can be wrestled into rendering PNG correctly, but often, the 'show stopper' has been IE5, which usually renders the transparent portion in an awful dishwater gray.

In many cases, you may find Photoshop's 'Diffusion Transparency' feature to be a useful option here.

Take a graphic like this with a soft semi-transparent glow.

We know we can get the PNG to work nicely in most browsers, but what's the best way to make an acceptable fallback option for IE5?

1. Open your PNG in Photoshop.
2. Go to 'File/Save for Web'.
3. Set your export settings to 'GIF - Selective - Diffusion'.
4. Check the 'Transparency' checkbox, and select 'Diffusion Transparency' from the dropdown.
5. You should get something like this.

Looks kinda clunky and unimpressive at first glance, right?

But what does it look like when you drop it into a more typical backdrop (i.e. not a white and gray checked one)?

See for yourself. In fact in this project, the result was acceptable enough for us to dump the 'alpha-filter fix' for IE6, and just allow it to display the GIF version. Try a side-by-side comparison of the site in Firefox/Opera vs. IE and you'll see only a subtle difference.

Make no mistake: 'Diffusion Transparency' works best in situations where foreground and background colors are not radically different. Yellow glows on blue skies are going to hurt you. But, even in worse case scenarios like that, your speckledy dithered GIF should only be sent to those IE5 users -- which, in itself, shouldn't constitute a disaster.

Time Savers

There's nothing quite like that moment when you find a shortcut method of doing something you've been doing in 'longcut' for years. Usually, I find the sense of joyful accomplishment just overshadows the sense of 'hmmm ... how many hours have I wasted waiting to be tapped on the shoulder about that one?'

Corrie's been giving us a peek and some of her personal Photoshop epiphanies this week. Check them out.

Read the blog entry:

Design Blog: Pixel Perfect by Corrie Haffly Copying Layer Styles in Photoshop (18 comments)

I Like Drop Shadows

And I'm Proud! Say it Loud! Yeah!

Feels good, doesn't it? Lately there seems to have been a 'cooler than thou' campaign targeting the humble drop shadow - it stops here, my friends.

Yes, like many methods, the drop shadow has been over-used and badly abused. But for me, the power of CSS is its ability to take bare-bones, CMS-generated XHTML and smoothly roll a more complex presentation layer across it - all without the client even realizing it's happening. Drop shadows are but one of many methods you can employ in that process.

Dunstan Orchard, Sergio Villarreal and Phil Baines have done some of the best thinking in this area, and we're going to use an amalgam of their work.

Let's look at the code. Firstly we are going to need one extra piece of markup wrapping our IMG tag - a DIV with a class I've imaginatively named 'dropshadow'.

<div class="dropshadow">
<img src="pic3.jpg"
alt="Guitarist" width="133" height="155" />
</div>

Pretty simple.

Now for the CSS. We'll start with some typical CSS designed to float our DIV to the left, clear its left side, and give it some margin to keep it out of any surrounding text.

.dropshadow{
float:left;
clear:left;
margin: 10px 10px 10px 15px;
}

Next we will add a soft-edged PNG shadow to the background and align it to the bottom right. I've chosen to use a PNG so we have the flexibility to use it on different background colors and textures.*

Now, we add this shadow graphic to the background of our container class. I've used shorthand notation to align it to the bottom right, and to ensure it doesn't tile. (Note: Be careful of the linebreaks in these code snippets - newsletters with limited widths can foul code up).

.dropshadow{
float:left;
clear:left;
margin: 10px 0 10px 10px;
background: url(shadow-png.png)
no-repeat bottom right;
}

Ok, that's nice, but at the moment our shadow is entirely obscured by the main image. This is where Phil's nifty little trick comes in.

We set a new rule that makes the positioning of our image relative to our DIV ('static' is the default). Then we simply position it 6px up from the bottom, and 6px from the right to let our shadow background peek out. Nice.

.dropshadow img{
position:relative;
bottom:6px;
right: 6px;
}

I'm going for a 'Kodak Instamatic' look with the thick white egdes, so I've added some margins and some thoughtfully selected border colors to give it a subtle 3d 'card' appearance.

.dropshadow img{
position:relative;
bottom:6px;
right: 8px;
border: 1px solid #eee;
border-color: #eee #888 #666 #ddd;
background:#fff;
padding:8px 6px 15px 6px;
margin: 0px; }

Right. We're getting there, but that PNG is causing us problems in 'IEssues'. Lets tackle that.

.dropshadow{
float:left;
clear:left;

background: url(shadow-png.png)
no-repeat bottom right !important;

background: none;

filter:progid:DXImageTransform .Microsoft.AlphaImageLoader
(sizingMethod=scale, src='shadow-png.png');

margin: 10px 10px 10px 15px;
}

Here, we've added the alpha filter, but IE5.5 & 6.0 will still display the PNG without it's transparent portion (i.e clunky gray background) unless we forcibly remove it.

Now IE's failure to acknowledge !important becomes our friend. Adding !important to our initial background declaration ensures all sensible browsers ignore any subsequent rules concerning the background.

IE, fortunately, doesn't take orders from !important, and happily follows any new rules regarding the background -- in our case :

background: none;

That's pretty much it. Here's the sort off result you can expect and here's an example of the code in it's natural environment. There are heaps of potential variations on this theme, so let me know if you come up with any nice ones.

*Side note: For a quick shadow graphic, start a new transparent file in Photoshop (or Fireworks), add a large black box, reduce its opacity to around 25%, and give it a gentle Gaussian blur to your taste. Your shadow graphic should always be slightly larger than then largest picture you expect to publish.

It Lives!!

He's braved an intercontinental relocation and a bad case of the mumps but Simon is back in his native UK and blogging away to his heart's content again.

Read the blog entry:

DHTML/CSS Blog: Stylish Scripting by Simon Willison Spot the Security Hole (18 comments)

That's all for this issue -- have a safe and happy holiday season (if you're having one)! I'll see you in the new year.

Alex Walker
design@sitepoint.com
Editor, SitePoint Design View

Help Your Friends Out

• Graphical vs Minimalistic Site Design
  in Just Starting Your Design
  
  
• Please use example.com, example.org, and example.net
  in Apache
  
  
• IE marketshare dips under 90%
  in Browser Issues
  
  
• What's a PR rating...?
  in Search Engine Optimization
  
  
• Changing from fixed layout to adjustable layout?
  in CSS
  
  

Design Blog:
Pixel Perfect

• Copying Layer Styles in Photoshop
  13 comments
  
  
• Photoshop Eyedropper Tips
  3 comments
  
  
• Photoshop Troubleshooting
  6 comments
  
  

DHTML & CSS Blog:
Stylish Scripting

• QuirksMode bug reports
  5 comments
  
  
• Opacity and DHTML
  7 comments
  
  
• Presentations with s5
  5 comments