Kimler Adventure Pages (http://randsco.com)

Opacity is a CSS3 directive, but there's no reason not to start using it today. Apply it against the major browsers, validate it against the W3C CSS validator and I'll even show you a great "Before & After CSS Opacity Technique" for displaying your before-after photos

hover to read

Using the CSS3 "Opacity" Directive: Future-Proof, Valid CSS and No CSS Hacks

The "Opacity" CSS directive is part of the CSS "level 3" Color Module, which is a "Candidate Recommendation". In a nutshell, this means that opacity isn't "ready for prime time".

Darn and phooey! You like opacity. And why not? It's fun to play with and you can achieve some nifty web effects using opacity. (I'll demonstrate an opacity technique that provides a great CSS-only way of showing "before" and "after" photos!)

Enjoy the MAGIC of Valid CSS3 Today!

What is opacity? Well, it's the opposite of transparency. Something that has 100% opacity is 0% transparent. Likewise, something with 0% opacity is 100% transparent.

The W3C (World Wide Web Consortium) recommends thinking of opacity as a post-processing operation. After an element (including it's children) is rendered into an image for the computer monitor, the opacity setting specifies how to blend the element into the final display.

Applying opacity to an element is easy. Simply specify the "opacity" directive to a selector and provide a value from zero to 1.0, where zero is completely transparent and 1.0 is completely opaque.

Of course, the difficulty is that the level 3 CSS candidate recommendations are only honored by a select number of web browsers, notably current versions of FireFox, Opera, Safari & Netscape. As usual, the Grand Pubah of browsers (Microsoft's Internet Explorer), doesn't adhere to this as-yet approved CSS directive.

That's the bad news.

The good news is that I'm here to tell you that if you want to use opacity for your web pages - you can! We have been for some time!

There's a way to use opacity for FireFox, Opera, Safari, as well as Internet Explorer 6 and Internet Explorer 7. (According to AWSTATS, a web server statistics program, 97% of our 113,728 April visitors used one of these browsers ... heck, that's about as close to "everyone" as you're going to get in this cross-browser world of ours!).

There's even a way to use opacity so that the CSS validates (to verify this, just click on the "CSS" validation button in the footer below)!

Best yet, it's completely future-proof and requires no CSS hacks.

OKAY ... you're primed and ready. You want to start using opacity.

All you have to do is read on, Cascading Style Sheet lovers ... read on ...

Read full story...

Photo-Caption Zoom images have been problematic in IE tables. It's yet another failure of IE6 and IE7. However, I've spent some time and made a work-a-round that yields good cross-browser results (and overcomes the IE tables problem). Have a look -

Photo-Caption Zoom Inside an Internet Explorer Table

You like Photo-caption Zoom. You've finally found a valid, pure-CSS, easy-to-use technique that shows both a thumbnail and zoom-able detailed image (along with a caption), without your visitor having to leave a page or suffer through another pop-up window. You deploy it inside of a table and suddenly, when you view it in Internet Explorer, it doesn't work right.

I've received many emails and comments from people about Photo-caption Zoom not working inside an IE table. Up until now, the only "solution" was to say, "don't use tables", quickly followed by "Internet Explorer sucks". (I had one desperate client for whom I "welded-on" a series of Photo-zoom DIVs to the edge of a table. It was my first stab at a work-a-round and it worked fine, until the font size was changed).

While it's comforting to me that the problem isn't the Photo-caption Zoom code (it's an Internet Explorer problem), this isn't much solace for anyone wanting to use it. What's a person to do?

A Solution to the Internet Explorer Table Problem

I recently had a play with Photo-zoom inside of tables. I was able to isolate the Internet Explorer problem and find a work-a-round. It side-steps the IE tables problem and also works in other browsers. Have a look.

The table below contains Photo-caption Zoom images. It works in both IE6 and IE7 (as well as Opera9, Netscape9 and Firefox2). Yay! Finally - a way to use PZ3 inside tables.

The PZ3 Caption: Here is where you can add relevant information with the detailed image. Wax lyrical about your product. The text doesn't clutter the main page and search engines can index it! Product Description Price Avail ThermalTake TMG A1 CPU Fan 35.14 CFM max flow at speeds between 300-2,500 RPM. Quiet, reliable cooling. The TMG A1 uses a frameless fan design that virtually eliminates noise-producing turbulance. Runs quiet at 16 dBA. Supports AMD PWM FSC specs. $49.99 In-stock

Photo-caption Zoom: One benefit of using PZ3 is having the ability to add descriptive text to a photo. This helps provide additional information about a product, or explains more detail about the image. Thermaltake Silent Case Fan (White) 63.3 CPM at 1600 RPM. This DC, 120mm case fan is very quiet (16 dBA). Count on Thermaltake to make the worlds best cooling products. The Silent CAT fan is an intelligent choice. It runs quiet and is affordable. $9.99 In-stock

To learn more about the Internet Explorer tables problem and work-a-round, read on ...

Read full story...

Merry Christmas! How about a pure CSS technique to finish out 2007? Introducing "pop-Info" boxes, an XHTML/CSS-valid method of popping up sidebar information. It's cross browser compatible, written to standards and doesn't require any javascripting. (There's even a click-only version - same deal). Have a peek!

pop-Info - (A CSS Technique for Popping Information)

AFAIK everyone likes the <acronym> tag. Hey, it provides a nifty way to expand an acronym (or abbreviation ... or other abuses) into "more information". This detail shows in a tool-tip, when you move your mouse over it. Nice.

Normal Sidebar

This is an example of a sidebar (a short, often boxed, auxiliary news story that is printed alongside a longer article). It often contains additional, contrasting or late-breaking news.

On a web page, the sidebar breaks up the flow of the main article and takes up page real-estate. Why not have it display like an acronym (hidden ... until the visitor decides they want to see it)?

I expanded on the idea, using an info class with a <span> tag, to provide more information on a concept or word. Cool.

Unfortunately, it's limited to a short amount of text.

What if you want to include more information about some detail of the main article? What if you want to include an image? What do you do then?

In journalistic jargon, we've now entered the realm of the sidebar. A sidebar is a short news story, containing supplementary information, which is shown alongside the feature story, often in a box. It's similar to a pull-quote or callout.

What if a sidebar could display like an acronym, in some type of a tool-tip-type hover? Hmmm. After playing a bit with photo-caption zoom figure numbers, I got the idea that such an idea might be achievable. It is! Have a look at a popInfo Sidebar box "PopInfo"  Sidebar BOOM! A popping sidebar! Centered for liquid layouts, it can pop anywhere for fixed-width layouts. Add images and other styling. It's XHTML & CSS-valid, cross-browser compatible (IE6, IE7, Opera, Netscape, FireFox, Safari) & we think it's a cool way of displaying "more information", saving page real estate and amping page SEO. .

For more popInfo examples, a click-version, the CSS and XHTML code, as well as a discussion on the method ... sally forth ...

Read full story...

Can you add figure numbers to Photo-caption zoom thumbnail images? Sure! What's the best way? I dunno. I had a play with some variations

Figure 1TESTING: Figure Numbers on PZ3 Thumbnails

Read full story...

I recently had to fight with CSS for a web page served in Quirks-Mode. What is quirks? Why is it bad? How do you tell if a page is in quirks-mode? All this (plus a couple of extra cents, tools & links)

Using PZ3 in Quirks-Mode

A reader wanted to use PZ3 for a page that was authored in "quirks-mode". In an effort to help, I found a way to make it work in IE6.

Now that IE7 is out, I wish I hadn't. Let me just say that it's awful thing to do (author pages in "quirks-mode") and I recommend against it. You will thank me, your children with thank me and your descendants will visit my grave and thank me!

However, even though it goes against my own advice, I have found a way to render a very-close approximation to PZ3 for BOTH IE6 and IE7, in quirks mode. If you absolutely must deploy PZ3 on a quirks-mode page, you will want to see the work-a-round (and maybe even the quirky problem).

PZ3 aside, I thought this a good time to weigh in on quirks-mode.

• What is "quirks-mode"?
• Why is quirks-mode bad?
• Why do people need quirks-mode at all?
• How do you tell if a page is in quirks-mode?
• How does an author pick the mode (standards -vs- quirks)?

For all this (and a tad more) ... carry on.

Read full story...