HTML and CSS Reference
In-Depth Information
FIGURE 6.12
A simple icon implementation (icons are taken from
www.freeiconsweb.com/
Free-Downloads.asp?id=1729
and are published under creative commons unported).
A bit more styling is needed to finish this off:
li {
...
: ,
p
rgba(0,0,0,0.4) 70%);
}
ul a {
: ;
background-position: 35% 45%;
: ;
: ;
: ;
}
In the first rule you're setting a gradient on the actual list item to make the
styling on the links more flexible. Then in the second rule you're setting the image
to not repeat, because you only want to show it once, and setting a more appropri-
ate position for the icons, because you don't want them to display in the default
top-left corner position. You're also setting a bit of left padding to make space for
the icon so it doesn't clash with the text and setting a solid background color as a
fallback for browsers that don't support the CSS3 styling features also at work here.
Some CSS3PIE magic is also included here to provide support for IE6-8 for extra
styling peace of mind. Also, note that I've attached Selectivizr to the page to make
IE6-8 support the CSS3 selectors I've used in this example, such as
nth-of-type
.
Figure 6.12
shows the result.
