Предлагаю вашему вниманию достаточно интересный пример создания текста с 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; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!