Всем привет. Сегодня я вам покажу, как поменять цвет выделения текста на странице
Это делается достаточно просто, и при этом может быть очень красиво и необычно. Зависит от того, как подобрать стили. Вот такое разноцветное выделение может разнообразить ваш сайт и стать хорошим дополнением к дизайну.
Вопрос. Как сделать?
У нас есть вот такой интересный сайт. Его я делал для примера, когда писал первые статьи для блога. Какая ностальгия 😀. На нём мы будем проводить опыты.
Пишем вот это. Обращаемся к какому-либо элементу, можно ко всем сразу, и обращаемся к "::selection". Задаём цвет заднего фона и цвет текста.
Получается так. Довольно неплохо, под сайт подходит.
Или, например, вот так я сделал на сайте, который верстал в предыдущих статьях
По-моему это очень хорошо вписывается в дизайн. Казалось бы, вещь вроде бы обычная, но для меня это что-то космическое, я в восторге. 😀
Можно ли сделать интереснее?
Если внимательнее посмотреть, как это делается, можно увидеть это. Тексту, который мы выделяем, назначаются определённые свойства.
Можно ли сделать выделение по круче? Например, увеличивать буквы при выделении, или сделать выделение в виде градиента? Попробуем задать на задний фон выделения вообще картинку.
Нет, похоже он так не может. На свойства для "::selection" есть ограничения.
В интернете, на страничке, посвящённой "::selection", написано, какие свойства можно ему задавать.
Мы можем задавать тексту цвет, однородный задний фон, тени, а также свойство text-decoration (подчёркивание, зачёркивания).
Можно сделать текст с подчёркиванием
Можно зачёркивать выделенный текст, как будто это ошибка
Интересно.
Только вот зачем так выделять, не понятно. Но в теории, если постараться, этому применение найти можно.
Тени.
Это странно. Но всё таки, в этом что-то есть... Выглядит необычно... Прикольно.
Такое чувство, как будто текст превращается в какие-то облака. Неплохая задумка.
Красивее это выглядит, если вернуть фиолетовый цвет.
А можно отменить изменение цвета текста при выделении, а цвет фона сделать полупрозрачным.
Тоже неплохо
Конечно же, в фантазии своей мы ограничены. Я надеялся, что смогу использовать градиенты и разные эффекты. Но всё равно можно сделать выделение текста каким-нибудь интересным. В минимализме тоже есть красота 😁
Ну а я надеюсь, что вам понравилось. Если есть какие-то идеи, пишите в комментарии 😎. Ну а вы подписывайтесь на канал и ставьте лайки!!