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 newsletter, of course.

Table of Contents

01. Generate Cross-Browser CSS3 Code on the Fly
02. WordPress Admin Toolbar Bookmarklet: Blogger’s Little Helper
03. Spritely: Bringing Graphic Elements to Life
04. “When Can I Use…”: a Browser Compatibility Look-Up Table
05. TinEye: Reverse Image Search Engine
06. Flame: Online Experimental Painting Tool

1. Generate Cross-Browser CSS3 Code on the Fly

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! 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 @font-face attribute.

Screenshot

CSS3 Generator 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)

2. WordPress Admin Toolbar Bookmarklet: Blogger’s Little Helper

Small yet efficient, the WP-Toolbar bookmarklet 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.

Screenshot

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 script that automatically loads the toolbar when you visit a particular website. (mm)

3. Spritely: Bringing Graphic Elements to Life

Where once DHTML did the job, now JavaScript and AJAX libraries serve duty. jQuery is one of the leaders in this area; many of its plug-ins allow for greater interactivity on websites. For instance, Spritely, a lightweight jQuery plug-in that adds dynamic characters and background animations in pure HTML and JavaScript. These animations can go in the foreground (for example, vehicles, balloons, birds, insects) or bring to life a background scene (rivers, clouds, landscapes). Foreground elements appear to “fly above” text and other page elements. Is it user-friendly? Probably not, but it looks great and doesn’t require Flash.

Screenshot

The script makes use of two key variables, sprite() and 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)

4. “When Can I Use…”: a Browser Compatibility Look-Up Table

When Can I Use… 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).

Screenshot

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)

5. TinEye: Reverse Image Search Engine

Photographers and designers, are you tired of people stealing your work? Among its many others uses, the reverse image search engine TinEye gives you a great way to track those people down. Simply submit an image to find out where and how it is being used.

Screenshot

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)

6. Flame: Online Experimental Painting Tool

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.

Screenshot

With Flame, 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.

Screenshot

The Flame Artist gallery 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:

“Be friendly to those who enjoy your work and friendlier to those who attack it.”
David Leggett, the creator of Tutorial9

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).

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top