Smashing Newsletter: Issue #9
- May 25th, 2010
- 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 newsletter1, of course.
Table of Contents
01. Solar System With Pure CSS32
02. Collect, Organize and Share Your Images with Zootool3
03. Generate CSS3 Linear Gradients Online4
04. Fix Your Typography With Typografix5
05. Keyonary: The Shortcut Finder6
06. Logo Design Trends 20107
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 CSS38, an attempt to recreate our solar system using CSS3 features such as
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)
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.
Zootool11 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)
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 Gradients13 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)
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?
Typografix15 is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for
<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)
Keyonary16 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)
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 201019.” 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).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 http://neography.com/experiment/circles/solarsystem/
- 9 http://neography.com/experiment/circles/solarsystem/
- 10 http://zootool.com/
- 11 http://zootool.com/
- 12 http://www.westciv.com/tools/gradients/
- 13 http://www.westciv.com/tools/gradients/
- 14 https://code.google.com/p/typografix/
- 15 https://code.google.com/p/typografix/
- 16 http://keyonary.com/
- 17 http://keyonary.com/
- 18 http://www.logolounge.com/articles/default_comments.asp?ArticleID=782
- 19 http://www.logolounge.com/articles/default_comments.asp?ArticleID=782