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

Как сделать чтобы текст переливался разными цветами

  • автор:

Переливающийся текст в андроид

Насколько я понял вам нужен TextView с градиентом. Ниже простейший пример TextView с применением линейного градиента:

public class GradientTextView extends TextView < public GradientTextView(Context context) < super(context, null, -1); >public GradientTextView(Context context, AttributeSet attrs) < super(context, attrs, -1); >public GradientTextView(Context context, AttributeSet attrs, int defStyle) < super(context, attrs, defStyle); >@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) < super.onLayout(changed, left, top, right, bottom); if (changed) < getPaint().setShader( new LinearGradient(0, 0, 0, getHeight(), Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP)); >> > 

введите сюда описание изображения

Отслеживать
ответ дан 1 дек 2018 в 8:02
1,015 5 5 серебряных знаков 9 9 бронзовых знаков

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

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

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

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

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

Переливающийся текст на CSS

Переливающийся текст на CSS

Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.

HTML:

Переливающийся текст

CSS:

font-size : 40px ;
line-height : 50px ;
font-family : Verdana, sans-serif ;
font-weight : 900 ;
position : relative ;
background : white ;
overflow : hidden ;
text-transform : uppercase ;
text-align : center ;
.pouring:before < position : absolute ; filter : blur ( 10px ) ; width : 100% ; height : 100% ; mix-blend-mode : screen ;

