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

01. Editing Images Online with Darkroom2
02. CSS3 Button Maker3
03. AltFontPrev: View the Font Stack of Any Website4
04. jCharacterfall, the CSS3/jQuery Game5
05. Footer Fun6
06. 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 Darkroom8 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 images9

In case you need a more elaborate tool, don’t forget about other solutions such as Pixlr10 and Sumo Paint11. 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 Maker12

Button Maker13 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.

AltFontPrev14

That’s where AltFontPrev15 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.

jCharacterfall16

jCharacterfall17 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 Fun18
A part of Fusebox Creations’ fabulous footer.

If you would like to get inspired by one of those ideas, look at one gallery post19 of the several we have published20. 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 Footer21, and it shows the most spectacular ideas of all of these footer artists. (sl)

Footer Fun22
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-y23

Repeat-x Repeat-y24 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).

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

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

    0

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