Домой / Рецепты CSS / Типография / SVG градиенты для текста
SVG градиенты для текста

SVG градиенты для текста

Предлагаю вашему вниманию достаточно интересный пример создания текста с SVG градиентами.

Демо

HTML

<div class="wrapper"><svg width="740" height="200">
 <defs>
 <linearGradient id="MyGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
 <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
 <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
 <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
 <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
 <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
 <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
 <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
 <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
 <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
 <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
 </linearGradient>
 
 <pattern id="p-stripes" 
 patternUnits="userSpaceOnUse"
 width="200" height="200" 
 viewbox="0 0 200 200">
 <rect width="200" height="200"
 fill="url(#MyGradient)"/>
 </pattern>
 </defs>
 
 <text x="0" y="97%">Hello!</text>
 </svg>
</div>

CSS

@font-face {
 font-family: 'Leckerli One';
 font-style: normal;
 font-weight: 400;
 src: local("Leckerli One"), local("LeckerliOne-Regular"), url(http://themes.googleusercontent.com/static/fonts/leckerlione/v5/S2Y_iLrItTu8kIJTkS7DrKRDOzjiPcYnFooOUGCOsRk.woff) format("woff");
}
HTML, BODY {
 min-height: 100%;
}

BODY {
 background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, #efefef 52.5%, rgba(255, 255, 255, 0) 55%), -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 50%, #efefef 52.5%, rgba(255, 255, 255, 0) 55%);
 background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 50%, #efefef 52.5%, rgba(255, 255, 255, 0) 55%), linear-gradient(45deg, rgba(255, 255, 255, 0) 50%, #efefef 52.5%, rgba(255, 255, 255, 0) 55%);
 -webkit-background-size: 1.5em 1.5em;
 background-size: 1.5em 1.5em;
 font-size: 10px;
}

.wrapper {
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 210px;
 margin: auto;
 text-align: center;
 line-height: 1;
}

text {
 fill: url(#p-stripes);
 font-family: 'Leckerli One';
 font-size: 25em;
}

/*SVG {
 border: 1px solid;
}
.wrapper {
 border: 1px solid;
}*/
a {
 font-style: italic;
 color: #999;
}

H3 {
 margin-bottom: .5rem;
 font: 1.5em/1 'Leckerli One';
 color: skyblue;
}

.links {
 width: 740px;
 margin: 3em auto;
 font-size: 16px;
 line-height: 1.4;
 text-align: left;
}

BODY[onload] .links {
 display: none;
}

Предлагаю вашему вниманию достаточно интересный пример создания текста с SVG градиентами. HTML &lt;div class=&quot;wrapper&quot;&gt;&lt;svg width=&quot;740&quot; height=&quot;200&quot;&gt; &lt;defs&gt; &lt;linearGradient id=&quot;MyGradient&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;100%&quot; y2=&quot;0%&quot;&gt; &lt;!--20% spreadMethod=&quot;repeat&quot;--&gt; &lt;stop offset=&quot;0%&quot; stop-color=&quot;crimson&quot; /&gt;&lt;stop offset=&quot;10%&quot; stop-color=&quot;purple&quot; /&gt; &lt;stop offset=&quot;10%&quot; stop-color=&quot;red&quot; /&gt;&lt;stop offset=&quot;20%&quot; stop-color=&quot;crimson&quot; /&gt; &lt;stop offset=&quot;20%&quot; stop-color=&quot;orangered&quot; /&gt;&lt;stop offset=&quot;30%&quot; stop-color=&quot;red&quot; /&gt; &lt;stop offset=&quot;30%&quot; stop-color=&quot;orange&quot; /&gt;&lt;stop offset=&quot;40%&quot; stop-color=&quot;orangered&quot; /&gt; &lt;stop offset=&quot;40%&quot; stop-color=&quot;gold&quot; /&gt;&lt;stop offset=&quot;50%&quot; stop-color=&quot;orange&quot; /&gt; &lt;stop offset=&quot;50%&quot; stop-color=&quot;yellowgreen&quot; /&gt;&lt;stop offset=&quot;60%&quot; stop-color=&quot;gold&quot; /&gt; &lt;stop offset=&quot;60%&quot; stop-color=&quot;green&quot; /&gt;&lt;stop offset=&quot;70%&quot; stop-color=&quot;yellowgreen&quot; /&gt; &lt;stop offset=&quot;70%&quot; stop-color=&quot;steelblue&quot; /&gt;&lt;stop offset=&quot;80%&quot; stop-color=&quot;skyblue&quot; /&gt; &lt;stop offset=&quot;80%&quot; stop-color=&quot;mediumpurple&quot; /&gt;&lt;stop offset=&quot;90%&quot; stop-color=&quot;steelblue&quot; /&gt; &lt;stop offset=&quot;90%&quot; stop-color=&quot;purple&quot; /&gt;&lt;stop offset=&quot;100%&quot;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 3.73 ( 3 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*