Про буллеты
Многие дизайнеры делают вот такие буллеты, например, в меню:
Долгое время я делал их картинкой, пока не подумал: «Эй, графика кажется довольно примитивной. Может я смогу сделать тоже самое без картинки?» Решение пришло практически мгновенно, во многом благодаря замечательному уроку от Криса Койера, направившему мои мозги в нужное русло.
Так как в ХТМЛе всё прямоугольное, нам понадобится два элемента:
Раз их только две штуки, самым очевидным будет не плодить сущности, а воспользоваться многострадальными псевдо-элементами :before и :after. Четырёхпиксельные квадраты будут рисоваться бордером — так можно наследовать цвет родительского элемента.
ХТМЛ используется стандартный:
<body>
<ul class="menu">
<li><a href="#">Привет!</a>
<li><a href="#">Я меню</a>
</ul>
</body>
Всё интересное в стилях:
<style type="text/css">
.menu {
list-style: none /* убираем стандартные буллеты */
}
.menu a:before, .menu a:after {
content: "";
position: absolute;
width: 2px;
height: 2px;
left: -1em; /* горизонтальный отступ относительно родительского элемента */
top: 50%; /* центрируем по вертикали */
}
/* верхний и нижний квадраты */
.menu a:before {
border-top: 2px solid; /* цвет не указываем, чтобы наследовался от родителя */
border-bottom: 2px solid;
margin-top: -3px; /* подтягиваем наверх на половину высоты (бордер учитывается) */
}
/* правый квадрат */
.menu a:after {
border-right: 2px solid;
margin-top: -1px; /* высота меньше, поэтому и подтягиваем только на пиксель. */
}
/* чтобы псевдо-элементы позиционировались относительно
родительского элемента, добаляем ему position:relative */
.menu a {
position: relative
}
</style>
В результате получается список, приведённый в начале заметки. Если включить воображение, можно поиграться с цветами, отступами, анимацией при наведении и тому подобным.
Как по мне, это просто «задродство»! Просто ломать мозг...