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

21.09.2009 | Рубрики: Верстка | Комментарии (5)
Тэги: , ,

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 можно почитать здесь .

Свои цвета выделенного текста

17.09.2009 | Рубрики: Полезняшки | Комментарии (4)
Тэги: ,

selectioncolor.gifВ спецификации CSS за номером 3 есть интересная фишка — можно сменить цвета выделенного текста на своем сайте с тех, что используются по-умолчанию браузерами, на свои собственные. Полезная эта фишка или нет — каждый решит самостоятельно. В IE она не работает (про 8-й не знаю, не проверял). Однако несомненно, данный эффект может (не)приятно удивить тех, кто копирует ваши нетленки. Особенно, если сделать цвета выделения одинаковыми с фоном. Вроде что-то выделил, а ни черта не видно.

Для реализации эффекта достаточно добавить в лист стилей CSS парочку правил:

::selection {
background: #add2e1;
color: #000;
}
::-moz-selection {
background: #add2e1;
color: #000;
}

Первый набор работает на браузеры Opera, Chrome и Safari, а второй — для FireFox-а. В самих наборах все достаточно прозрачно: background задает цвет фона для выделения, color — цвет самого шрифта соответственно. Обратите внимение: перед каждым из правил стоят двойные двоеточия. Никаких пробелов ни до, ни после них быть не должно. Если вам, к примеру, нужно задать такой эффект для какой-либо конкретной части текста на сайте, то пишите это следующим образом:

p.text::selection {
background: #add2e1;
color: #000;
}

Соответственно, для абзаца с классом text будет применен данный эффект, а для всего остального текста — цвета браузера по-умолчанию.

Стр. 33 из 67«...«30313233343536»...»