Web Design
Using Special Keyboard Characters as List Bullets and Link Separators
Are you bored with the old, ugly list bullets that HTML provides? Of
course, we all know that it is possible to use images as list bullets
and link separators. However, this is not what this week's article is
about. We are suggesting using special keyboard characters in a combination
instead. Hmmm .. isn't that interesting, you say?
Traditional HTML list bullets are either a solid dot representing an
unordered list <ol>, a number representing an ordered list <ol>
or a definition list <dl>. And we know that there are more options
for list bullets when using CSS. Oh, you didn't know that? Well, be sure
to hop on over to this week's CSS Tip and find out how to do it.
The most common link separators are | or - or [ Link ] or > or images.
Well, what if we told you that there are other alternatives using special
keyboard characters that in most cases will not interfere with the majority
of browsers? Below we have listed a few brainstorms we came up with. If
you can think of others, give
us a shout, and we will add them to this article. We will also credit
you for the intuitive idea. This article is syndicated and your site will
get some nice exposure and fresh new hits.
Alternative list bullets and link separators:
|
[]
|
(-)
|
>>>
|
\^/
|
[-]
|
-]-[-
|
|
--}
|
|=|
|
=)(=
|
)|(
|
)(
|
{|}
|
|
~|~
|
/*\
|
=>
|
}|{
|
-{|}-
|
:|:
|
|
{:
|
:[:]:
|
-{!}-
|
]:[
|
\!/
|
\:::/
|
|
:}
|
<*.*>
|
>:|:<
|
:{:}:
|
_|_
|
---{@
|
|
)-(
|
(|=|)
|
)|-|(
|
o)|-
|
=:o:=
|
-o-o-
|
|
o)::(o
|
: : :
|
-|o|-
|
-o)|(o-
|
:|:|:
|
o)(o
|
|
:-|-:
|
:o:
|
o:=:o
|
"|"
|
\1/
|
/2\
|
Pretty cool, right? Okay, so how do these r-e-a-l-l-y look as list bullets
and link separators?
Well here are a few examples. You be the judge! :)
|
My to-do list:
:o: Dust the cat.
:o: Walk the car.
:o: Iron the computer.
:o: Brush the furniture.
:o: Wax the dog.
:o: Defrag the children's clothes.
OH wait! That doesn't sound right. Oh dear. Let's try this again
...
\1/ Defrag the cat.
\2/ Dust the car.
\3/ Wax the computer.
\4/ Walk the furniture.
\5/ Iron the dog.
\6/ Brush the children's clothes.
Hmmm ... I guess I have been coding and writing so much today that
my brain has pixelized ... one more time:
:} Brush the cat.
:} Wax the car.
:} Defrag the computer.
:} Dust the furniture.
:} Walk the dog.
:} Iron the children's clothes.
Phew! That's much better, and I think the children, dog and cat
will like these tasks much better too. ;)
|
Let's look at a few link separators examples now, and I'll try to behave
myself this time.
|
