KarimNassar.com
Shooting Star
The Shooting Star is a near-future, orbital, or supra-orbital fighter that I designed with a goal of realism. There are a lot of elements that make this a distinctive design. The first of which is that I've eschewed the primary tropes of Sci-fi space fighters.
There's no canopy, no streamlining, no wings, no "hyperdrive", and very limited armament. The only two concessions to SF convention I chose to make in the design are a small-scale fusion reactor for power, and the very notion of the reasonablility of a small-scale space-fighter in the first place. In fact, as I was designing this craft, the first problem I decided to solve was the logistics of how a fighter would be transported between engagements.
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.
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:
- How to indicate what the limit actually is
- How to show the user how far into (or over) the limit they are
I believe that my textGauge plugin solves these problems.
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.
Read more: Pure CSS Glossy Button (with a "Sliding Doors" fallback)