Design And Implement Your Own List Style Image

List Style Image Thumb

As I sit down to write a post, my goal is to make sure that you’re able to fully understand what it is I’m saying and sometimes to get my message across I use a bullet list to break down the highlights. Many people use it in their articles and it’s easy to implement on a site by using the bullet list icon in your HTML editor, the Visual Editor in WordPress, or other content management software (CMS).

Unordered List Symbols Are Boring

The problem with list symbols is that they are a bit…well…boring. Depending on the operating system you have, you’ll either see a filled in circle or a filled in square and even though there’s nothing wrong with them, it would help if we could be more creative with their look especially if you have a creative theme or design for your site and want to make your lists just as interesting.

HTML had an attribute called “type” that provided three options for the unorder list:

  • circle

  • disc

  • square

BTW, I used the list-style-image property to show a real representation of these options. This isn’t a hugely diverse list but at least you had a few options. However with the invention of CSS, this attribute has been deprecated and is no longer used. Granted you could use it but if you want to be web-standards compliant, it’s best to stay away from it.

Creating The List Style Image

Let’s say you’re into nature and want to point out a list of your favorite forest parks. It would be nice to have a symbol that represents nature displayed in front of those parks to keep with the theme. With the list-style-image property, you’re able to add your own image to take the place of that filled in circle.

Before we get into how to add your own symbol to an unordered list item, let’s go through the steps I took to make the image for this example. First, I quickly scribbled some shapes that might be good for a symbol. NOTE: I’m not the best sketcher but I’m able to get the basic construct of what I want in the final results:

Scanned Sketch of List Symbols

After making my doodles, I headed over to Adobe Illustrator (Win/Mac) to draw the image. Normally if I spent a good amount of time on a drawing, I would scan it and trace over it in this program to mimic the design but since this is really simple and doesn’t have a lot of detail, I just free handed it.

Leaf Check Pen Tool

The basic construct of the design is on the left and the right shows how I created it. The Pen Tool, the image circled in red, produces vector points that can make a shape straight around the edges or curved. When you click and drag the pen tool, it will create handles on the left and right of the vector point that can be manipulated with the white arrow, Direct Selection Tool, to adjust either the point or its handles.

 

Leaf Check Gradient Mesh Tool

Even though the image will be really small when we’re done, I didn’t want to have a plain looking design. So I decided to use the Gradient Mesh Tool, red circled image, to add some depth to the shape. This tool gives you the ability to add multiple vector points within a shape that can be manipulated, again, with the Direct Selection Tool and can add a different color to each point and section that can be highlighted. It takes some time to get use to the curves that this tool makes in order to get the look you want.

Leaf Check Inner Glow

Before I used the Gradient Mesh Tool, I made a copy of the original shape with the solid color and added an Inner Glow Effect to make the final shape “feathery” around the edges by going to the Effect > Stylize > Inner Glow menu.

Leaf Check Complete

Here is the final look. The green border is the crop area of the design, where the area encapsulated will be seen and nothing else. It is possible to export the image as a JPG or PNG but I’m use to transferring vector designs into Adobe Photoshop (Win/Mac) to make some final touches before saving them for the web.

Leaf Check Same Width Height

In the above photo I made sure the width and height were the same by using the Crop Tool and Info Palette.

Leaf Check 20 by 20px

With the same pixel width and height, I reduced the resolution to 72 and changed the dimensions to 20 pixels.

We will end up with a white background if we save this image as a JPG and if you have a white background for your site, it shouldn’t be a problem. However, you might change your mind and change your background to purple or blue and the white background of your bullet image will be distracting.

Leaf Check Save for Web Services

The solution to this is to do a File > Save For Web & Devices and select PNG where you see the red outlined oval. You can see in the Optimized window above that the background is transparent (shows oscillating white and gray boxes behind the symbol). This will let you know you’re saving the image properly.

When you save this image, place it in an “images” folder located within the same folder as your HTML and CSS files.

HTML and CSS Workbook - http://htmlandcssworkbook.com

Using CSS’s List-Style-Image Property

Now that we have our symbol, we can begin coding our page to add it to our unordered list. The first step is to create the HTML page.

Plain UL Tag Code

Inside of the body element is an unordered list with nature items listed in the Code View of Adobe Dreamweaver (Win/Mac). In the Design View above and in the web view below, you’ll see that the list has filled in circles as the bullets.

Plain UL Tag Web

To get our image to show in this list, we’ll have to create an external stylesheet that calls on the list-style-image property.

List Style Image Stylesheet

Let’s decipher the code above one line at a time:

Line 3:  I created an ID selector (#leafCheckMark) that will be placed within the opening unorder list tag. This is done to reference this one particular list within the document. Granted we only have one but it’s helpful to get into the habit of distinguishing one element from another. The li after the ID selector represents the list tag and it will be affected by the following lines of code.

Line 4: The list-style-image property brings in an image (leaf-check.png). This is where we add our image. NOTE: I mentioned above that you should save your images into an “images” folder but because this is a short example, I saved it in the same folder as the HTML and CSS files.

Line 5: I felt that the space between the list elements were too close so I increased it using the margin-top property. This will add 5 pixels of space from the top of each list item.

List Style Image HTML Code

Right before the title element (<title>…</title>) at the top of the code in the image above, is a link tag (<link />) and it connects the style.css file to our HTML document. When an ID value is added in a stylesheet, it’s considered a selector and known as an attribute when it’s inside an HTML document. The ID attribute doesn’t require the pound sign, but the ID selector requires a hashtag/pound sign in a stylesheet.

List Style Image HTML Web

If you followed the steps above, you should have the same or similar results. You can use this same technique for any image you choose for your unordered lists.

I hope this tutorial was helpful. Before you go, leave a comment below and tweet your friends what you learned today.

This entry was posted in CSS Tutorial, Graphic Design. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

did you enjoy this article image

If you did, submit your first name and email address below to get the latest posts on coding, designing, and other web related information. PLUS, get my FREE EBOOK entitled
“10 Steps Towards Creating a Website”...INSTANTLY!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>