riddled

Articles

Accessible image replacement with CSS3

Image replacement is as old as CSS tips and tricks posted online. Here’s a list of available techniques. Recently I’ve become particularly interested in the Gilder/Levin method. It uses additional span element, positioned over the parent. This span then gets background-image treatment, covering underlying text.

I normally use it like this:

<h1>Futurama <span></span></h1>

h1 {
  position: relative;
  width: 256px;
  height: 133px;
}

h1 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("image.png") no-repeat;
}

Why do I bother? This is the only (sane) method allowing images to be disabled or not downloaded at all. And why would I care about this?

  • I want to provide alternative way to access all content on the page, full stop. This is supposed to be a replacement, not obliteration.
  • There is a small lag between rendering DOM element and downloading the image. Browsers are so fast these days that it can happen even on broadband.

It’s all good and I use it all the time for logo elements (headings usually get @font-face anyway). The only thing that bugs me is that additional span element. Today I learned how to get rid of it.

Note: In my daily work I support only modern browsers (including IE8), so if you need to support earlier versions of Firefox (3.0) or IE 4.0, stop reading. ;)

Code looks like this:

<h1>Futurama</h1>

h1 {
  position: relative;
  width: 256px;
  height: 133px;
}

h1:after {
  content: url("image.png");
  position: absolute;
  left: 0;
  top: 0;
}

Test it here, works like a charm. I used content: url() by purpose – there is a strange bug that won’t allow text to be covered in IE8 just by using background-image. Image must have the same dimensions as parent element or you must clip it adding overflow: hidden to h1.

If you have any comments and/or improvements, get in touch.

PS: “CSS3” in the title refers to the ability to position generated content (which was indeed introduced in CSS2). Don’t send angry emails. :)

Twitter Searches

Tracking stuff you’ve created on Twitter can be difficult due to tons of spam, useless retweets and hashtag memes. This is what I had to type into Twitter’s search box:

Quicksand http -RT -youtu -♫ -“now playing” -nowplaying -lastfm -“lady gaga” -“britney spears”

Mrs Spears and Gaga are specific to this query, but the rest may come handy in every search. If the project is new and everyone’s getting excited, you may want to delete “-RT” to see an avalanche of tweets.

Masking Layer Styles

If there’s one reason for doing most of the interface design work in Photoshop, it’s gotta be its “Layer Styles”. For those of you living under a rock, Layer Styles allow to add dynamic—duh—layers like shadows, gradients and borders to any bitmap. Combine them with vector shapes and the result is pretty versatile.

However, there’s a small shortcoming of this great feature: you can’t edit pixels in any dynamic layer directly. So for example, if you want to erase one side of button’s border, you can’t just do it.

It takes more than that, and I’d like to show you how it’s done properly. We’re gonna use another neat and undervalued feature called Layer Mask.

Because mere theory isn’t fun, let’s attempt to make something (kinda) useful – like recreating Mac OS X’s deafult window resizer. Heaps of fun, I know. I’ve decided to build it without much finesse, by gluing vector rectangles one near another. How you do it isn’t so important, but you should end with something like this: (max zoom)

To make it look realistic, we need another three lines of white semitransparent pixels. This is where Layer Styles kick in. Choose Drop Shadow from fx menu and tweak values to resemble this:

These settings will create a 1px drop shadow (without any blur), like this:

As you can see now, the shadow appears underneath every pixel. We don’t want that. Choose menu Layer → Layer Mask → Reveal All (or click Add Mask in the bottom of Layers window). Layer’s icon will change to gray square with dot inside. Then pick Pencil Tool (1px) and draw a straight black line, in this area: (red was used just for presentation)

You’ll notice that a part of the layer has disappeared, but it’s still not perfect. To correct it, choose Layer → Layer Mask → Disable (or choose it from layer’s contextual menu). Layer’s icon will change to gray square crossed with red X and you’ll see the improved look:

Tested in Adobe Photoshop CS4. Hopefully this will increase your real productivity, have fun!

BumpTop for Mac

