Создание двухцветного резкого градиента на тексте с помощью CSS3 - PullRequest
Новая
       14

Создание двухцветного резкого градиента на тексте с помощью CSS3

2 голосов
/ 04 ноября 2011

Мне нужно создать «острый» градиент для заголовка и текста навигации на сайте, который я создаю. Я пытаюсь сделать его как можно более чистым HTML5 / CSS3, и хотел бы придерживаться @font-face, а не переходить на Cufon. Под резким градиентом я подразумеваю два цвета, без смешения между ними.

Пример: http://dl.dropbox.com/u/12147973/sharp-gradient.png

Я нашел способ сделать это в Куфоне, но, как я уже сказал, я хочу придерживаться @font-face. Cufon доставляет мне слишком много горя в IE, и мне очень нравится, как работает @font-face.

Я также нашел способ сделать градиенты для текста с помощью CSS3, но я не могу понять, как это сделать с «острыми» градиентами. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

Как вы можете видеть из моего примера, использование трюка с изображением PNG не сработает, потому что оно не на сплошном фоне. Если ничего не помогает, я просто использую плавный градиент, но я доверяю хорошим людям из StackOverflow.

Градиент, с которым я сейчас работаю: 

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))

ПРИМЕЧАНИЕ. Я не против, если это решение только для одного браузера. Если это все, что есть, то, по крайней мере, лучше, чем ничего.

Ответы [ 2 ]

2 голосов
/ 04 ноября 2011

Полагаю, вам нужно использовать цветовые остановки.В этой ситуации вам нужно, чтобы цвета в вашем градиенте останавливались на точном месте.

Глядя на демонстрацию, которую вы имеете на Nettuts, я взял код и изменил его, чтобы создать двухцветный резкий градиентиспользуя этот код: 

    -webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));

Замените фрагмент "-webkit-mask-image" из демо тем, что у меня есть выше, и это должно быть то, что вы ищете.Отрегулируйте значения RGB для ваших предпочтительных цветов.Обратите внимание, что в демонстрации есть некоторые дополнительные вещи в CSS, которые могут привести к неожиданным результатам, например, свойство color в селекторе «h1 a» и свойство color & text-shadow в селекторе «h1: after».Вы можете удалить их, чтобы получить более полное представление о том, как эффект выглядит в чистом виде.

Также обратите внимание, что приведенный выше код будет работать только для браузеров на основе веб-набора (например, Chrome & Safari).Вам нужно будет реализовать соответствующие свойства префикса браузера для других браузеров (например, -moz-), но перед тем, как сделать это, убедитесь, что браузер поддерживает свойства "mask-image" и "Gradient".

Cheers!:)

0 голосов
/ 04 ноября 2011

Вот пример, который я сделал для кнопок в приложении 

a.primary[type="button"],input.primary[type="button"], input.primary[type="submit"],input.primary[type="reset"]{
              background-image: linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -o-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -moz-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -webkit-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -ms-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
a.primary[type="button"] span,a.secondary[type="button"] span{padding: 0 20px;height: 20px;}

Затем вы можете использовать его со входами или тегами с кнопкой type = 

<a type="button" class="primary" href="/neeto"><span>Button!</span>
...