May 26, 2011

Fancy UL/LI bullets

I've always been frustrated at the rather useless selection of bullet options for LI lists in CSS. So I decided to do something about it.

I developed a simple set of transparent PNGs and a set of CSS classes to boot. Here's the result: (the below image was generated using only ul/li code)


Download the bullet images here.

Then try this CSS: (be sure to update the image references accordingly)

ul.check li, li.check { list-style-image:url('li.check.png'); }
ul.x li, li.x { list-style-image:url('li.x.png'); }
ul.box li, li.box { list-style-image:url('li.box.png'); }
ul.box-on li, li.box-on { list-style-image:url('li.box-on.png'); }
ul.radio li, li.radio { list-style-image:url('li.radio.png'); }
ul.radio-on li, li.radio-on { list-style-image:url('li.radio-on.png'); }
ul.plus li, li.plus { list-style-image:url('li.plus.png'); }
ul.minus li, li.minus { list-style-image:url('li.minus.png'); }

May 6, 2011

The Secret to Beautifully Inset/Embossed Text

White drop shadows.


This simple technique has totally transformed my designs in the last couple weeks. My buttons have more dimension. My text has more impact. I feel so Web 3.0.

Try it in your favorite image processor... or even better, IN CSS!

text-shadow:1px 1px 0px #fff;
filter:DropShadow(Color=#ffffff, OffX=1, OffY=1); /* FOR IE */