Custom Bullets Using CSS Tutorial

Custom bullets using css are a unique and subtle way to improve your website design. Not only are they a perfect way to add some colour to break up heavily worded pages, they’re also a great way to show your clients you care about even the smallest of details.

Today I thought I would give a quick and easy to follow demonstration on how to create and implement this design element.

The first and most important thing I do is find a bullet I want to use to match the theme of my site. This can be anything from a coloured square on a more corporate site to a little green leaf on a nature website.

It has never been easier to position that custom image!

Once you’ve decided on your bullet icon, you want to implement it using css so you’ll have the ability to move it around with ease. Below is the custom css classes I’ve created to give full control over my bullet positions.

[box style=”rounded” border=”full”]ul{
margin-top: 0px;
padding: 0px;
list-style-position: outside;
margin-left: 20px;
}

li{
list-style-position: outside;
font-weight: normal;
padding-bottom:5px;
padding-left:25px;
list-style-type: none;
}

.bullet {
background-image: url(images/custom-bullet.png);
background-repeat: no-repeat;
background-position: 0px 3px;
list-style-position: outside;
}[/box]

As you can see I’ve customized the ul and li class in order to give me more control over the positioning of my bullet text. The ul’s margin-left is used to push the full text including the bullet away from the left justification. The li’s padding-left is controlling the position of the text in relation to the bullet itself. The li’s padding-bottom controls the spacing between each line.

Bullets For Web Design
Download bullet set here!

While these classes are both important and necessary in their own way when creating a custom bullet, the custom .bullet class is THE dark horse and trump card. With this class you add your custom-bullet.png as a background image. This gives you full control over its positioning using the background-positioning attribute. No more tables!

All that’s needed now is to select your bullets and add the class .bullet to them.

When developing a website, I tend to make it a key part of every design. I highly recommend including this into any designer’s practice.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Top