KarimNassar.com

Pure CSS Icons (aka: Stupid CSS Tricks)

This is something I was toying around with recently. It all started with some new button designs that leveraged a clever combination of pseudo-elements and the CSS border-triangle trick. I started thinking, "What else can we use this for?" The result is pretty cool, if not actually terribly useful (images are much more practical, and real HTML5 techniques are much less brittle on supported browsers), but I'd though I'd share this:

Below is an image of what these look like on supported browsers. Right now, I've only tested them on Firefox and Webkit.

Pure-CSS Icons

Read more: Pure CSS Icons (aka: Stupid CSS Tricks)

textGauge jQuery Plugin

We've all been there. Fill in enough forms online, and you'll eventually hit the textarea that has a character limit. We've seen all the usual treatments: "The Keystroke Countdown," "The Arbitrary Letter Target," and the worst UX sin of all: "The Hard-Limit Hammer."

When I was faced with solving this particular problem recently, I decided that there had to be a better solution. There are two major problems to solve with a length limited input field:

  1. How to indicate what the limit actually is
  2. How to show the user how far into (or over) the limit they are

I believe that my textGauge plugin solves these problems.

Read more: textGauge jQuery Plugin

Model Kit for iPhone and iPod Touch

Model Kit Icon

Version 1.1.2 now available!

Model Kit is a set of calculation tools designed for scale model builders, model-railroad enthusiasts, scratch-builders, or anyone else who needs to quickly and easily convert between measurements in different scales, figure out the scale of a model or model part, or perform other modeling-related calculations.

Model Kit for iPhone® and iPod touch® is available on the App Store℠ for US$4.99

Read more: Model Kit for iPhone and iPod Touch

Pure CSS Glossy Button (with a "Sliding Doors" fallback)

I like to challenge myself when I'm working on web presentation.

Last year, at work, the Creative department designed a new style of button to replace our old implementation. It was a fairly graphical button style, and I immediately began wondering if there was a way to avoid images and slicing. The typical solution to this problem is a sliding doors approach.

Glossy Button image

Read more: Pure CSS Glossy Button (with a "Sliding Doors" fallback)