Category Archive for “Presentation”

Here is a list of all articles categorized as “Presentation”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

Understanding CSS3 and CSS2.1 Border Properties

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of these new stylistic possibilities, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles. Many of us know ...

CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to ...

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me: .preload-images { background: url(image-01.png) no-repeat -9999px -9999px; background: url(image-01.png) no-repeat -9999px -9999px, url(image-02.png) no-repeat -9999px -9999px, url(image-03.png) no-repeat -9999px -9999px, url(image-04.png) no-repeat -9999px -9999px, url(image-05.png) no-repeat -9999px -9999px; } Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the ...

Really Simple Browser Detection with jQuery

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like: p:first-child p:first-child:first-letter p:first-child:after p:first-child:first-line Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:...

The New Clearfix Method

Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method.. The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using ...

Perfect Pre Tags

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the element. When left unstyled, wild tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect tags. First thangs first Before getting into it, let’s take a moment to ensure we’re all ...

Pimp Your 404: Presentation and Functionality

I have been wanting to write about 404 error pages for quite awhile now. They have always been very important to me, with customized error pages playing a integral part of every well-rounded web-design strategy. Rather than try to re-invent the wheel with this, I think I will just go through and discuss some thoughts about 404 error pages, share some useful code snippets, and highlight some suggested resources along the way. In a sense, this post is nothing more than a giant “brain-dump” of all things 404 for future reference. Hopefully you will find it useful in pimping your own 404. When requested page is not found by server, error message ...

Sexy HTML List Tricks

Behold the ubiquitous list elements, and ! These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable. We all know how to throw down a basic list: Pancakes Bananas Monkeys Or even throw down some hardcore nested-list action: Pancakes Swedish Blueberry Chocolate Bananas Manzano Plantain Cavendish Monkeys Spider Howler Squirrel This nested list markup will result in a unordered bulleted parent list with numerically ordered nested lists, resulting in something like this in a browser: Pancakes Swedish Blueberry Chocolate Bananas Manzano Plantain Cavendish Monkeys Spider Howler Squirrel Of course, we ...

The 5-Minute CSS Mobile Makeover

More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site ...

The Power of HTML 5 and CSS 3

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline and tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages. As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our ...

CSS Hacks for Different Versions of Firefox

In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox. Some of these CSS hacks don’t validate, others are proprietary, and ...

Perishable Press Featured at CSS Perk!

Yet another fine reason to celebrate the current Quintessential theme design here at Perishable Press is graciously provided by the fine folks at CSS Perk. CSS Perk features a growing collection of superior CSS-designed websites, and is always a great source of inspiration and ideas for new design projects. Seeing my current theme showcased at CSS Perk is very inspiring, and a super-cool way to celebrate my upcoming April-9th birthday. Many thanks to the awesome peeps at CSS Perk for sharing ...

The Voice of the World Wide Web (Consortium)

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

Cross-Browser Transparency via CSS

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

Better Image Caching with CSS

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

Perishable Press Featured at Divine CSS!

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

Perfect Rounded Corners with CSS

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