Блоггеры любят стикеры. Дизайнеры любят стикеры. Юзеры тоже любят стикеры. А сегодня я с помощью руководства от Pixy научу вас делать симпотичные стикеры без картинок. …целую кучу стикеров.

Как работает

Используется следующий XHTML код (подробнее - в source cod’e примера):

<a class="inline-button" href="the_url"><em>Some</em><span> Link</span></a>

Используются стили


.inline-button {
_width:12em;
font: bold 65%/1 Verdana, sans-serif;
margin: 0 0.2em; padding: 0.1em 0; _padding:0;
border: 1px solid black;
white-space:nowrap;
text-decoration: none;
vertical-align:middle;
background: #ccc;
color: black;
}
.inline-button em {
_width:1em; _cursor:hand;
font-style: normal;
margin:0; padding: 0.1em 0.5em;
background: white;
color: black;
}
.inline-button span {
_width:1em; _cursor:hand;
margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
}
.inline-button:hover {
background: #666;
color: white;
}
.inline-button:hover em {
background: black;
color: white;
}


Класс inline-button задает основной вид и цвет, а дополнительный класс влияет на разноцветность. Вот так:


.orange { background: orange; color: black }
.orange em { background: white; color: #c60 }

* * *

<a class="inline-button orange" href="the_url"><em>RSS</em><span> Export</span></a>


Детали

Линк состоит из двух смежных элементов (это em и span в нашем случае, но могут применяться любые inline элементы). Между ними не должно быть разрыва. У линка имеется бордер в 1px, чей вертикальный padding должен быть таким же как и у внутренних (inner) элементов.

Все эти “_properties” в стилях нужны для IE5 (подробнее). В принципе, работать должно повсеместно: MSIE5/Win, MSIE6/Win, Mozilla, Opera и Safari (только MSIE/Mac провалился, но это практически мертвый браузер). Все браузеры сожмут ширину стикера по длине текста, кроме IE5, где у всех кнопок будет одинаковая длина (солгасно заданной в _width в .inline-button селекторе).

Лента времени

• « Аура: офис в лесу
• » Марио Джакомелли. Человек среди людей.

В тему

• No related posts

Комментарии (6)

Комментировать