Как создать, используя CSS, многоцветный текст, как на рисунке ниже?Текст с несколькими градиентами цветов в CSS
В тексте использованы как-то случайно Differents цвета, и я хотел бы сделать что-то, что выглядит так же. Это из картинки, поэтому я не могу просто найти ответ в исходном коде страницы.
Благодарим за помощь! :)
Я думаю, что это дубликат How do I use a gradient as a font color in CSS?
Кроме того, проверить этот сайт. У них отличные подсказки CSS. Эта статья относится к вашему вопросу. https://css-tricks.com/snippets/css/gradient-text/
Вот код с сайта.
Использование WebKit, вы можете сделать
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Тем не менее, кажется, что она не поддерживается в Firefox.
.gradient2:before {
background: rgba(0, 0, 0, 0) radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670) repeat scroll 0 0;
content: "";
display: block;
mix-blend-mode: screen;
}
.gradient2:before, .gradient2:after {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
.gradient2:after {
background: #04161f none repeat scroll 0 0;
color: white;
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.";
mix-blend-mode: multiply;
}
.gradient2 {
background: white none repeat scroll 0 0;
color: black;
margin: 1em auto;
position: relative;
text-align: center;
text-shadow: 1px 1px 0 #04161f, 1px -1px 0 #04161f, -1px -1px 0 #04161f, -1px 1px 0 #04161f;
width: 10em;
}<body>
<p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</body>увидеть это http://cssdeck.com/labs/hmsqyqtx я думаю, что он будет работать для вас
Привет, я не знаю, если это отвечает именно то, что вы хотите, но, кажется, связано с вашим вопросом : http://stackoverflow.com/questions/7261680/set-background-image-for-font-color и один из ответов ссылается на страницу с этим: http://webdesignerwall.com/tutorials/css-gradient- text-effect – zelite
Вопросы, предлагающие нам предлагать, находить или рекомендовать книгу, инструмент, библиотеку программного обеспечения, плагин, tu ториевый или другой ресурс вне сайта неактуальен для переполнения стека переполнения стека –
Это лучше сделать с помощью SVG, см. http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-in-pure-css -без-используя-фоновое изображение –