Disabled labels and the Trilemma plugin

I’m working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don’t have as much contrast as what I’d like. To better distinguish at a glance which inputs are disabled/enabled, I’ve chosen to style the labels of disabled inputs with a faint gray color.

Consider the differences in the screenshot below.

Regular labels vs labels with a disabled class
Regular labels vs labels with a disabled class

You may also view a live HTML example of the above form to see how disabled fields appear in your browser.


The difference in HTML is a small one. The first example might have a checkbox whose HTML looks like this:

<input type="checkbox" id="astronomy1" disabled="true" />
<label for="astronomy1">Astronomy</label>

While the second example, I’ve added class="disabled" to the label:

<input type="checkbox" id="astronomy2" disabled="true" />
<label for="astronomy2" class="disabled">Astronomy</label>


I’ve chosen to apply a light gray color to any label with a class of ‘disabled’.

label.disabled { color: #aaa; }

I found this technique to be particularly useful if you have a form that requires some fields to dynamically become disabled/enabled, in which case some JavaScript would also come in handy. Consider the trilemma:

The Trilemma jQuery plugin

According to Wikipedia, a trilemma is a difficult choice from three options. A trilemma can also be expressed as ‘a choice among three favorable options, only two of which are possible at the same time.’ That second part is where the name for this plugin came from.

(I found out about this term from the comments of the 2005 “Pick Two” post on kotte.org, a fun read and part inspiration for this plug-in.)

As my illustrative example, I’ve chosen the trilemma that web designers offer to their clients: Out of good, fast, and cheap, you can only pick two.

How is this represented on an online request for proposal? I would present it as a series of checkboxes:

The designers trilemma: it can be good and fast, but it wont be cheap.
The designers trilemma: it can be good and fast, but it wont be cheap.

The trilemma plugin will disable the other checkboxes after the user checks two of them. If the option is turned on, the plugin also applies class=”disabled” to the labels of disabled inputs.

The designers trilemma: it can be good and fast, but it wont be cheap.

Try it out.

This plugin isn’t limited to ‘2 out of 3’ – the trilemma is just a way to illustrate what this plugin does. The ‘2’ maximum is a default setting, but you can set it to be anything. For example, maybe you have 8 options and only wanted to allow a maximum of 5 to be checked. So the ‘trilemma’ plugin is simply a jQuery plugin that allows you to limit the number of checkboxes that can be checked within a set. (Yes, changing this number to anything other than ‘2 out of 3’ breaks the meaning of trilemma, but I’m ok with that.)

Trilemma plugin: examples, how-tos, downloads

Here are some examples.

To install, download and insert jQuery and jQuery.trilemma.js in the head of your document, then call trilemma on whatever element contains all the checkboxes. In the example below, it assumes all the checkboxes are wrapped in a fieldset with a class=”goodFastCheapFieldset”.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.trilemma.js" type="text/javascript"></script>
<script type="text/javascript">

By default, trilemma only allows 2 checkboxes in the set to be checked. To allow more, just pass a new maximum by setting ‘max’, like so:


Also by default, trilemma won’t try to set class=”disabled” on the labels. If you want to turn it on, just set it to true, like so:


To use disabled labels and set a maximum other than ‘2’, use a comma to separate those options:


Download a zip with the trilemma plugin and examples.

If you use the disabled labels option, make sure to add something to your stylesheet, otherwise you may not notice the difference!

If you find this article or plugin helpful, I’d like to hear about it. Also, consider kicking off your next amazon purchase using the link in my sidebar. I get referral credit, and it costs you nothing extra.

Update 2/23/2010: Fixed a minor bug that involved using more than one set of checkboxes on the same page.

59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama’s mind, and make you cry under the crushing pain of their inspiration

I couldn’t resist. The round-up post trend is growing at an unbelievable rate. If lists are that good, then surely a list of lists is even better, right? Let’s get started.

Titles with interesting adjectives and words

  1. 20+ Wicked Proof of Concepts for Better use of jQuery/CSS

    I appreciate concepts that keep the wicked from seeping through.

  2. 40 Sexy And Creative Typographic Logo Designs

    This is the Justin Timberlake of article titles.

  3. 50 Kick-Ass And Creative Dark Website Designs

    Of all terms to use, I like ‘kick-ass’ the most.

  4. 6 Easy Ways To Cure A Nasty Case Of Redesign-itis

    I’m glad there’s a 6-step program to treat this.

  5. 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts

    With the other lists using words like ‘brilliant’ and ‘amazing’, this title doesn’t seem to be aiming high enough with ‘decent’.

  6. 16 bitchin’ commands and shortcuts for Twitter

    Twitter was made for bitchin’, so this works doubly well.

(Titles that use) parentheses

  1. 75 (Really) Useful JavaScript Techniques


  2. 10 Intelligent Ways of using [FORM] Elements

    Not really parentheses, but I can’t imagine why brackets are being used here.

  3. 15 CSS Properties You Probably Never Use (but perhaps should)


  4. Web Nerd Terminology (Explained)

    Am I alone or does the title work better when ‘explained’ is not encompassed in parentheses?

  5. 50 Best-Of Designer’s (NEW) Download Picks and Resources

    Odd placement.

Things your must or should do (but in some cases probably don’t !)

  1. 21 Amazing CSS Techniques You Should Know
  2. 30 Fonts That All Designers Must Know & Should Own
  3. 8 fonts you probably don’t use in css, but should
  4. 15 CSS Properties You Probably Never Use (but perhaps should)
  5. 60+ Must Have jQuery Toolbox
  6. 30 More Must See Comment Designs for Blog Designers
  7. Nine Websites You Should Know About, But Probably Don’t
  8. 45 Creative Business Card Designs You Should’ve Seen
  9. 29 Web Design Blogs You Must Follow
  10. 9 (More) Useful Websites You Should Know About, But Probably Don’t

Posts that lost count of how many items are in the list, so they give up counting and slap on a plus (+) sign

  1. 80+ AJAX-Solutions For Professional Coding
  2. 40+ Tooltips Scripts With AJAX, JavaScript & CSS
  3. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available
  4. 45+ New jQuery Techniques For Good User Experience
  5. 33+ Online Resources to Learn CSS
  6. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
  7. 21+ Fresh Ajax CSS Tables
  8. 47+ Excellent Ajax CSS Forms
  9. 50+ Amazing Jquery Examples- Part1
  10. 45+ Fresh Out of the oven jQuery Plugins
  11. 23+ Impressive Tools for Faster Javascript/Ajax Development
  12. 51+ Best of jQuery Tutorials and Examples
  13. Form Elements: 40+ CSS/JS Styling and Functionality Techniques
  14. 20+ Tutorials and Resources for Working with Custom Fields in WordPress
  15. 13+ Fantastic Tools For Knowing How They’re Doing It
  16. 50+ Fonts for Big, Bold Headlines
  17. 70+ Visually Impressing Header Graphics

More round-up of round-ups

  1. 53 CSS-Techniques You Couldn’t Live Without
  2. 60 More AJAX- and Javascript Solutions For Professional Coding
  3. 30 Scripts For Galleries, Slideshows and Lightboxes
  4. 20 Creative Web Forms For Design Inspiration
  5. 40 Most Creative Business Cards You Will Ever See
  6. 50 Extremely Useful And Powerful CSS Tools
  7. 35 CSS-Lifesavers For Efficient Web Design
  8. 50 New CSS Techniques For Your Next Web Design
  9. 16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins
  10. 10 Advance jQuery Scripts to take Your Website to the Next Level
  11. 50 Fresh JavaScript Tools That Will Improve Your Workflow
  12. 15 Effective Tips and Tricks from the Masters of CSS
  13. 101 CSS Techniques Of All Time- Part 1
  14. 101 CSS Techniques Of All Time- Part2
  15. 37 More Shocking jQuery Plugins
  16. 14 Brilliant Tools for Evaluating Your Design’s Colors
  17. 10 Impressive JavaScript Animation Frameworks
  18. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results
  19. Powerful CSS-Techniques For Effective Coding
  20. 11 Reasons Why a Web CMS Will Make Your Life Easier and Your Wallet Fatter
  21. 20 jQuery Tutorials And Plugins To Impress Your Friends
  22. 28 Sites Producing Podcasts And Screencasts To Help You Grow As A Designer And Developer
  23. 19 Reasons You Should Blog And Not Just Tweet

CSS image replacement for… images? It makes sense for print.

Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn’t show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color.

One way people get around this is by including two logos on their site, hiding the one for print in the screens css, and vice versa. It works, but it includes twice as many img tags as what is really necessary.

A method I’ve had success with is calling a print-optimized image in the html, and using CSS to swap out the image with a screen-friendly one.

Compare what happens when you don’t do this to when you do.


<img id="logo" src="logo_print.gif" alt="my bloggy-blog" />


#logo {
   background:transparent url(logo_screen.gif) no-repeat top left;
   padding-top: 100px; /* height of logo for screen */
   width: 100px; /* width of logo for screen */

The height:0; and overflow: hidden; combo makes sure that I don’t see the logo intended for print on the screen. By adding a width and padding-top to that image, I can set my screen-optimized logo as the background-image. The width and padding-top should match the width and height of the image you want to show up.

This came about by reading David Shea’s image replacement tests. I like the Leahy/Langridge method of image replacement because it requires no extra markup, but this image replacement technique has some cons (as they all do) when it is used to replace text.

If it has cons, why do you think it’s an ok idea?

One usually reads about image replacement to replace text, and issues that typically come up are what to do when images are disabled, when CSS is disabled, or what extra markup has to be included to make the effect work. Since I’m using image replacement technique to replace an image, these become non-issues. If images are off, it’s the same effect as not using the technique at all – alt attribute values are shown instead. If CSS is off, the print-friendly logo is likely the favored image to show anyway. Also, no extra markup is needed – we manipulate the existing img tag and nothing else.

Presenting a src for the print-optimized logo in the HTML, even though it doesn’t get shown, feels a little weird, though, doesn’t it? You might feel better if you set the src for the screen-optimized logo, and then use a rule in the print style sheet to swap out for the print-optimized one. But that doesn’t work – remember that printing of background images is not enabled in browsers (by default, anyway).

So I’m sure you’ve seen plenty of sites that have a dark background with a white logo on them. You may even have one yourself. Go give them print preview and see how it’s handled. Sometimes (as in the case of this site), text is an acceptable fallback, but if the logo is set as an image, hopefully it is represented well in print.

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.

Christopher Werby said:
I like this and think it’s clever. I’ve had this issue in the past and dealt with it by putting both the normal and the print versions of the logo in the HTML and then switched them on and off with either the screen or print versions of the stylesheet. But with the CSS turned off, both logos appear. So I make the print version of the logo 1px wide by 1 px high in the img tag markup.
One point is that I make the print version of the logo a 300dpi file. I still use the same pixel dimensions as the screen version of the logo, but when the logo prints, it doesn’t have that soft smeary look you get when you print 72 dpi images. For an example, see http://www.garnetthelfrich.com/
I like your idea of using the background image to flip in the screen version. But there’s a downside for logos. I’ve had clients who wanted to allow people to quickly grab their logo from the Web site. When it’s a background image, it’s harder to grab. Just a trade-off to be aware of.

Troubleshooting with <base>

As powerful as Firebug is for inserting HTML and CSS on the fly, sometimes you just want to save a local version of the page so that HTML manipulation can be saved and tested across browsers.

I just wanted to share a tip on how easy this is to do. Right click, view source, and save it as an html file. If you’re lucky, the page will load right up, bringing in the CSS/JavaScript files that’s being used on its original domain.

For some sites, you have to give a little guidance. Like today, I went to wired.com, viewed and saved the html source. You can view the result here.

Yuck, it’s missing styles. That’s not what we wanted.

But by inserting a little code in head, we can grab everything the page uses from the site. After the opening head tag, insert the following:

<base href="http://www.wired.com/" />

and then resave the file. View the result, and you should see the page just as it is meant to be seen at its original address.

I can modify my local copy to my heart’s content, putting new or modified CSS in style tags until I have it just right, then commit the changes to something more permanent. I use this all the time when troubleshooting defects, especially when needing to see how inserting some new element in the HTML will affect IE. Hopefully, it will help some of you, too.

And note that the wired.com example might work for today, but if they ever redesign, this article’s example won’t mean jack. I apologize in advance.

Checkbox filters with jQuery

Perhaps I’m using delicious.com wrong, but sometimes I wish I had the ability to narrow down my results from a variety of different tags rather than excluding results that don’t share the first tag I marked. That’s where this exercise came into play.

The technique can be used anywhere. In my line of work (online hotel reservations), I’ve experimented with this technique for a room selection for online hotel reservations. For instance, hide all but the non-smoking rooms with a king bed, and only show me rooms that I can pay for in advance to get the cheaper price. That sort of thing.

For this article, I’m going to base my examples on delicious.com’s bookmarks.

Disclaimer stuff

This isn’t so much of a ‘teaching’ post as it is an ‘asking to be taught’ post. Despite the danger I can cause, I’m no JavaScript/jQuery guy, and there are plenty of places here that I’m going about this all wrong. In those instances, I need your help. I’ll call out some specific questions where I know I need improvement. And if you see additional places, please let me know. In the meantime, don’t look to this post as tried-and-true, ready-to-copy-and-paste way to do things, because it’s far from it.


Let’s recreate a delicious bookmark listing and leave out the filters for now. Here’s the html for a single listing:

    <h4>The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials</h4>
    <p class="url">http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html</p>
    <p class="tags"><strong>Tags:</strong> plugin, wordpress, webdesign, jquery</p>

In order for this to work, we need a way to get the list items using class names. So the tags are repeated as class names. Also, I’m going to give this particular list a class name so the javascript has something to target later.

<ul class="filterThis">
  <li class="plugin wordpress webdesign jquery">
    <h4>The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials</h4>
    <p class="url">http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html</p>
    <p class="tags"><strong>Tags:</strong> plugin, wordpress, webdesign, jquery</p>

We create several of these records and we have ourselves a nice delicious-like page of results.

Let’s say it in English

The JavaScript for this is kind of long and boring, not to mention that I’m not doing it right in several places. So instead of reprinting it, I’d rather just say in English what I wanted the JavaScript to do. Writing out the logic in English is always a good practice anyway. So here goes:

When the page loads, look through all the class names of the list items to be filtered, and build a new list with all the unique values of those class names, along with a corresponding checkbox. Being friendly, we’ll also include a ‘show all’ checkbox at the end of the list. Since all items are shown by default, all checkboxes will be shown by default, too. When someone unchecks a box, hide any item that has the class name of that checkbox’s value. When rechecked, show any item that has the class name of that checkbox’s value.

Mouthful, right? There’s much more to come, as I quickly realized that there is more I needed to do with this list.

Working through one issue at a time

Issues I immediately noticed with example 2:

  1. ‘jquery’ is a common tag to every item. How should that be handled?
  2. When i uncheck ‘webdev’, an item that has the class of ‘resources’ also disappears. It’s the only item with the class of ‘resources’, yet it’s checkbox stays checked, misleading me into thinking that because it’s checked, there must be a listing showing that has it.
  3. It would be nice to alphabetize the filters.

The latter one was the easiest to knock out. I can sort the array of unique class names by adding this line to the JavaScript:

arrayUniqueClasses = arrayUniqueClasses.sort();

Also, I chose to exclude any class that is common to all elements from being in the filter column. (My code is probably cruddy for doing this – would love feedback on this.) For sake of demonstration, I created a paragraph above the filters that states which classes those are common to all list items.

I noticed an additional challenges:

  1. When a filter is unchecked, before hiding the list item, I need to check other classes on the list item to be hidden.
  2. When a filter is checked again, in addition to showing the list item, I need to check all the other filters for every other class associated with a newly shown list item.
  3. For my personal preference, I wanted to add this in: If all other filters are checked, go ahead and recheck the ‘show all’ checkbox.

To see how I tackled these challenges, I recommend viewing source on the examples. The script is commented with what I’m doing and questions to myself throughout the process.

Questions for people with more jQuery/JavaScript experience than me:

  • In order to have only unique values in my array, I’m using a function called unique(a) (credit: Johan Känngård, http://johankanngard.net/). I tried to use jQuery.unique, but it wasn’t working right. If anyone can do the unique part in jQuery for me and point out how it’s done, I’d be much appreciative.
  • I’m using what is probably an unreliable method for determining if a tag is common to every result. I count the number of list items, and I count the number of times any class appears. If a class’s total occurrences equals the total of all list items, I assume that class is common to all list items. Is there a better way to do this?
  • I’m removing items from my arrays using a removeItems(array, item) function that I got from who-knows-where. Is there a way I can do this in jQuery?
  • Any other things that could be done better?

CSS Guy said:
Great question. I certainly didn’t account for what happens when only one result is listed.
I’d add this as the first line after the $(document).ready(function () { part:
if ($(‘.filterThis > li’).length < 2) { return; } This checks to see if the number of results is less than 2 (such as one or none), and if so, just escape out of the loop. This way, no checkboxes would be created and no sentence regarding excluded filters would be created either. Does that help? I am using your script to filter my online portfolio. I have four tags set up (logo, website, marketing, print). Lets say an li has a class of "website logo" (two tags). When I uncheck logo I still want that element to remain (not disappear) because it still has a tag of website (which is still checked). I basically want to set your script so an element only disappears if all the tags are unchecked, not just one. How can I do that? CSS Guy said: @Jesse, I think I know what you mean. Does this example help? Jesse portfolio filters

CSS Guy said:
Great question. I didn’t accommodate for tags that have spaces in them.
I’m not sure I can help. I viewed source on my final example and even though I wrote the code, it made my eyes roll into the back of my head. I wish I had time to make this more flexible, but without sitting down to do it again from scratch, I’m not sure I can.
Sorry I couldn’t help further. If you figure something out, send it over and post a comment. I’d be more than happy to link to what you’ve got.

How to make a ‘wall of awesome’ with CSS and an animated gif

My coworker Alan sent me a link to moustacheme.com last week. Moustacheme.com has a wall of awesome, which is a gallery of moustachioed photos (perhaps it could be called a “stash of staches”, or a “stache-cache”), and it uses a clever CSS technique for an attention-getting effect on hover.

Let’s recreate it.


We want a thumbnail container, with our link inside of it. The thumbnail image is inside the link. The thumbnail containers are at a fixed dimension (thanks to the thumb) and will simply float left and repeat .

So this:

<div class="thumbnail">
  <a href="#">
    <img src="thumb.gif" alt="" />

repeated a few times and put in a container, like so:

<div class="container">
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>

Some basic layout CSS

Right off the bat, I want to layout my thumbs a little better, like a 9×9 grid. So I’ll start with that first.

.container { width: 470px; }
.thumbnail { float:left; }
.thumbnail a img { display:block; border:none; }

Now let’s get awesome.

Awesome CSS

To get awesome, we need to find a nice high-contrast animated gif to assist our hover state. I could use the star blast used on moustacheme.com, but those are cut to the size used on that site, so I think I’ll create my own little animated spiral based on a rough gif I found on the internets.

We set that image as the background of our thumbnail div. The awesomeness is baked into place once the opacity of the thumbnail image is changed on hover.

.container { width: 470px; }
.thumbnail { float:left; background:transparent url(images/spiral.gif) no-repeat 50% 50%; }
.thumbnail a img { display:block; border:none; }
.thumbnail a:hover img {
  opacity: 0.8;
  filter: alpha(opacity = 80); /* for IE */

I’m certain this could be done with less markup. For instance, we don’t need a div.thumbnail. Our <a> tag can be the thumbnail – set it to display block and attach the background image to it.

In summary

Ok, so my wall of awesome featuring images from the Men Who Look Like Kenny Rogers web site is not as awesome as moustacheme.com’s wall, but you get the idea.

Mike asks the CSS Guy about a scrolling trick with background images

Mike writes:

Check this out: http://econsultancy.com/reports.

Scroll up/down… whaaaaat? :) How was this done?

Answer: fixed background images. Let’s look at some examples.


For the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of it in black and white.

The images don’t have to be the same size, but that definitely makes it easier.

The markup

Each image will need it’s only container. I’ve used a header div and a content div.

    <div class="header">
    <div class="content">


Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set to fixed.

.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;

I’ve kept this example basic. If your browser is wide enough by default, the two images are already seen at the same time. That’s ok just for purposes of illustration.

And knowing this can be done, there’s no reason it has be limited to just two images.

So what can be done with it?

This ‘effect’ isn’t inherently bad or annoying, but it is noticeable enough that I’d rather it exist for a reason – where the effect adds some value to the content. Otherwise, like in the case of econsultancy, it just seems like an excuse to show both the home and away jersey, as if someone couldn’t decide which logo to go with, so they came up with a way to use both.

I took a stab at it. Maybe a paper shredder web page?

Or maybe not…

If you’ve seen technique this used effectively, let me know in the comments.

Jan 14, 2009: Some readers of reddit mention that the following sites that have used fixed background images to achieve a nice effect:

  • Eric Meyer’s complexspiral demo uses fixed background images to fake transparency
  • Bryan Katzel’s We Bleed Design portfolio. (Click the ‘play’ link at the top, sit back, and enjoy).

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.

It’s been used for years here: http://timpelen.com/?car=jalpa

This was also done to great effect in the CSS Zen Garden:

Josh asks the CSS Guy about row locking with jQuery

With regards to this article, Josh writes:

“Would it be possible for you to recreate this with jQuery and see how many lines of JS you can save in the process?”


This is a direct jQuery replacement of this particular example.

The jQuery

I ditched all the home-grown functions, linked out to the jQuery-latest.js, then wrote the following bits:

$(document).ready(function() {
  $('.pickme tbody tr:odd').addClass('odd');
  $('.pickme tbody tr').hover(
    function() { $(this).addClass('highlight'); },
    function() { $(this).removeClass('highlight'); }
  ).click( function() {

In English, this says:

  1. When the page has finished loading the DOM…
  2. add a class of ‘odd’ to every other row in the table…
  3. then assign a hover behavior that consists of:
  4. adding a class of ‘highlight’ to the row when hovered into…
  5. and removing the class of ‘highlight’ when hovered away.
  6. When any row is clicked…
  7. remove the class of ‘selected’ from any other row that happens to have it…
  8. then add class of ‘selected’ to the current row, while also checking it’s radio button.

This is much shorter and easier to write for than the previous example. Compare the javascript written in the source code on the previous version to the jQuery version.

The usual warnings for using libraries still apply. If it’s a single effect on your site, it is likely best and more concise to write out your functions from scratch, but if you are already using jQuery (or any other library) on your site, take advantage of it. Also, just because it’s easy doesn’t make it right – give consideration to whether a behavior should be applied at all.

Pardon the mess

I’m gutting some movable type html, and along with that, I’ll need to rebuild the CSS file as well. If you keep seeing fresh articles in your feed reader, this is why. This will take a few days.

Sep 12, 2008: I suppose it could be considered subjective, but the ‘mess’ has been straightened up. I still have some entries to edit to bring up to column standards (why didn’t I do this sooner?), but things are falling into place, and I’m learning plenty in the process. I’ve got a vacation coming up, but hope to get some articles currently in the works on the site soon after my return.

A page curling tip

Some have asked how to do the page curl effect for the figures in the article I wrote for Smashing Magazine, which included figures with page curls.

The answer is Veerle’s tutorial.

There is one extra tip I’d like to offer.

In Step 2 of Veerle’s directions, she states the following:

“Since this curl doesn’t show the back of our photo, it doesn’t really look realistic. The only way I’m aware of to achieve this effect is that we draw it ourself. Select the Pen tool from the Toolbox and draw a path on top of the picture. Follow the borders of the curl you just transformed as guidance. …”

Emphasis mine.

Tracing the curl with the Pen tool can be difficult when the contrast between the curled edge and the ‘facing’ edge of the photo is too faint. For instance, if you went through the tutorial with a blank beige square, your progress as you get to step 2 may look like this:

Stage 1: Drawing the marquee

Stage 2: Select to warp

Stage 3: Drag the corner

Stage 4: Hit enter

Uh-oh! Now what do we trace to make the curl? You can make it up if you’re so inclined, but if you want a guide to trace, do the following:

  1. Take a screen grab just before you hit enter.
  2. Press enter to commit your warp.
  3. Paste in your screen grab over your working page layer.
  4. Change the opacitiy of the screen grab layer so you can line it up with the layer underneath.
  5. Now you should have guides to draw your curl.

Once you’ve drawn your curl with the pen tool, you can trash the layer and go about the other steps in Veerle’s tutorial to finish out the effect.