BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Как изменить цвет выделения текста на сайте

Как изменить цвет выделения текста на сайте

2016-02-03 / Вр:01:14 / просмотров: 1355

Всем привет!
Нажимая и удерживая левую кнопку мышки, посетитель может выделить текст на сайте. А знаете ли вы, что стандартный цвет выделения можно заменить на любой подходящий к вашему дизайну.
Может, кто-то скажет, что это лишнее. А я думаю, можно побаловать заказчика таким красивым эффектом.

Как изменить цвет выделения текста на сайте
Для сравнения я вначале продемонстрирую стандартное выделения текста на сайте, чтобы сравнить с уже измененным.

- стандартный цвет выделенного текста на сайте:

Как изменить цвет выделения текста на сайте

- измененный цвет выделенного текста на сайте:

- измененный цвет выделенного текста на сайте:

Для этого эффекта достаточно добавить вот такой небольшой код в файл с вашими CSS стилями:

::-moz-selection {
background-color: #сс0000;
color: #fff;
}
::selection {
background-color: #cc0000;
color: #fff;
}

Строки №2 и №6 – отвечают за цвет выделения.
Строки №3 и №7 – отвечают за цвет текста при выделении.
Если возникли затруднения с кодом цвета, вы можете подсмотреть мою шпаргалку и подыскать нужный вам цвет.

Хочу также сказать, что этот код подойдет абсолютно ко всем сайтам, движкам (WordPress, Joomla и др.)

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

8 Ответов на комментарий - Как изменить цвет выделения текста на сайте

  1. Егор

    Я даже не знал что можно изменять цвет выделения текста.
    Интересный блог! Много чего нового узнал.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Егор, за похвалу! Оставайтесь моим читателем, я надеюсь Вас не разочаровать в интересных, полезных статьях!!!

    Ответить

  2. Сергей Высокин

    А всё-таки вот эта кнопочка “Поделиться” от UPTOLIKE, появляющаяся при каждом любом выделении нужного тебе текста (ну, удобно так выделять какие-то фразы при чтении для, скажем, более глубокого осмысления) – ужасно раздражает и даже, наверное, отчасти бесит. В самом деле, неужели не хватает единичных соцкнопок в конце или начале статьи? зачем всякий раз при каждом выделении передергивать внимание читетеля на эту вещь… Я начинаю склоняться к мнению “против этого”. Какой бы ни была цена за отказ от этого.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Сергей, за Ваше мнение о “UPTOLIKE”. Я ценю Вашим мнением, но еще оставлю эту возможность. Если часто читатели будут жаловаться на эту возможность, тогда прислушаюсь к общему мнению и возможно я все исправлю. Еще раз спасибо за комментарий!

    Ответить

  3. Сергей Высокин

    За статью спасибо! Ваще ништяк, супер, Степан, красавчик!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Сергей! В дальнейшем постараюсь не разочаровать статьями! Есть очень много интересных фишек для сайта, буду потихоньку ими делиться.

    Ответить

  4. Людмила Лао

    О, это я всегда делаю)
    Очень нравится, чтоб и выделение текста гармонировало с общим стилем. Обычно по умолчанию голубой ставят.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Людмила, спасибо за комментарий

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010