Smashing Newsletter: Issue #5

• By Smashing Editorial
• March 30th, 2010
• Newsletters
• 0 Comments

This newsletter issue was sent out to 23,267 newsletter subscribers on March 30th 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter, of course.

Table of Contents

01. Nivo Slider: Slideshow jQuery Script
02. Reference Table for Cross-Browser-Compatible CSS3 and HTML5
03. The CSS Miracles of David Desandro
04. Save Time Cleaning Up Your Text
05. What Can You Make Out of Paper?
06. Smarthistory: Inspiration from Rediscovering Art History

1. Nivo Slider: Slideshow jQuery Script

Dozens of slideshow scripts are out there, but finding one that combines every nifty feature in a simple, light, cross-browser-compatible package is still quite difficult. Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

The images can be linked, and you can define image captions, which are displayed in a semi-transparent area. Also, you can optionally use CSS to stop images from flashing before they’re loaded, and you can define your own styles for the slider’s design. The slideshow works in IE 7+, Firefox 3+, Google Chrome 4+, Safari 4+ and Opera 10.5+. Its mark-up is simple, clean and valid.

Nivo Slider is released under the MIT license and so is absolutely free to use. The download package is available in two versions: a light one (for production, 6 KB compressed) and a heavy one (for development, 12 KB uncompressed). (vf)

2. Reference Table for Cross-Browser-Compatible CSS3 and HTML5

Are you already coding your websites in CSS3 and HTML5? If so, then you’ll find the CSS3 and HTML5 Web Design Checklist extremely useful. The checklist shows you at a glance which CSS3 properties are supported by which browsers (and which versions of the browsers). The table gives a detailed rundown of every single CSS3 property and selector and of HTML5 tags and features (such as the canvas and video tags, audio and video codecs, as well as form inputs and attributes).

If you’re ever in doubt, refer to this checklist to find out which browsers will behave properly and which ones require you to get creative with workarounds and fall-back solutions. (mm)

3. The CSS Miracles of David Desandro

With CSS, one can do it all now. At least that’s what you would believe from seeing one of David Desandro’s CSS masterpieces. David is a kind of CSS wizard of the gods. He drives CSS to its limits: for example, by designing the logo of the Opera browser using pure CSS. To accomplish this, he uses the border-radius, gradient and shadow-box properties, all signs of the glory and majesty of CSS3. The result is indistinguishable from the logo itself:

David also originated CSS speech bubbles, which can be extended to icons and bullets. In fact, we showed something like this in issue #2 of this newsletter (“Master of the Bubble”). David’s newest creation exceeds his previous work: Curtis, a completely geometric typeface created in pure CSS. According to David, “All shapes are rendered by the browser, using a combination of background-color, border-width, border-radius and a heavily reliance on absolute and relative positioning.”

A screenshot is not enough to convey this miracle. You should visit his website with a modern browser to see it live. All work is released under a Creative Commons Attribution License, so you are free to share and remix David’s work. (sl)

4. Save Time Cleaning Up Your Text

Formatting text, while not complicated, is time-consuming. It is sometimes necessary, though, and with Cleantext you won’t have any more excuses for fudging this work. The tool takes a large batch of ASCII text and pretties it up. It checks for misused quotation marks, hyphens, dashes and other punctuation marks and replaces them with the appropriate UTF-8 marks. You can trust this quick, smart and efficient tool to make your plain text easier to read.

Cleantext comes with a parsing log and is released under a GPL. So, you are encouraged to give feedback, inspect the code and contribute to the project. Automatic correction of other typos, such as replacement of three periods with an ellipsis, is currently being worked on. Keep an eye on this tool because it might well become one of your little time-savers. Alternatively, you could use TextOpus if you need a more sophisticated (but still free) online text processing tool. (jb)

5. What Can You Make Out of Paper?

Nothing beats paper when it comes to brainstorming, mind-mapping or simply jotting down notes. Paper, one of the “Four Great Inventions of Ancient China,” has become a vital material in many industries and cultures. No surprise, then, that many artists experiment with the resource in untraditional ways. Paper-folding techniques, such as origami, have been popular for ages. This ancient Japanese practice of turning a single piece of paper into a genuine work of art is definitely impressive.

One could go even further with paper and produce, for example, complex shapes and sculptures and models from it. That’s what Richard Sweeny does. Richard says that his objects “are simple to construct, yet complex in appearance, and efficient in the way they are produced, both in terms of construction time and material used.” We have a hard time believing that his models are not as difficult to create as they look; they are truly beautiful and captivating.

If you’re looking for more examples of paper modelling, then head on over to the artwork of Polyscene, and read the post “Masters of Paper Art and Paper Sculptures.” (cs)

6. Smarthistory: Inspiration from Rediscovering Art History

Having Dr. Beth Harris and Dr. Steven Zucker as teachers, anyone would have picked art history as their favorite subject in school. Instead of relying on the large expensive textbooks usually used in class, these two professors decided to create their own audio guides to be used in the Museum of Modern Art and the Metropolitan Museum of Art. These podcasts are not lectures but rather discussions that take place in front of the work being discussed, on the actual premises of the museum. This innovative approach to art history is at the heart of Smarthistory, a free multimedia Web book that offers a perfect opportunity to review art history.

The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. (jb)

The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Jessica Bordeau (jb), Manuela Müller (mm).