Smashing Newsletter: Issue #9

• By Smashing Newsletter Team
• May 25th, 2010
• The Smashing Newsletter
• 1 Comment

This newsletter issue was sent out to 29,866 newsletter subscribers on May 25th 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. Solar System With Pure CSS3
02. Collect, Organize and Share Your Images with Zootool
03. Generate CSS3 Linear Gradients Online
04. Fix Your Typography With Typografix
05. Keyonary: The Shortcut Finder
06. Logo Design Trends 2010

1. Solar System With Pure CSS3

In recent months, we’ve seen many designers get really excited about new CSS3 features. We live in an exciting time: a time for new design possibilities, new techniques and new experiments. One such experiment is Alex Giron’s Our Solar System in CSS3, an attempt to recreate our solar system using CSS3 features such as border-radius, transform and animation.

The code is simple and straightforward, but the result is truly impressive. The animations and transitions work only in Webkit browsers (i.e. Safari and Chrome). On hover, a planet’s description and route through the solar system are displayed. Other modern browsers deliver a static version. Of course, in Internet Explorer, the universe is flat and boring. (vf)

2. Collect, Organize and Share Your Images with Zootool

As creatives who spend the majority of our time online, we often find interesting images, text, videos and links that we want to save for later. Websites such as Delicious and Google Bookmarks make it easy to save entire pages, but saving just a video or image is impossible. A better solution would be something that allows us to save only those parts of the page that we want, while linking back to the source for future reference.

Zootool is a bookmarking website and tool for collecting images, documents, links and videos from anywhere on the Web. A bookmarklet allows you to collect items quickly and easily. You can then tag and organize your saved items in Zootool’s back end. You can also integrate Zootool with Tumblr, Twitter, Delicious and FriendFeed to share what you find. (cc)

3. Generate CSS3 Linear Gradients Online

Althought gradients are included in the CSS3 specification, currently, this feature is supported only in some browsers (Webkit-based ones such as Safari 4 and Chrome, as well as Firefox 3.6 in the case of background images). Support in other browsers is sure to follow as CSS3 is finalized and becomes part of the designer’s arsenal. Meanwhile, many designers are already incorporating CSS3 into their designs.

Creating gradients with CSS is relatively simple, but it’s easier when you have a visual tool to see the results immediately. Linear Gradients is an online tool for building CSS-based linear gradients. You can control where the gradient starts and ends on both the horizontal and vertical axes, as well as the colors (multi-colored gradients are supported). (cc)

4. Fix Your Typography With Typografix

In the current HTML standard, upholding certain principles of good typography is hard without a lot of extra work. Things like ellipses, en and em dashes, single and double quotation marks and arrows all become so cumbersome to properly format that designers sometimes leave them out entirely, leaving the browser to revert to its default. Sure, some blogging platforms already have solutions for these things, but what about Web typography in general?

Typografix is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for <script>, <pre> and <code> automatically. The en dash, for example, is created automatically when a hyphen is surrounded by spaces, and the em dash is created when two dashes appear in a row. Once you’re used to the syntax, creating well-formatted Web typography is much faster and simpler than by hand-coding everything. Typografix is written in C#, requires Windows Installer 3.1 and .NET Framework 3.5 SP1 and is released under the GNU GPL v3. It would be great to see an AIR-application with the same features. (cc)

5. Keyonary: The Shortcut Finder

Keyonary is a tool that will make your daily work easier and that really does offer the benefits it promises. It’s a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 250 Photoshop shortcuts have been added. Simply type the name of application in the search box, and it spits out a long shortcut list. For such a helpful tool, we give this free application two thumbs up. (cs)

6. Logo Design Trends 2010

As a graphic designer, you probably know the feeling. You have to create a logo for a company, and of course, it must be unique and distinctive. You think about the design and scribble away until your head starts to smoke. Knowing the current trends in logo design would be helpful? What are other designers doing? How can you build on current developments to create a logo masterpiece?

As a part of its annual feature, LogoLounge recently published an extensive article titled “Logo Design Trends 2010.” The article features many examples and analyzes various styles, such as Cubism, Spores, Tendrils, Shifts and Parts. We applaud the “Ghost” logo, as well as the fancy design called “Peepshow.” An extensive, detailed and helpful article indeed. But bear in mind: trends exist to be abolished or further developed. Do not follow them blindly; produce something original and remarkable instead. (cs)

The authors in this newsletter are: Vitaly Friedman (vf), Christina Sitte (cs), Cameron Chapman (cc).