ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Меняем цвет выделения текста для uCoz

Меняем цвет выделения текста для uCoz

Меняем цвет выделения текста для uCoz
Давайте разберемся, как можно на стилях изменить оттенок цвета, который вы выделяете. Здесь как общий можно сделать, так и отдельно выставить гамму. Иногда хочется сделать как то оригинально, чтоб подходила под стилистику сайта и смотрелось стильно, и все это выполнимо. Что и разберем, так как все это можно воплотить и сделать не сложно будет.

Установка:

CSS

Код
::selection {background: #00b4f0;color:#fff;}  
  ::-moz-selection {background: #00b4f0;color:#fff;}  
  ::-webkit-selection {background: #00b4f0; color:#fff;}


В стилях нужно поменять цвет на свой.

Для того что бы изменить цвет выделения текста сделать для отдельного текста нужно к тегам P прописать class:

Код
<p class="green">Пример зелёного цвета при выделении текста</p>  
<p class="red">Пример красного цвета при выделении текста</p>  
<p class="blue">Пример голубого цвета при выделении текста</p>


После чего прописываем для них стили:

Код
p.red::selection {background: #FFB7B7;}  
  p.red::-moz-selection {background: #FFB7B7;}  
  p.red::-webkit-selection {background: #FFB7B7;}  
   
  p.blue::selection {background: #67cfff;}  
  p.blue::-moz-selection {background: #67cfff;}  
  p.blue::-webkit-selection {background: #67cfff;}  
   
  p.green::selection {background: #78e780;}  
  p.green::-moz-selection {background: #78e780;}  
  p.green::-webkit-selection {background: #78e780;}
15 Мая 2016 Просмотров: 1743 Комментариев: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 5
feliksteg
feliksteg 16 Мая 2016 00:241
0
Что то не когда не задумывался, на счет как будет смотреться. Просто на каждом браузере по разному цвета идут. Но вот отдельно которые, меня больше заинтересовало, так как можно применение найти.
JoniDen
JoniDen 16 Мая 2016 00:362
0
Цитата feliksteg
Что то не когда не задумывался, на счет как будет смотреться.

А ты задумайся, знаешь как красиво это выглядит.
Kosten
Kosten 16 Мая 2016 00:513
0
Мне вот кажется, что на светлый сайт не так сильное впечатление будет, а на дизайнерском, совершенно другой обзор.
JoniDen
JoniDen 16 Мая 2016 01:184
0
Твоя правда smile
Сафрон
Сафрон 16 Мая 2016 02:395
0
Но здесь выделение текста, что на Mozilla Firefox, постоянно серым показывает, а вот на Google Chrome светло синим. Но также поддерживаю, отдельно можно сделать, но нужно такую статью писать и изображение ставить, чтоб подходило, и вывод, ставить так сразу на весь сайт.
avatar