Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #10

This newsletter issue was sent out to 30,899 newsletter subscribers on June 8th 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

  1. Editing Images Online with Darkroom2
  2. CSS3 Button Maker3
  3. AltFontPrev: View the Font Stack of Any Website4
  4. jCharacterfall, the CSS3/jQuery Game5
  5. Footer Fun6
  6. Repeat-x Repeat-y: Free Tiling Patterns7

1. Editing Images Online with Darkroom

When you need to modify a picture but don’t have your favorite software on hand, online editors can be very useful. The all-in-one image processor MugTug’s Darkroom is special because it was created for photographers. So, it contains only basic but essential image processing-oriented functions. You are able to adjust levels, white balance, exposure, contrast and saturation and apply a few photographic effects. In addition, Darkroom allows to upload pictures from Picasa and Flickr.

Editing images

In case you need a more elaborate tool, don’t forget about other solutions such as Pixlr8 and Sumo Paint9. They are the most popular online image editors for a reason: by recreating a lot of Photoshop features, their interfaces offer quite a wide range of options. Even though they can’t replace dedicated software, these alternatives are worth knowing about… just in case. (jb)

2. CSS3 Button Maker

With the new possibilties offered by CSS3, such as gradients and rounded corners, we are needing graphics editors for fewer and fewer things. Why spend an hour creating a series of buttons in Photoshop when you can just specify them in the CSS files? The only problem is that styling buttons directly in CSS can still be time-consuming, especially if you don’t do it on a regular basis. Obviously, CSS3 code doesn’t work in IE yet, but in some situations making the page looks exactly the same in IE as it does in modern browsers may not be necessary.

CSS3 Buttom Maker10

Button Maker11 from CSS-Tricks lets you use sliders and simple color selection tools to create CSS buttons with a live preview function. You can choose from many options: top gradient color, bottom gradient color, top border color, hover background color, text color, hover text color, active background color and font (although the only options for font are Georgia, Helvetica and Lucida Grande). There are sliders to control button size, text size and the roundness of corners, too. Then just click the button to grab the CSS. (cc)

3. AltFontPrev: View the Font Stack of Any Website

Web typography can be one of the most restrictive parts of designing a website. Solutions out there expand our options beyond the standard Web-safe fonts, but they all have drawbacks or major flaws. Complicated font stacks are often an option, but it can be a pain to test websites with big font stacks to make sure the text appears adequate if the primary fonts are unavailable. Sure, you could use a plug-in like Firebug to comment out or delete fonts one by one in a font stack, but depending on how the website is set up, that can be time-consuming and a pain.


That’s where AltFontPrev12 comes in handy. It is a simple JavaScript bookmarklet that lets you view the font stack of any website and then deactivate each font in turn with a single click. It makes it easy not only to make sure everything looks okay when certain fonts aren’t installed on a user’s system, but also to view the fonts included in the website’s font stack in a single click, rather than opening the source code. You can even specify a custom font, which makes it handy when you’re considering changing a design’s current font. (cc)

4. jCharacterfall, the CSS3/jQuery Game

We all need to kick back and have a little fun once in a while, even at work. What better way to do that than with a little CSS3/jQuery game? Especially one that could theoretically improve your typing skills.


jCharacterfall14 is an addictive game, built with jQuery and CSS3, that’s fun to play while still being challenging. There are two levels, easy and hard. In the game, water droplets fall from the top of the screen, each with a letter inside. Your goal is to type that letter on your keyboard before the drop hits the bottom of the screen. Sounds easy enough, right? It is, except that the longer you play, the faster the droplets fall. Pretty soon, you barely have time to register the letter before it hits the ground. You get five lives, and on the hard level if you type the wrong letter, one life is taken away (on the easy level, you lose a life only if a drop hits the ground). Just be careful that you don’t play so long that you neglect your work! (cc)

5. Footer Fun

The footer is not necessarily one of those things that immediately grab our attention. Many users do not reach page ends at all, and some do perhaps after long, tiring scrolling. But that’s no reason not to invest some effort. After all, the footer can present useful information, navigation and services, and it can surprise visitors and visually complete a design. Designers have turned the design of the footer into an art. And many ideas on ways to do it are out there.

Footer Fun
A part of Fusebox Creations’ fabulous footer.

If you would like to get inspired by one of those ideas, look at one gallery post15 of the several we have published16. A bunch of tips are there, too. The only thing missing was a suitable CSS gallery. But don’t worry: there’s one now. It’s called Fetish Footer17, and it shows the most spectacular ideas of all of these footer artists. (sl)

Footer Fun
A slice of Foxtie’s funny footer

6. Repeat-x Repeat-y: Free Tiling Patterns

Finding innovative and interesting tile patterns can be time-consuming. Whether for a website background, illustration project or even a desktop background, it’s too easy to waste hours looking through them, only to find that the one you want doesn’t tile properly.

Repeat-x Repeat-y18

Repeat-x Repeat-y19 calls itself “a showcase of the most bad-ass patterns from around the world.” And it really is. It showcases dozens of great patterns in a variety of styles. The patterns include simple (and complex) geometric shapes, hand-drawn illustrations, pop-art patterns and everything in between. All the patterns are released under a Creative Commons Attribution, Non-Commercial, No Derivative Works 3.0 license, which means you can’t make derivative works from them, but you can use them for a website or desktop background. (cc)

The authors in this newsletter are: Sven Lennartz (sl), Cameron Chapman (cc), Jessica Bordeau (jb).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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. 1

    oof.. seems doesn’t work as of 2012-12-26. don’t they know cool urls don’t change?


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top