Bullet Madness at Stylegala

Looking for some quick bullets for your unordered list for your design? The folks over at Stylegala compiled a list of bullet images sent in by users that you can save to your site and use. Head over to http://www.stylegala.com/features/bulletmadness/ to check them out. This list also serves as a good inspiration for those who are looking for that special bullet because we all know that a circle is just too plain.

What’s the best way to utilize these bullets in your HTML code? There is the list-style-image: url(PATH_TO_IMAGE); CSS declaration but I never find myself using that. I prefer setting a background to the list item and set the background to not repeat. You have a better control over how your image is aligned to the text. You can’t do that with list-style-image. My style for the ul tag might look something like this:

ul { list-style-type: none}
ul li { list-style-type: none;background: url(/images/bullet.gif) no-repeat top left; }