This is BumpTop for Mac transforming Finder’s desktop into a 3d space. Problems:

  • I’ve got some ugly, pixelated menus.
  • Doesn’t respect file’s “Hide Extension” flag (default for .webloc bookmarks) when renaming.
  • Dragging files to Trash displays a second, non-3d-transformed picture that won’t disappear when it’s no longer hovered over Dock.
  • No way to drag screenshots from Skitch.app to the desktop (display’s error).
  • For that matter, no way to drag anything non-standard from any app. No links, text clippings.
  • Images dragged from Safari are saved in the center, not where I dropped them.

Conclusion: Very neat, but buggy. Uninstalled.

1BigMess

I’m a huge fan of 1Password. A single button in Safari lets me in to every site and all I have to remember is (you guessed) one password. Yesterday marks the day when version 3 was released. It uses a new and better keychain, has plenty of amazing features and support for 64bit Safari (yeah!). Well-done upgrade.

But my eyes hurt when I look at this:

I know not many people see this window very often, but I think whoever designed it went overboard. Let’s outline what is really wrong and why.

Sidebar is widely used in variety of apps since Leopard was released. As you can see it’s not exactly the same in every app but it’s conveniently similar. Finder and iTunes use slightly different background (other apps follow) and white text shadow for headers varies but they all look pretty coherent.

1Password on the other hand uses much darker background (with matching selection color) and oversized headers. Icons don’t match the same style and saturation and some of them are too big.

Main part of 1Password’s window is taken by a list with all passwords. What is wrong with that? Scrollbar. Take a look at scrollbars in Mac OS X:

On the left there’s default Aqua scrollbar, then Apple’s flat variation used for the first time in iTunes. I think we can all agree iTunes 9 looks like a glowing turd, but it actually manages to make that flat scrollbar prettier. And then there’s 1Password with its own invention. Let’s take a closer look.

Our password app wanted to have a flat scrollbar but it failed – bottom part is shorter, arrows lack shadow, there’s no depth and there’s no left border that would separate it from the table view. I’m not sure if you can choose iTunes-esque scrollbar in Interface Builder, but if you can’t you should build something better.

Next up: bottom toolbar.

They aren’t really the same, but every app using this interface element makes it in the same, unified gray. 1Password once again chooses the dark side and paints it with dark gray.

Lastly, there’s this thing:

Nobody tells guys at Agile Web Solutions to make editing data boring (Address Book), but I see so many custom elements and pointless decorations that my head hurts. And there’s more.

Text shadow everywhere, outer and inner. Misaligned labels. Custom (keyboard inaccessible) controls. Squeezed footer text despite plenty of space. Yellow band and tilted screenshot screaming “Look at me!” simultaneously. Paper clip, curled page, drop shadow, gradient and abstract drawing. I’m wondering where bevel is hiding. Christ.


I still love this piece of code for all the hard work it does. But Mac apps are details, fretted over and over. Interface should be recognizable but not juvenile. That’s why Cultured Code’s or Panic’s creations fit in the system yet are engaging. 1Password? Not so much.

If you’re like me, you watch a lot of videos online – The Daily Show, Colbert Report, Zero Punctuation to name but a few. If I had to focus only on what’s currently playing, I wouldn’t be doing anything constructive at all. So if a clip is longer than 2-3 minutes, I usually pull the tab out from Safari, resize and pan the viewport, place it somewhere on the screen and go back to whatever I was doing before.

Cumbersome.

Then the idea struck me. I could make a bookmarklet that would do all the hard work for me. And I did: Cut-out Page

Tested in Safari 4 and Firefox 3.5. Feel free to modify, steal, rewrite, whatever. I should put it on GitHub, but I’m still git-less afer upgrading to Snow Leopard. And lazy.

Known bugs:

  • Safari’s window resizes programatically only if there are no other tabs.
  • Firefox will reload Flash object when script gets rid of scrollbars. Weird bug, but hey – it’s Firefox, remember?

Hey, what’s up? Long time no see.

I have something to confess: I got caught up in a rat race.

Constant improvement, lighter CSS, better typography, more accessibility, fluent writing.

For heaven’s sake, I maintained a site that had “perfection” in the URL.

How could I top that? The point is, I couldn’t.

That’s why you’re now reading a list of short, less-than-140-character sentences.

I need to start doing this again, and stop worrying about being perfect.

Brace yourself, because even I don’t know what happens next.