Categories
Web Design

iCheck

iCheck is a jQuery and Zepto plugin, that makes pretty customized checkboxes for your swanky websites. Very nice.

Categories
Web Design

CSS Hat

When I design, the annoying part of getting my designs in Adobe Illustrator or Photoshop on the web, is the export process. It can take a long time to get all the elements in my design exported out as web usable images. Today I ran across 2 useful utilities that can greatly speed the process.

CSS Hat

CSS Hat takes Photoshop layer effects and translates them into valid CSS3 markup. As long as you are styling with layer styles, you can get the applicable code in CSS.

Slicy

Slicy, likewise, takes Photoshop layers and exports each one as a transparent PNG, JPG, or GIF based on your layers export settings. Especially useful if you are layering image elements.

While you can achieve both effects by spending a little time, these utilities can speed up your workflow if you are doing this kind of work a lot.

Categories
Web Design

Exceptional Typography

As with all things on the web, I was surfing around, minding my own business, when I came across some sweet, sweet typographic web design that blew my socks off. Blew them right out the door. I could just give you a few links, but wouldn’t it be better if we followed the links down the rabbit hole?

ALRIGHT!

First I was looking for a website which explained a little better hyphenation on the web. I hate hyphenation at wide column widths and couldn’t for the life of me find any documentation on the hyphenation CSS tag. But then I found:

CSS Hyphenation | Trent Walton

CSS Hyphenation was pretty slick. I was like “who made this site?” because it is responsive as HECK!

Trent Walton

Trent Walton, WOW! I thought rubbing my eyes. How did he do that with the type? Is he a warlock?! Let me sneak around, I thought. Then I found the answer:

Lettering.js - A jQuery plugin for radical web typography.

Lettering.js is a website I had come across before, but I always thought it was unnecessary for my web design purposes. Now I’m intrigued. Looking over the case studies I found this:

Paravel

Paravel. And who runs Paravel? That Trent Walton dude. Pretty great landing page. Finally looking over their portfolio of projects, I found this project which made me very happy.

Lost World's Fairs

Lost World’s Fairs. Amazing! Especially the Atlantis one. I seriously have never seen anything like it before. Anyway I was so impressed I decided to tell all of you… because we are best friends.

Categories
Web Design

Emmet

Emmet

Emmet bills itself the essential toolkit for web-developers by speeding up HTML and CSS tasks. Looks cool, may fire it up in Espresso.

Update: After using Emmet for a few days, I can honestly say it is incredibly powerful! Seriously speeds up web coding. Definitely needed to refer to the Cheat Sheet.

Categories
Design

Pure CSS scrolling shadows

Pure CSS scrolling shadows is a pretty ingenious way to achieve the slick UI effect with almost no overhead — of course earlier versions of browsers may have some trouble.