Как сделать текст разного цвета
Перейти к содержимому

Как сделать текст разного цвета

  • автор:

Разноцветный текст

Один цвет для текста — это прошлый век. Красим в разные!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Задача
  2. Готовое решение
  3. Разбор решения
  4. А если не градиент?

Обновлено 16 апреля 2024

Задача

Скопировать ссылку «Задача» Скопировано

Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?

Готовое решение

Скопировать ссылку «Готовое решение» Скопировано

 h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% ); background-clip: text; -webkit-background-clip: text; color: transparent;> h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% ); background-clip: text; -webkit-background-clip: text; color: transparent; >      

Разбор решения

Скопировать ссылку «Разбор решения» Скопировано

Напишем текст и начнём думать, как решить задачу.

 

Отпуск — это хорошо!

h1>Отпуск — это хорошо!h1>

Чтобы сделать разноцветный фон, понадобится свойство background — image . Свойство background — color не подходит, потому что оно не поддерживает градиенты.

 body  color: white;>h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% );> body  color: white; > h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% ); >      

Теперь текст визуально находится поверх разноцветного фона:

Затем превратим текст в трафарет. Для этого понадобиться свойство background — clip со значением text .

Свойство не поддерживается Internet Explorer и другими старыми браузерами, а Google Chrome (и браузеры на основе Chromium) могут требовать вендорный префикс. Учтём это:

 h1  . background-clip: text; -webkit-background-clip: text;> h1  . background-clip: text; -webkit-background-clip: text; >      

Текст снова стал белым, потому что в body указано это значение. Сделаем его прозрачным и удалим лишние значения. Получаем вот такой результат:

 h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% ); background-clip: text; -webkit-background-clip: text; color: transparent;> h1  background-image: linear-gradient(250deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100% ); background-clip: text; -webkit-background-clip: text; color: transparent; >      

А если не градиент?

Скопировать ссылку «А если не градиент?» Скопировано

Таким же образом можно поставить фоном для текста любое изображение:

Главное — не забывать, что текст должен контрастировать с фоном, чтобы его было удобно читать.

Изменение цвета шрифта

Палитра цветов шрифта

  1. Выделите текст, цвет которого требуется изменить.
  2. На вкладке Главная в группе Шрифт щелкните стрелку рядом с элементом Цвет шрифта, а затем выберите цвет.

Мини-панель инструментов с выделенным текстом

Для быстрого форматирования текста можно использовать мини-панель инструментов с параметрами форматирования. Мини-панель инструментов отображается автоматически при выделении текста.

  • Если в списке нет подходящего цвета, щелкните Другие цвета, а затем выберите цвет на вкладке Обычные или создайте собственный цвет на вкладке Спектр.
  • Для изменения цвета, прозрачности и оттенка текста выберите инструмент Градиент.

Как выделить другим цветом фрагмент текста?

Изменить цвет произвольного фрагмента текста на желаемый.

Решение

Создайте новый класс (например, colortext ) и установите для него стилевое свойство color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега , класс которого совпадает с именем класса, созданным выше.

Пример 1. Выделение фрагмента текста цветом

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Изменение цвета текста   

Lorem ipsum dolor sit amet, , sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан ниже.

Текст, у которого фрагмент выделен с помощью цвета

Рис. 1. Текст, у которого фрагмент выделен с помощью цвета

Класс colortext , созданный в данном примере, можно использовать неоднократно, выделяя цветом текст в нужных местах документа. Если требуется использовать несколько цветов, тогда следует создать несколько классов и добавлять их по необходимости.

В одной строке сделать текст слов разного цвета

Можно ли в html в одной строке сделать текст слов разного цвета? Например. 1 слово одним цветом, а второе — другим.

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 8 мая 2014 в 16:46
95 2 2 золотых знака 5 5 серебряных знаков 10 10 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Первое слово второе слово

p < color: #f00; >p span

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 8 мая 2014 в 16:49
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.5.3.8609

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *