Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Дизайн - Изменяем цвет выделения текста с помощью небольшого CSS кода

Изменяем цвет выделения текста с помощью небольшого CSS кода

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

Всем привет.
Сегодня речь пойдёт о выделении текста на сайте, да-да даже таким вещам тоже стоит уделять внимание.
Конечно, в стандартном выделении текста нет ничего плохого, но все, же стандартное оно и в Африке стандартное…

Если вы выделите текст на моём блоге то увидите, что цвет выделенного текста будет несколько иного цвета, нежели на других сайтах. Разумеется, не только я один использую данную возможность, но всё-таки эту функцию использует очень мало людей.

Некоторые считают, что это ненужно, другие не знают как это реализовать, а третьи вообще не догадываются что это возможно.
Если вы относитесь к тем, кому это ненужно-то статью можете не читать, а если же всё-таки вас заинтересовала данная возможность, то сейчас я вам о ней расскажу.

Первым делом посмотрим на CSS код, который используется:

::selection {
background: #FFCC66;
}
::-moz-selection {
background: #FFCC66;
}

Если вы заметили то цвет в обоих пунктах повторяется, это из-за того что разным браузерам нужен разный CSS, ведь разные браузеры и работают по-разному.
Кстати скоро я напишу статью о главных различиях браузеров, которые могут помешать вам в вёрстке своих сайтов, подпишитесь на RSS, чтобы не пропустить это.

Итак, CSS код у нас есть теперь мы будем разбираться в том, как и куда его вставить.
Перейдите в CSS файл вашей темы или шаблона и в самом верху вставьте код, который вы видели выше, затем сохраните.
Теперь всё будет функционировать, вы сможете изменять цвет на любой, который вы захотите, но главное не забывайте, что в обоих пунктах цвет должен быть одним и тем же.

один и тот же

Кстати советую при выборе цвета ориентироваться на таблицу html цветов, которую составил Артемий Лебедев, которая находится здесь. В ней представлены наиболее безопасные html цвета, которые не режут глаз, и не будут затруднять жизнь пользователям.
И имейте ввиду: цвет выделения текста не должен совпадать с цветом текста, который будет выделяться, согласитесь это глупо, если чёрный текст выделяется чёрной рамкой и пользователь просто не может увидеть какой участок он выделил.

не видно

Если у вас возникнут какие-либо проблемы с использованием данного CSS кода, то задавайте свои вопросы в комментариях, я с удовольствием на них отвечу.

Теперь ещё немножко о выделении текста, я думаю, во время чтения у вас возникла мысль, что вы работаете на благо копипастерам, мол, ведь только они будут копировать текст.
Это не так, любой человек, который какое-то время читает ваш блог, может время от времени цитировать ваши высказывания в своих статьях, и т.д.

Кстати я часто натыкаюсь на различные скрипты, плагины и php функции, которые не позволяют копировать текст, и хотелось бы высказать своё мнение по данному поводу:
Ребят не страдайте фигнёй!
Даже самую сильную защиту можно обойти за пару минут, поэтому данные функции лишь повеселят «воров» и усложнят жизнь простым пользователям.

Ну а мне остаётся лишь попрощаться и пожелать вам удачи.
Искренне ваш Мудрый Кот.

А на закусочку клип на песню «Капитал», вам понравится!

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Навигация на блоге, часть вторая – пагинатор
Навигация на блоге, часть первая – список страниц
Как создать фон для своего блога? Не знаешь? Тогда читай!
Информация о статье:
Опубликовано: 26 ноября 2011, в рубрику Дизайн.
Теги: .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Sergio
    26.11.2011

    Ух ты, интересно =) Не знал об этом, спасибо.

    [Ответить]

  • 26.11.2011

    Sergio, всегда рад :wink:

    [Ответить]

  • seo-самурай
    27.11.2011

    Да, если не удаётся взять с сайта, то всегда можно взять с архива поисковика.

    [Ответить]

  • 27.11.2011

    seo-самурай, Мало того!
    Иногда можно обойти такую защиту посредством простого просмотра html кода 8-O

    [Ответить]

  • seo-самурай
    27.11.2011

    Это я не мог взять картинку с какого-то китайского сайта.
    Администация нашего сайта вручает вам переходящий «Кубок признания» за неоценимые заслуги в области популяризации IT-технологий, просьба забрать по адресу http://dzyo-san.ru/?p=2589

    [Ответить]

  • 27.11.2011

    seo-самурай, Завтра заберу :-D , как раз новую статейку добавлю и в конец записи вставлю заметку 8)

    [Ответить]

  • Инкогнито
    27.11.2011

    ::selection {
    background: #FFCC66;
    }
    ::-moz-selection {
    background: #FFCC66;
    }

    Не валидный код :?:

    [Ответить]

  • NMitra
    05.01.2012

    Я когда читаю, всегда выделяю текст — так проще ориентироваться на странице. А на тех сайтах, которые закрываются скриптом, долго не задерживаюсь — некомфортно.

    На каком-то блоге видела реализацию, когда не требуется вводить каждый раз Имя/URL. Как его мне не хватает )))

    [Ответить]

  • NMitra
    06.01.2012

    Моё почтение. Так быстро среагировал! Отличный пример как надо работать с поведенческим. 8)

    [Ответить]

  • 06.01.2012

    NMitra, всё для вас :wink:

    [Ответить]

  • Mentor
    19.01.2012

    Нашел ошибочку. Артемий Лебедев, а не Дмитрий) Очень помог твой пост, хороший блог)

    [Ответить]

    Мудрый Кот ответил(а):

    Спасибо

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


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

RSS    twitter    e-mail


119 подписчиков

102 фолловера


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux
telderi.ru, и еще много других