background-image : repeating-linear-gradient ( -45deg, transparent, transparent 1em, #BFE2FF 1em, #337AB7 50% ) , repeating-linear-gradient ( 45deg, #337AB7, #337AB7 1em, #FFF 1em, #BFE2FF 50% ) ;

background-size : 3em 3em, 2em 2em ;
animation-name : ani ;
animation-duration : 10s ;
animation-timing-function : linear ;
animation-iteration-count : infinite ;
animation-direction : alternate ;
@keyframes ani < background-position : 0 0 ; background-position : 100% 0 ; @media (max-width:690px) < Нравится 6 В закладки

  • Опубликовано: 02.09.2019
  • Рубрики: Тексты, ссылки и кнопки — простые решения
  • Метки: CSS
  • 36616 просмотров
Смотрите также:

Замена текста перемешиванием на JS

Замена текста перемешиванием на JS

Оригинальный зффект скремблирования текста на JavaScript

Текст во всю ширину родительского элемента

Текст во всю ширину родительского элемента

Выравнивание текста по всей ширине заданного блока

Вращающиеся кольца из текста

Вращающиеся кольца из текста

Решение, вращающее два кольца состоящих из заданного текста.

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

Ваш комментарий отправлен!

Комментарии:

Константин: 29.08.2023 в 23:01
а можно ли сразу несколько цветов сделать или только две
Alexander: 30.08.2023 в 10:41
Поменяйте repeating-linear-gradient
Мастурбек: 24.09.2022 в 21:52

Если фон не черный или белый, а задается по хекс коду (#151719, например), не получается сделать цвет фона текста таким же, как цвет фона самой страницы. Как пофиксить?

Alexander: 27.09.2022 в 10:50
Текст ставим белый, а mix-blend-mode — multiply
Жасмин: 31.01.2022 в 23:32
Я вас люблю.Спасибо Вам за все!❤
Vladimir: 13.12.2021 в 11:14
Здравствуйте
А как сделать чтобы фон было видео?
И на нем данный CSS код с переливающимся текстом
Alexander: 13.12.2021 в 11:19

Общий контейнер ставится в relative, а текст накладывается через absolute;
Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.

Женя: 09.01.2021 в 16:32
Как сделать фон прозрачный вообще только текст чтобы был
Alexander: 09.01.2021 в 17:29
Не понял, какой фон?
Сейчас фон блока — белый, фон текста переливается.
Наталья: 02.09.2020 в 17:01
а если фон не белый?? Черный фон не получается сделать..
Alexander: 02.09.2020 в 17:25
Заменяем / добавляем
.pouring < background: #000; color: #fff; >.pouring:before

Как сделать текст градиентом — простой CSS-трюк

C помощью двух свойств можно сделать градиентом любой текст на странице. А ещё заливка меняется в зависимости от ширины экрана!

Прежде чем разбираться, как сделать текст градиентом, посмотрим на результат. Вот что мы получим в итоге:

See the Pen CSS Gradient text effect by Pochemuta (@pochemuta) on CodePen.

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

body

Затем стилизуем сам заголовок:

На всякий случай прописываем запасной цвет — background-color: #2AA5A0. Даже если градиент не сработает, текст не потеряется на фоне.

Вот так выглядит промежуточный результат:

Как сделать текст градиентом — простой CSS-трюк 1

Градиент есть, градиентного текста пока нет

Теперь добавляем немного магии, чтобы получить градиентный текст:

Осталось понять, что происходит:

  • свойство -webkit-background-clip: text оставляет градиент только под текстом;
  • свойство -webkit-text-fill-color: transparent делает цвет текста прозрачным.

Фактически текст не становится градиентным. Однако через него теперь виден градиент, то есть задачу мы решили.

Вот ещё пример того, как можно использовать те же свойства. Раскомментируйте text-shadow, поменяйте radial-gradient на linear-gradient — эффекты будут заметно отличаться.

See the Pen CSS Gradient text effect-shadow by Pochemuta (@pochemuta) on CodePen.

Поддерживаются все современные браузеры. Исключение — Internet Explorer. Но пользоваться -webkit-text-fill-color нужно с осторожностью. Это нестандартное свойство, поведение которого может измениться в будущем.

Как сделать текст градиентом — простой CSS-трюк 2

Поддержка выглядит неплохо, но есть нюансы

Больше интересных материалов:

  • CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
  • Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
  • Как стать фронтенд-разработчиком в 2021 году: дорожная карта

как сделать один текст разного цвета в кап кут

Смотрите видео на тему «как сделать один текст разного цвета в кап кут» в TikTok (тикток).

Лайки: 56.6K.Комментарии: 457.Видео в TikTok (тикток) от пользователя WIRUSSI (@imwirussi): «#CapCut Rainbow text on @CapCut #cccreator #tutorial #foryoupage #foryou #fyp #goviral #viralvideo #imwirussi_ #imteamy #edit #text».original sound - WIRUSSI.

870.8K

#CapCut Rainbow text on @CapCut #cccreator #tutorial #foryoupage #foryou #fyp #goviral #viralvideo #imwirussi_ #imteamy #edit #text

Лайки: 941.Комментарии: 30.Видео в TikTok (тикток) от пользователя лана (@helpfrlana): «мой тгк: @h3lpfrlana | туториал на текст разного цвета. �� #CapCut #хэлпаккаунт #tutorial #helpfrlana #fyr #on #fyp #туториал».оригинальный звук - лана.

31.2K

мой тгк: @h3lpfrlana | туториал на текст разного цвета. �� #CapCut #хэлпаккаунт #tutorial #helpfrlana #fyr #on #fyp #туториал

Лайки: 2.3K.Комментарии: 61.Видео в TikTok (тикток) от пользователя capcut (@anqel.flw): «someone requestsed this tut once but i cant find the comment anymore. #edit #edits #editor #capcut #capcuttutorial #tutorial #text #calcuttext #howto #capcuteditor #anqelflw».original sound - sp33dsongsx.

91.4K

someone requestsed this tut once but i cant find the comment anymore. #edit #edits #editor #capcut #capcuttutorial #tutorial #text #calcuttext #howto #capcuteditor #anqelflw

Лайки: 235.Видео в TikTok (тикток) от пользователя Інста prostrel_store (@n3yfee): «Туториал по разноцветному тексту в капкут , плс подпишись #рек #туториал #текст #разноцветный #капкут #трент #trent #football #tutorial».оригинальный звук - Інста prostrel_store.

9418

Туториал по разноцветному тексту в капкут , плс подпишись #рек #туториал #текст #разноцветный #капкут #трент #trent #football #tutorial

Лайки: 1.9K.Комментарии: 26.Видео в TikTok (тикток) от пользователя WIRUSSI (@imwirussi): «#CapCut �� #cccreator #tutorial #foryoupage #foryou #fyp #goviral #viral #imteamy #imwirussi_ #viralvideo #trend #edit».original sound - WIRUSSI.

64.7K

#CapCut �� #cccreator #tutorial #foryoupage #foryou #fyp #goviral #viral #imteamy #imwirussi_ #viralvideo #trend #edit

Лайки: 24.5K.Комментарии: 392.Видео в TikTok (тикток) от пользователя Helping_editors__ (@helping_editors__): «How to do rainbow text on capcut!���� first video ! Hope this won’t flop!! Blow this up! #firstvideo #dontletthisflop #blowup #helpingeditors #editor #capcut #tutorial #fyp #viral».original sound - Helping_editors__.

654.4K

How to do rainbow text on capcut!���� first video ! Hope this won’t flop!! Blow this up! #firstvideo #dontletthisflop #blowup #helpingeditors #editor #capcut #tutorial #fyp #viral

Лайки: 250.Видео в TikTok (тикток) от пользователя �� (@qwazzyy1): «Ответ пользователю @buccearati надеюсь понятно#рекпж #rek #tutorial #капкут #capcut #кк #цветнойтекст ##жиза».оригинальный звук - ��.

12.6K

Ответ пользователю @buccearati надеюсь понятно#рекпж #rek #tutorial #капкут #capcut #кк #цветнойтекст ##жиза

Лайки: 7.2K.Комментарии: 76.Видео в TikTok (тикток) от пользователя sar (@haeriinverse): «Replying to @clementine / liam #capcut #capcuttut #capcuttext #capcuttutorial #text #howto #fy #fyp #fypシ #fypシ゚viral #blowthisup #fypage #foryoi #foryoupage #4up #4u #haeriinverse».original sound - sar.

88.7K

Replying to @clementine / liam #capcut #capcuttut #capcuttext #capcuttutorial #text #howto #fy #fyp #fypシ #fypシ゚viral #blowthisup #fypage #foryoi #foryoupage #4up #4u #haeriinverse

Лайки: 791.Комментарии: 24.Видео в TikTok (тикток) от пользователя Alphy��(quit) (@alphyeditz_): «First ever tut made! @Thaakir⚡️ there's! inspiration @JΛY✫ #firsttut #edit #alfaplanet #alphyyy #beviral #blowthisuptiktok #fypシ #fypシ».original sound - Alphy��(quit).

33.3K

First ever tut made! @Thaakir⚡️ there’s! inspiration @JΛY✫ #firsttut #edit #alfaplanet #alphyyy #beviral #blowthisuptiktok #fypシ #fypシ

Лайки: 146.8K.Комментарии: 400.Видео в TikTok (тикток) от пользователя ��������������ᥫ᭡ (@syndkth): «my text is the previous tutorial! #CapCut #tutorial #helpingeditors #cccreator».HEAVEN AND BACK - ������.

1.5M

my text is the previous tutorial! #CapCut #tutorial #helpingeditors #cccreator

Лайки: 55.Видео в TikTok (тикток) от пользователя �� �������� �� (@lays.pk): «how To Make Double color Text In Capcut Tutorial ❤️ #capcut #tutorial».original sound - �� �������� ��.

5552

how To Make Double color Text In Capcut Tutorial ❤️ #capcut #tutorial

Лайки: 559.Комментарии: 29.Видео в TikTok (тикток) от пользователя CapCut School �� (@capcutschool_01): «How To Make Colour Changing Text Tutorial #editing #capcut».Love You So - The King Khan & BBQ Show.

48.3K

How To Make Colour Changing Text Tutorial #editing #capcut

Лайки: 151.Видео в TikTok (тикток) от пользователя За���� руссь���� усрусь�� (@black_49_lady): «Ответ пользователю @agata_2563 #capcut #р��е��к��о��м��е��н��д��а��ц��и��и #глобальныерекомендации #МагнитНаЛёд #хочу1кподписчиков��».оригинальный звук - За���� руссь���� усрусь��.

7683

Ответ пользователю @agata_2563 #capcut #р��е��к��о��м��е��н��д��а��ц��и��и #глобальныерекомендации #МагнитНаЛёд #хочу1кподписчиков��

Лайки: 3.4K.Комментарии: 75.Видео в TikTok (тикток) от пользователя Capcut (@helpingc4pcuteditors): «#NEONTEXTTUT I’ve already said thank you in all of my vids but I want to say it again! I don’t think i’ve ever gained followers so fast! SO THANK YOU GUYS SO MUCH. These videos are my favorite things to make and i like making them knowing that I’m helping a new editor who doesn’t know how to use Capcut. Tomorrows vid is going to be the pfp’s that you guys requested! #CapCut #neontext #tysm #edit #editor #editing #glowingtext #glowingtexttut #neontexttut #viral #fyp #capcuttut #capcuttutorial #helpingeditors #helpingc4pcuteditors».original sound - Capcut.

105.5K

#NEONTEXTTUT I’ve already said thank you in all of my vids but I want to say it again! I don’t think i’ve ever gained followers so fast! SO THANK YOU GUYS SO MUCH. These videos are my favorite things to make and i like making them knowing that I’m helping a new editor who doesn’t know how to use Capcut. Tomorrows vid is going to be the pfp’s that you guys requested! #CapCut #neontext #tysm #edit #editor #editing #glowingtext #glowingtexttut #neontexttut #viral #fyp #capcuttut #capcuttutorial #helpingeditors #helpingc4pcuteditors

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

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