Check out this sweet composition of aural styles discovered in the stylesheet for the W3C’s website:

/* AURAL STYLES (via W3C) */

@media aural {
   h1, h2, h3,
   h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
   h1            { pitch: x-low; pitch-range: 90 }
   h2            { pitch: x-low; pitch-range: 80 }
   h3            { pitch: low; pitch-range: 70 }
   h4            { pitch: medium; pitch-range: 60 }
   h5            { pitch: medium; pitch-range: 50 }
   h6            { pitch: medium; pitch-range: 40 }
   li, dt, dd    { pitch: medium; richness: 60 }
   dt            { stress: 80 }
   pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
   em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   dfn           { pitch: high; pitch-range: 60; stress: 60 }
   s, strike     { richness: 0 }
   i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   u             { richness: 0 }
   a:link        { voice-family: harry, male }
   a:visited     { voice-family: betty, female }
   a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

Not bad. Listening to this cascading orchestra, I would imagine the sound of a relaxed-yet-formal standards-compliance gentleman carefully articulating the contents of the page.

Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:

selector {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
	}

Check the code comments to see what’s doing what, and feel free to adjust the level of transparency by editing the various property values. Also, remember to replace “selector” with the target element of your choice.

By the way, I’ve got a metric tonne of juicy CSS posts scheduled for the next few months. So whatever you do, stay tuned!

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.

Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img> element) or indirectly (e.g., via the parent <div> element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.

Continue Reading

Yay! Perishable Press is now featured at one of my favorite CSS-design showcase sites, Divine CSS! Divine CSS features a mouth-watering collection of CSS and Flash-based website designs, and is always a great source of inspiration and ideas for new projects. Seeing my current theme (Quintessential) showcased at Divine CSS is very inspiring, and a nice way to celebrate the (relatively) new design. Many thanks to the fine folks at Divine CSS for sharing my site with their audience — it is greatly appreciated! :)

So what are you waiting for! Go check it out (while it’s still on the front page) and kick this old hard-working dog a few stars! ;)

A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corner” effect. For example, throughout the current design for this site, I am using rounded corners on several different types of elements, including image borders, content panels, and even pre-formatted code blocks. Some of these rounded-corner effects are accomplished via multiple <div>s and a few background images, while others are created strictly with CSS.

Of these two different methods, extra images and markup are used whenever I need the rounded corners to appear in all browsers, or in other words, whenever the effect is an essential aspect of the design. And then, on the other hand, when using rounding corners for visual enhancement, I prefer the strict-CSS method because it is much easier to implement. Rounding the corners on image borders or <pre> elements, for example, is an excellent way to progressively enhance the visual presentation of a design (generally speaking).

Continue Reading

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation.

The Challenge..

There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image manipulation, or some combination thereof. CSS may possess limited ability to round image borders in certain browsers, but for drop shadows and image rotation, designers must either modify each image individually, or rely upon convoluted techniques employing additional graphics and CSS to get the job done. This may be suitable for a single header graphic, but for any significant number of images, hand-editing each one in Photoshop with the desired visual effect is neither efficient, practical, nor scalable.

Continue Reading

A great way to improve your CSS skills is to check out the stylesheets used by other websites. Digging behind the scenes and exploring some applied CSS provides new ideas and insights about everything from specificity and formatting to hacks and shortcuts. Learning CSS by reading about ideal cases and theoretical applications is certainly important, but actually seeing how the language is applied in “real-world” scenarios provides first-hand knowledge and insight. While there are millions of standards-based, CSS-designed websites to explore, studying a few of the Web’s elite players and CSS experts helps to put things into perspective by providing context for subsequent CSS investigations. Prime candidates include industry leaders, standards buffs, CSS specialists, professional bloggers, and other successful establishments. In this article, we reveal the CSS implementations used by the following “rich and famous” websites:

Continue Reading

There are many ways to style images with CSS. You can add borders:

img {
	border: thin solid black
	}

..padding and margins:

img {
	border: thin solid black
	padding: 3px;
	margins: 3px;
	}

..and even background graphics:

Continue Reading

Here at Perishable Press, I love to write about minimalism, simplicity, and usability in user-interface and web design. I have always enjoyed the minimalist aesthetic, as my Perishable Theme plainly illustrates. Fortunately, many designers and developers have embraced the minimalist concept, and continue to produce and promote minimalist design principles in their designs. As often as my schedule allows, I like to take the time to explore and share some of my favorite minimalist designs, and so far have managed to post the following in-depth reviews:

