Smashing Newsletter: Issue #3
This newsletter issue was sent out to 20,763 newsletter subscribers on March 16th 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. Generate Cross-Browser CSS3 Code on the Fly2
02. WordPress Admin Toolbar Bookmarklet: Blogger’s Little Helper3
03. Spritely: Bringing Graphic Elements to Life4
04. “When Can I Use…”: a Browser Compatibility Look-Up Table5
05. TinEye: Reverse Image Search Engine6
06. Flame: Online Experimental Painting Tool7
CSS3 is coming. Although legacy browsers do not support new CSS3 features, modern browsers already offer a good measure of support. And you can use them right away, thus improving the user experience while avoiding dirty tricks in your source code. Websites do not have to look the same in every browser, so you can feed modern browsers advanced CSS while displaying a less enhanced version to users on older browsers.
But CSS3 has a variety of new features, and if you haven’t played around with them yet, applying them to your designs might be a bit tricky and time-consuming. Luckily, the design community has released some helpful time-savers for CSS3 coding, all of which showcase the potential of CSS3 and generate code on the fly.
CSS3, please!8 is a cross-browser CSS3 rule generator that enables you to produce CSS3 properties in your browser window. You can see the results of your inline changes in real time in a preview box. The generated code contains workarounds for legacy browsers, so your CSS rules will remain cross-browser compatible. You can also toggle rules on and off to see how your design is affected. The tool has templates for rounded boxes, box shadow, box gradient, RGBa, box rotate and the
CSS3 Generator10 is similar, but it also explains each CSS3 value and shows the browser requirements of every rule. The tool also generates code for text shadow, multiple columns, box resize, box sizing and outline.
Both tools will come in handy if you want to test any of the CSS3 properties or get cross-browser code that uses the advanced features of modern browsers and accommodates the weaknesses of legacy browsers. (vf)
Small yet efficient, the WP-Toolbar bookmarklet11 will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window.
Just drag and drop the bookmarklet into your bookmarks toolbar. When visiting your website, just click on the bookmarklet, and the script will add a graphical toolbar menu to the top-right corner. The menu has icons for all of the back-end menus, including Dashboard, Pages, Media and Users. To make it disappear, just re-click the WP-Toolbar button.
Say you are reviewing a post from your blog and want to quickly add a picture: you don’t even have to navigate to the back end. Just click on the Media button and start directly uploading the image. (If you are not already logged in, you will need to do that first.)
The tool does not give you access to anything you don’t already have. And unfortunately, the WP Admin toolbar doesn’t allow you to edit a post or page that you have loaded in your browser: you will need to select it from the list of articles on the “Edit posts” page. Still, this tool will save you a couple of clicks by giving you quick access to the most important back-end options. There is also a GreaseMonkey script13 that automatically loads the toolbar when you visit a particular website. (mm)
The script makes use of two key variables,
pan(), to animate the
background-image CSS property of elements. Typically, one would use a PNG file for this (or a set of files). Spritely’s sprites are different: they contain two or more “frames” of animation. The “pan” image is a continuous background image that moves horizontally and then repeats.
Spritely works in all modern browsers, even Internet Explorer 6. Older browsers will encounter trouble. It will also work in mobile applications but will heavily impair the browser. Spritely is free of charge. It is dual-licensed under the MIT and GPL Version 2 licenses. (sl)
When Can I Use…16 is a compatibility table that shows which upcoming Web technologies are compatible with which existing browsers. Select from HTML5, CSS3, SVG and a multitude of other technologies, then specify which browsers and versions you want to know about, and it spits out a table that tells you what’s supported and what’s not (including partial support).
Given the wealth of technologies that are just beginning to be available for general use, this table could be a lifesaver for designers who aren’t sure how compatible certain properties and attributes are. Rather than waste time on development only to find out that your nifty code doesn’t work in half the browsers out there, you can turn here to find out first. (cc)
Photographers and designers, are you tired of people stealing your work? Among its many others uses, the reverse image search engine TinEye18 gives you a great way to track those people down. Simply submit an image to find out where and how it is being used.
Unlike common search engines, TinEye doesn’t rely on keywords, meta data or watermarks. Its image identification technology analyzes a submitted image, creates a unique digital signature for it and then compares it to other images in its index. Thus, it can even find partial matches, which can help you track down modified versions of your images.
Professional and high-volume users can use the commercial TinEye API to integrate the search engine on their website or to perform back-end searches using the system’s database. Casual users can use the TinEye browser plug-in for Firefox, Chrome and IE; a special bookmarklet is available for other browsers. (jb)
Do you remember how, prior to the 80s, airbrushing was a niche market for illustrators, photo retouchers and a few t-shirt artists. The airbrush explosion of the 80s changed that, even in the minds of serious artists.
With Flame21, you are airbrushing in a new way. It’s a painting tool built by Peter Blakovic as part of his “I Am Artist” project. The paintings turn out very different depending on your brush settings, background color and, of course, creativity. If you like, you can turn your painting experiments into psychedelic patterns that conjure the galaxies, crocodiles or flower power.
The Flame Artist gallery23 showcases imaginative and inspiring pictures created by users of the tool. The tool requires Java to be installed on your machine. No other plug-ins are needed, and the tool is free to use. You can export your flame creations in a resolution of 1680 x 1050 pixels. The developer is currently working on a standalone application for PCs and Macs. (cs)
Design Quote of the Week:
The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Jessica Bordeau (jb), Manuela Müller (mm).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 http://css3please.com/
- 9 http://css3generator.com/
- 10 http://css3generator.com/
- 11 http://iamnotagoodartist.com/other/wordpress-admin-toolbar-bookmarklet/
- 12 http://iamnotagoodartist.com/other/wordpress-admin-toolbar-bookmarklet/
- 13 http://www.kulturbolschewismus.de/2010/03/03/wordpress-admin-toolbar/
- 14 http://www.spritely.net/
- 15 http://www.spritely.net/
- 16 http://a.deveria.com/caniuse/
- 17 http://a.deveria.com/caniuse/
- 18 http://www.tineye.com/
- 19 http://www.tineye.com/
- 20 http://www.escapemotions.com/experiments/flame/index.html
- 21 http://www.escapemotions.com/experiments/flame/index.html
- 22 http://www.escapemotions.com/experiments/flame/index.html
- 23 http://www.escapemotions.com/gallery/index.php
- 24 http://www.tutorial9.net