Градиентный текст для браузеров Webkit
<style> .raz { background: linear-gradient(green, red); /* подробнее про градиенты */ -webkit-background-clip: text; /* подробнее про background-clip */ color: transparent; } </style>
Образец
<div class="raz">Образец</div>
Переход от одного цвета в другой происходит для всего блока, но отображается только на месте букв.
Первая строка
Вторая строка
Третья строка
Вторая строка
Третья строка
<div class="raz"> Первая строка<br> Вторая строка<br> Третья строка </div>
Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.
Картинка прозрачна в тех местах, где нет текста
Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).
Разноцветный градиент
Переливающееся слово
<style> .dva { background: linear-gradient(green, red); } .dva h1 { color: #000; background: #fff; mix-blend-mode: lighten; } </style> <div class="dva"> <h1>Переливающееся слово<h1> </div>
Картинка как фон у текста
Изображение внутри буквы
<style> .dva { background: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg) 100% 50%; background-size: cover; } .dva h1 { color: #000; background: #fff; mix-blend-mode: lighten; } </style> <div class="dva"> <h1>Изображение внутри буквы<h1> </div>
Внимание: примечателен пример из комментария 11 после статьи.
Градиент у текста для остальных браузеров
Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.
Образец
<style> .dva { position: relative; } .dva:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.0)); } </style> <div class="dva">Образец</div>
Заполняющийся текст
Навести
<style> .dva { position: relative; } .dva:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%; background-size: 100% 100%; } .dva:hover:after { transition: 12s linear; background-size: 0 100%; } </style> <div class="dva">Образец</div>
Пробегающий по буквам блик
На мой вкус, лучше анимацией сделать как у Сбербанка.
Навести
<style> .dva { position: relative; } .dva:after { content: ""; position: absolute; top: 0; left: -2em; width: 100%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%; background-size: 2em 100%; transform: skewX(-50deg); } .dva:hover:after { transition: 2s linear; background-position: 100% 0%; } </style> <div class="dva">Образец</div>
13 комментариев:
Объясните, пожалуйста, как?
.raz {
background: linear-gradient(green, red);
-webkit-background-clip: text;
color: transparent;
}
}
Если поменять цвет градиента то вот что получается - http://jsfiddle.net/3t7ehcdf/
Или я что то не так делаю
На мой взгляд так проще http://jsfiddle.net/NMitra/gbmtcvfk/4/