Разноцветный текст
Один цвет для текста — это прошлый век. Красим в разные!
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Задача
- Готовое решение
- Разбор решения
- А если не градиент?
Задача
Скопировать ссылку «Задача» Скопировано
Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство 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; >
А если не градиент?
Скопировать ссылку «А если не градиент?» Скопировано
Таким же образом можно поставить фоном для текста любое изображение:
Главное — не забывать, что текст должен контрастировать с фоном, чтобы его было удобно читать.
Как сделать разноцветный текст
BBcode & HTML
T e x t C o l o r i z e r
Step 1: Enter your text:
Step 2: Choose the color effect:
Step 3: Choose the colors:
Start color:
End color:
Start & End color:
Middle color:
Start color:
Middle color:
End color:
Word-by-word:
Step 4: Additional text settings:
Step 5: Preview and get code:
BBcode for this text: (To use on forums)
HTML code for this text: (To use on your website)
Step 6: Done! Have a nice day ☺
Похоже, вы используете блокировщик рекламы!
TextStudio — это пространство для художественного творчества, которое финансируется в основном за счет рекламы.
Чтобы это сообщение исчезло, отключите блокировщик рекламы TextStudio.
Вы также можете приобрести подписку PREMIUM, которая убирает всю рекламу с сайта.
Чтобы разблокировать TextStudio в вашем блокировщике рекламы:
1. Нажмите на значок блокировки рекламы в правом верхнем углу браузера:
2. Затем нажмите кнопку деактивации.
Похоже, вы используете блокировщик рекламы!
TextStudio — это пространство для художественного творчества, которое финансируется в основном за счет рекламы.
Чтобы это сообщение исчезло, отключите блокировщик рекламы TextStudio.
Вы также можете приобрести подписку PREMIUM, которая убирает всю рекламу с сайта.
Чтобы разблокировать TextStudio в вашем блокировщике рекламы:
1. Нажмите на значок блокировки рекламы в правом верхнем углу браузера:
2. Затем нажмите кнопку деактивации.
цвет Генератор шрифтов & Текстовые эффекты
Разноцветный текстовый эффект для Нового года
Золотой цвет золотой 3D текст
Многоцветный светлый шрифт
Логотип Nintendo
Многоцветная радужная надпись
Текстовый эффект с пастельными надписями
Цветной канальный текстовый эффект Счастливой Пасхи
Текстовый эффект с многоцветной надписью Спасибо
Эффект жирного и резкого текста Pop 3d
Текстовые эффекты в стиле ретро 80-х годов
Редактируемый эффект градиентного пастельного текста
Цвет текста с градиентом
Красный Синий Супермен 3D текст
Желтый и красный текст супергероя
Текстовый эффект радуги
Цветной шрифт
Цветной шрифт для надписей
Текст человека-паука
Многоцветный текст с 3D-эффектом ЛГБТ
3D мультфильм синий, розовый и фиолетовый текст
3D гей-прайд текст
Многоцветный 3D текст
Танцевальный шрифт
Красивый детский шрифт
3D белый синий розовый текст
Зеленый Винтаж ретро 3d текст
Детский 3d текстовый эффект
Текст с многоцветным градиентом
Металлический текст
Гей-прайд 3D текст
Трехмерный текст с красным и желтым градиентом
Трехмерный текст Facebook
3D-текст с многоцветным градиентом
Градиентный 3d-шрифт
Цветной шрифт Groovy
Посмотреть больше текстов
Загрузка текстов.
Языки
О нас
- Свяжитесь с нами
- Коммерческая лицензия
- Часто задаваемые вопросы
- Условия использования
- Политика конфиденциальности
- Политика DMCA
- Партнерская программа
TextStudio — это онлайн-приложение для создания пользовательских текстовых эффектов и логотипов.
Наш генератор эффектов 3D-текста также может быть использован для анимации шрифтов.
Расширяйте свой бизнес с помощью нашего генератора уникальных шрифтов!
© 2020 — 2024 TextStudio. All rights reserved.
- Генератор трехмерного текста
- Graffiti Generator
- Fire Text Effect
- Gold Text Effect
- Glitch Text Generator
- Cool Text Generator
- Текстовые эффекты PSD
- Word Art Generator
- Font Generator
- Ключевые слова
- Открыть ключевые слова
- Галерея текстовых эффектов
- модный текстовый генератор
- Стиль шрифта
- Генератор шрифтов для татуировок
СПЕЦИАЛЬНОЕ ПРЕДЛОЖЕНИЕ
Воспользуйтесь исключительной скидкой более 50% на предложение PREMIUM!