Все для веб-дизайнера
Изменяем цвет при выделении текста на сайте
Несомненно каждый из вас хоть раз выделял текст на сайте, если вы заметили цвет выделения зачастую одинаковый, это используются стандартные параметры системных файлов. Зачастую пользователи не особо вдаются в такие нюансы и не замечают этого, но если вам, разработчику какого нибудь интересного проекта, необходимо изменить данный параметр для того, чтобы придать сайту маленькую изюминку или просто подчеркнуть дизайн сайта данным эффектом тогда данная статья будет интересна, ведь в ней мы рассмотрим как изменить стандартный цвет выделения текста на сайте.
Для получения такого эффекта не требуется особых усилий и знания верстки, все достаточно просто, вы можете сами в этом убедиться. И так, приступим.
Шаг 1. HTML
Для начала мы рассмотрим простую разметку, которая состоит из заданных нами классов. ( Нужна разметка только выделения отдельного текста на сайте.
|
1 2 3 |
<p class="green">Пример для выделения текста.</p> <p class="red">Пример для выделения текста.</p> <p class="blue">Пример для выделения текста.</p> |
С разметкой закончили, теперь переходим к следующему шагу.
Шаг 2. CSS
Мы рассмотрим два примера, первый из которых выделяет весь текст на сайте, а второй только отдельный текст.
Выделения всего текста на сайте:
Чтобы цвет изменился необходимо только эти две строчки. По умолчанию будем использовать зеленый цвет
|
1 2 |
selection {background: #c1e124;} -moz-selection {background: #c1e124;} |
Если вы хотите чтобы только буквы меняли цвет, вам необходимо задать свойство color с необходимом цветом.
|
1 2 |
selection {background: #c1e124; color:#fff;} -moz-selection {background: #c1e124; color:#fff;} |
После этого буквы также будут изменять свой цвет.
Выделения отдельного текста на сайте
Если вы захотели что текст на сайте выделялся не одним цветом, а различными, то вам необходимо к тегу <p> присвоить соответствующий класс, например для красного выделения класс будет green.
|
1 2 3 4 5 6 7 8 |
p.red::selection {background: #ff0000;} p.red::-moz-selection {background: #ff0000;} p.blue::selection {background: #03d5fb; margin-bottom:30px;} p.blue::-moz-selection {background: #03d5fb;} p.green::selection {background: #c1e124;} p.green::-moz-selection {background: #c1e124;} |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 23.10.2012 в 18:31, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...