Возможен ли текст с градиентом средствами CSS3?

Возможен ли текст с градиентом в Опере и ФФ (в WebKit'e с этим проблем нет) без использования полупрозрачных картинок или полупрозрачных дивов на том же CSS3 поверх текста?
  • Вопрос задан
  • 36285 просмотров
Пригласить эксперта
Ответы на вопрос 8
lashtal
@lashtal
Не цсс3, конечно, но может подойти:
www.artlebedev.ru/tools/technogrette/js/gradient-text/
Ответ написан
@RenatGanbarov
Я думаю, что все зависит от ситуации, где его использовать надо.
Мое решение было таким(сайт имеет белый фон):

h1{
font-size: 50px;
text-align: center;
position: relative;
line-height: 1;
margin-bottom: 20px;
}

h1:before{
content: "";
display: block;
height: 50px;
position: absolute;
left: 0;
top: 0;
width: 100%;
background: -webkit-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -moz-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -ms-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -o-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
}

Пример можно посмотреть например тут
Ответ написан
Комментировать
Wott
@Wott
background:#E2E7EA
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E2E7EA', endColorstr='#C5D5D6'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#E2E7EA), to(#C5D5D6)); /* for webkit browsers */
background-image: -webkit-linear-gradient(top, #E2E7EA, #C5D5D6);
background-image: -moz-linear-gradient(top, #E2E7EA, #C5D5D6); /* for firefox 3.6+ */
background-image: -ms-linear-gradient(top, #E2E7EA, #C5D5D6);
background-image: -o-linear-gradient(top, #E2E7EA, #C5D5D6);
Ответ написан
lampa
@lampa
Искал тоже долго, но так ничего и не нашел толкового, кроме полупрозрачных картинок.
Ответ написан
Комментировать
@zyets
Есть решение на чистом css3
Долго не мог понять как работает свойство background-clip: text
Много где про него написано, но не везде объясняется достаточно подробно, что бы понять всю механнику.. За основу беру вот эту статью
Сегодня я это свойство осилил и меня прет поделиться со всеми:
Сразу предлагаю рассмотреть пример, а дальше расскажу, как и что там происходит! Не ругайтесь, хоть и костыли, но оно работает)))
1. background-clip действует по аналогии со свойством clip оно обрезает лишнее. При значении text оно будет обрезать фон по границам текста, находящегося внутри элемента.
2. Что бы этот фон был виден, надо сделать сам текст прозрачным обязательно, ибо текст всегда выше чем фон!
3. Есть подводные камни с другими свойствами, напимер text-shadow. если его применить, то элементы будут располагаться в такой последовательности:
а. снизу фон
б. потом тень от текста (она будет перекрывать всю магию с background-clip)
в. затем сам прозрачный текст.
Можно этого избежать добавив атрибутов и псевдоэлементов

ЗЫ, по ссылке выше в комментах можно найти еще вот такие примеры реализации, они тоже великолепны! Пример, пример
Ответ написан
volk13
@volk13 Автор вопроса
Для себя всеже решил, за неимением лучшего варианта, с помощью дива поверх текста, А вот у самого дива бэкграунд полупрозрачный.
Градиент очень удобно задавать тут — www.colorzilla.com/gradient-editor/
Ответ написан
Комментировать
@jab
Я, честно говоря, поленился проверять, как это сделано, но видел такое тут:
esquire.ru/numbers#492
Ответ написан
Комментировать
@Nikkert
Создавать анимированные градиент тексты можно тут gfto.ru/index/sozdat_animirovannyj_gradient_tekst/0-63

Очень круто получется
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы