Pull Quote Code Updated

I have changed the pull-a-quote code just a bit, in order to keep my markup as close to semantically correct as possible.

I now use a blockquote instead of a div to define the pull quotes, as suggested by a few visitors. Although the div solution produced valid mark-up, the blockquote method is the “semantically correct approach.” If that phrase sounds familiar, I stole it from Sunny.

Mini-Tabs: I Sense a Trend

In June 2003, Dan Cederholm inspired many with his creation of the CSS mini-tab, a simple yet very stylish twist on the standard unordered list. Now, only two months later, he has created a simple and creative way to jazz up the famous mini-tabs: mini-tab shapes.

“I simply can not help putting the fun little buggers to use.”

The technique simply centers a small background image at the bottom of each list item. Dan’s examples include a rounded block, a pyramid, a semi-circle, and a SimpleBits-esque square. With a little imagination, the mini-tab shapes technique can easily be expanded on, from different shapes, to different placements of the images, and so on. With so much flexibility, mini-tabs and mini-tab shapes are bound to become the new trend across the web. I for one am already incorporating mini-tabs into my current client project. I simply can not help putting the fun little buggers to use.

The Sun Report’s “Sunny” has already experimented with the mini-tab shapes and developed a vertical version of Dan’s horizontal tabs. They look really great, and would work perfectly in a sidebar. Nice goin’ Dan and Sunny!

Lots To Be Noted

Don’t worry, I’ll be quick. You’ve probably heard it all already, anyways.

First, mezzoblue has been marvelously redesigned using valid CSS and XHTML 1.0 Strict by its founder Dave Shea. The redesign includes a new centered layout, which looks that much better, and numerous other subtle improvements. Congrats, Dave, on the seamless move from tables to tableless.

Second, a new image replacement technique has surfaced that uses overflow: hidden instead of Fahrner’s display: none, which requires an extra span. Give it a look, as it seems to be gaining momentum.

Douglas Bowman has continued to make changes to stopdesign and, as always, they’re intuitive, clever, and beautiful. Changes include a new “Recent Links” section in the sidebar and an awesome new section on the site called “SEEalso,” where Doug shares “articles, essays, tutorials, excerpts, charts, weblogs, sites, books, and relevant reference information.” Thanks for sharing, Doug!

Zeldman has returned from Web Design World 2003 where he shared a keynote on designing with web standards and a presentation on Section 508 and design. Zeldman has generously published the slides of both lectures at Happy Cog, so surf on over and enjoy.

And, finally, zlog has received a fourth redesign since its launch. Now would be the perfect time to tell Mr. Zlog “not to rush to replace a good design” because, according to an article at A List Apart, “you will grow bored with it long before your readers do.” But, the new design is my favorite yet, so I will refrain from lecturing. Oops, I already did.

Pull-a-Quote

Michael Pick’s recent entry on pull quotes, “small snippets of an article that have been ‘pulled out’ of the main body of text and set in a larger typeface and generally styled in an eye-catching manner,” has drawn much attention and inspired many bloggers and designers on the Net (including me) to include pull quotes in their content.

“People tend to skim content on the Web, and pull quotes help draw attention.”

Mike explains the benefits of pull quotes on the Web, the main one being the fact that people tend to skim content on the Web, and pull quotes help draw attention, and he provides some guidelines to good pull quotes and five nice examples, none of which display correctly in IE Win.

As I mentioned, I am one of the many people that have been inspired and that now have the urge to use pull quotes. In this entry you’ll see the first ever pull quote on AdamPolselli.com – yipee! It was done by simply inserting a blockquote with this class applied to it:

blockquote.pullquote {
color: #333;
float: right;
font: 20px/24px georgia, palatino, serif;
margin: 10px 0 10px 15px;
padding: 0;
text-align: center;
width: 150px; }

Simple enough. So, look forward to more pull quotes in the future!

The Beauty of Style Competition

Inspired by the beautiful site that we all now know as simply “The Garden,” the SitePoint Community Forums are holding a CSS Website design competition entitled “The Beauty of Style.”

The SitePoint Forums Staff worked together to create a semantically correct, XHTML 1.0 Strict document, which the contest entrants must stylize from top to bottom using only CSS. Like the Zen Garden, they may not change the source code in any way, and their entries must be near-identical in at least Mozilla, IE 6, and Opera 7. The entrants’ style sheets must also be valid CSS2.

The deadline is July 31, so head over to the SitePoint Forums, register (if you haven’t already), and take a shot at winning the prize: a copy of Dan Shafer’s well-reviewed book HTML Utopia: Designing Without Tables Using CSS. Even if you do not enter, stay tuned – it should be very interesting to see the entries and who wins!

Long-Awaited Notables

On the afternoon of Wednesday, May 28, I got home, fired up my computer, and to my dismay, my site was down. I headed straight for my host’s forums and reported the problem, and they diagnosed it to be a problem with the Reverse DNS Lookup (PTR). Adjustments were made, and I’ve spent that last 66 hours waiting for the changes to propagate.

This waiting period included upwards of 3,000 refreshes, 200 “Delete Cookies” (just to be sure), and a pile of torn out hair, resulting in a tiny bald spot on the back of my head. You have to understand that I would not have been this impatient if I had not just launched a new design and layout, which still needed completion, and a blog, which needed updating.

Anyways, that ordeal is over, and now I leave you with some interesting links and info that I’ve seen or read while awaiting the rebirth of my site.

Stuart Robertson, of DesignMeme, has created a couple new CSS tricks, and both are fantastic. The first, entitled “The Search for the Missing Link“, uses the :hover pseudo-class on a paragraph (cool!), which results in a rollover effect that assists the reader in finding the links within that paragraph. This effect works in Mozilla, Netscape 6+, Opera 7, Safari, and Konqueror.

The second effect he thought up was a pure CSS pulldown menu. It basically uses the :hover pseudo-class on an HTML list, setting the normal list as display:none and the hovered list as visibility:visible, resulting in a pulldown effect. This effect will work in Mozilla, Netscape 6+, Opera 7, Safari, and Camino.

QuickColor, by kohaistyle, is a fun a little color mixer to help you when in need of inspiration. I’ve messed around with it, and most of the schemes are actually quite worthy of being incorporated into a design. Enjoy!

MeBox: The new cardboard storage box. Way too cool.