» »

Меняем цвет выделения текста для 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.05.2016 Просмотров: 391 Комментарий: (5)

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

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

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

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