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
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.
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)
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.
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)
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.
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.
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)
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.
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)
A slice of Foxtie’s funny footer
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-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).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 http://mugtug.com/darkroom/
- 9 http://mugtug.com/darkroom/
- 10 http://www.pixlr.com/
- 11 http://www.sumopaint.com/home/
- 12 http://css-tricks.com/examples/ButtonMaker/
- 13 http://css-tricks.com/examples/ButtonMaker/
- 14 http://samrayner.com/archives/altfontprev/
- 15 https://code.google.com/p/altfontprev/
- 16 http://demo.marcofolio.net/jcharacterfall/
- 17 http://demo.marcofolio.net/jcharacterfall/
- 18 http://www.fuseboxcreations.com
- 19 http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
- 20 http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/
- 21 http://www.footerfetish.com/
- 22 http://www.foxtie.com
- 23 http://www.repeatxrepeaty.com/
- 24 http://www.repeatxrepeaty.com/