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

I recently published an article about cross-browser font embedding, using the @font-face CSS selector. It turns out that the code I put forth causes a 404 look-up in Internet Explorer. A reader has suggested some superior code, which I put to the test

Paul Irish Sets My Morning Schedule

Geeky @font-face Newz: It's a thumbs up for Paul's "Bulletproof @font-face Syntax"! (Do geeks really look like this?)

Funny how a single comment can change the direction of my day!

Paul proposes two concepts - new to me - in his recent article, "Bulletproof Font Face Implementation":

• Internet Explorer tries and fails to download the TTF file (with 2-selector syntax) even though the 2nd @font-face selector includes a "format" declaration.
• He proposes a single @font-face selector, which satisfies all browsers (obviating the need for two selectors), searches the local computer for the font first and eliminates the Internet Explorer "file not found" problem.

Okay ... this is techie, geeky cool and - for sure - not everyone is going to want to read about this, so here is where you should get off the geek train (if you haven't already).

If you're all aboard, heading for geekdom and want to be cool, then read on brave web-font enthusiasts ...

I'm a Geek, I want More

There's a spiffy-looking CSS Technique that's been getting a lot of play in the web-design and web-development social circles lately. Unfortunately, it's not a CSS technique and even as a JavaScript technique, it's crap! Did you spot it?

"Innovative CSS Technique" Making Rounds is NOT a CSS Technique

Even as a JavaScript Technique, it's Crap

This article, authored by Emanuele Feronato, has been getting some attention within the web-design and development social network recently. I've seen it Tweeted, FaceBook'd, Blogged, Digg'd and included in various "Totally Amazing CSS Techniques" lists.

On his website, Emanuele bills himself as an "Italian Geek & Programmer". Unfortunately, his article demonstrates he knows very little about web-standards, W3C validation, pure-CSS, graceful degradation, cross-browser compatibility, accessibility or white-hat SEO. He says his LightBox-like effect is "100% CSS-based" and that it's made "only with CSS - no JavaScript needed".

No JavaScript needed? What a pile of hooey!

The article is the most popular article on his blog, sporting over 252 comments and it's currently being shot across the design social circuit like it was the newest communications satellite. While some of the commentary points out the shortcomings, most (who don't know better) are lapping up this code - using it on commercial sites and passing it on.

At first blush, the technique seems very cool, but it's not code we would use and you shouldn't either. In a nutshell, out-of-the box it's crap. (Are you a web-developer, designer or programmer? Can you spot the problems?")

To learn more about why this code is crap (and to get an improved version) ... carry on ...

Turning Crapola into Shinola

For years, web designers and bloggers have been limited to a select number of "web-safe" fonts. With the Jun 30th release of FireFox 3.5, it's now possible for cross-browser font embedding using the CSS3 @font-face selector. Here's a tutorial to show you how

@Font-Face: Typography can be art! Web designers have been limited to only 13 or so "web-safe" fonts for years. Now, cross-browser use of the CSS3 @font-face selector may change all that.

Expand Your Font Palette Using CSS3

In a tale involving proprietary font formats and a week-old release of FireFox, I'm here to say that using the CSS @font-face selector to spice up your website typography is an easy, light-weight, valid and cross-browser solution. Finally, fancy fonts for the masses!

Can this be true? You bet your sweet bippy! Read on.

Fancy Fonts For All

Sometimes we include a list of "additional information" links at the end of our articles. Generally, they've been styled on the fly, but we thought it was high time to spend a bit of attention on this detail. The resulting CSS-styled ordered list looks nice, includes a block hover effect, a "visited" status indicator and is XHTML/CSS valid. We thought people might like to use it on their website, so included a tutorial and ZIP file.

Adding Pizazz to an Ordered List

Ordered List: Advice on getting things done around the house ... in a simple ordered list.

A lot of online articles include, at the end of the article, a list of "additional resources" - or links - for further reading and research. Several Randsco articles have such a list, but styling them is generally an afterthought, because most of the energy goes into the article itself.

Ideally, additional information links would be contained in an ordered list. It's semantically correct and allows visitors to reference a particular link by number. Unfortunately, we don't always follow our own advice and some of these links are held in simple paragraphs which may, or may not, be numbered.

We thought it was about time that we come up with a proper "additional information" list. By melding together some existing design ideas and adding our own CSS touches, we have constructed an ordered list that not only looks nice, but also includes a number of other features: a hip CSS roll-over effect; compatibility with fixed-width or liquid layouts; toggle-able ":visited" link status images; pure CSS (no JavaScript, AJAX or jQuery); and it's cross-browser friendly.

Have a look at the demo page and read on to get the ZIP file, learn about the design, look at the code and see the live example.

Styling an Ordered List

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...