• Minimalist Web Design Showcase: ShaunInman.com
• Minimalist Web Design Showcase: Equivocality

These minimalist site reviews examine the structure, functionality, and appearance of sites that utilize simplicity and elegance in their design. These articles also feature “mini” interviews with the site’s designer/owner, and provide good insight into the thought and purpose of their respective designs. I invite you to explore the growing collection of my “Minimalist Web Design Showcase” series, and look forward to hearing your feedback concerning the various ideas and methods covered in the material.

And, as always, if you have yet to Perishable Press, please do so for upcoming minimalist reviews and other Web design goodness.

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this:

/* set the minimum width for IE 6 */
#target_element {
	width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */
	min-width: 333px; /* min-width for all standards-compliant browsers */
	}

Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for IE6. But beware! There is a catch. Chris Herdt recently wrote in with an important discovery:

…inclusion of any padding or margin on the element that has the fix applied will cause IE6 to crash…

Continue Reading

My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and concise delivery. These posts are extremely subjective, opening dialogue concerning the obsessive-compulsive behavior many of us embrace while implementing the powerful and essential coding language that is CSS. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles in the series..

• Obsessive CSS Code Formatting: Organization, Comments, and Signatures
• Obsessive CSS Code Formatting: Indentation and Spacing
• Obsessive CSS Code Formatting: Opening and Closing Brackets
• Obsessive CSS Code Formatting: Patterns and Trends

If you have yet to do so, Subscribe to Perishable Press for all the latest CSS formatting tips!

The “CSS Hackz Series” focuses on useful hacks, tricks, and workarounds for specific presentational and styling issues on various browsers. Although a majority of these articles provide solutions for Internet Explorer, other browsers are covered as well, either specifically or in general. The articles in the “Hackz” series are written to be as clear and concise as possible, focusing on application rather than theory. Thus, these posts cut right to the chase, presenting comprehensive methods and techniques aimed at those already familiar with the basic principles of Standards-based Web design. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles in the series..

• CSS Hackz Series: Targeting and Filtering Internet Explorer 7
• CSS Hackz Series: Clearing Floats with the Clearfix Hack
• CSS Hackz Series: PNG Fix for Internet Explorer
• CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6

If you have yet to do so, Subscribe to Perishable Press for all the latest CSS Hacks, tricks, and tips!

While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly used title separators include the hyphen, the dash, and angled quotes. Many others are used as well, and we will explore some of them in this article.

Continue Reading

Continuing the CSS Hackz Series, I present a small army of hacks for targeting and filtering Internet Explorer 7! Here, “targeting” IE 7 means to deliver CSS and/or (X)HTML to IE 7 only, while “filtering” means to deliver CSS and/or (X)HTML to every browser that is not IE 7. In other words, targeting is to include (apply), filtering is to exclude (hide). Let’s dive right in..

Conditional Comments

Conditional comments are a proprietary Microsoft technique for targeting and filtering different versions of Internet Explorer. Other browsers do not understand them, and will treat them as regular (X)HTML comments. Of all the techniques presented in this article, conditional comments are perhaps the most flexible method for targeting and filtering any version of Internet Explorer, including IE 7. Here are some self-explanatory examples:

Continue Reading

One of my favorite aspects of producing clean, well-formatted CSS code is “meta-organizing” the document using comments. In CSS, comments are included in the stylesheet like so:

/* i am the walrus */

When used constructively, CSS comments serve to break down documents into distinct regions, provide key information about specific declarations, and bring order to even the most complex stylesheets. In my experience, a well-commented stylesheet improves efficiency and optimizes comprehension.

Working with CSS, you can add comments any way you want. There are many different ways to use CSS comments, and endless ways to get there. Let’s check out some practical and interesting ways to use comments, along with some creative ways of doing so.

Continue Reading

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques:

First clearfix method: addresses several reported rendering and display bugs by declaring very small values for both font-size and height, while also declaring a zero line-height value. A little paranoid perhaps, but the unique declarations seem to have no unintended/negative side-effects. This method also targets IE exclusively for the inline-block declaration. Check it out:

Continue Reading

Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening triage of comments.

Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” but it certainly works.

Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by sharing a far more elegant solution using display: none;. Here is an example of its implementation:

Continue Reading