Выделение ссылок а ля круглый маркер

selectedlink.gif

Продолжаем выцарапывать любопытные фишки из спецификации CSS3. Многие уже наслышаны, что есть такая интересная возможность создавать для блоков закругленные углы, не используя каких-либо картинок. Для чего применяется специальное свойство border-radius с префиксами (-moz для браузера Firefox и -webkit для браузеров Safari и Chrome). В IE оно не работает, как впрочем и в Opera (в 10-й уже должно работать).

Но ведь данное свойство можно применять не только для блоков! Почему бы не выделить таким образом обычные ссылки в тексте? Задаем ссылкам фон и добавляем данное свойство. Получаем эффект выделения словно бы круглым маркером в тексте газеты. По крайней мере, выглядит достаточно интересно и непривычно.

К примеру, пропишем такой набор правил для ссылок поста в блоге:

.entry a {
background: #c8fc2a;
padding: 1px 5px 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Получим выделенные кислотным желто-зеленым маркером ссылки (см. картинку выше).

Более подробно о свойстве border-radius можно почитать здесь .

Похожие записи:

Оставить комментарий: