Блог

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

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

Я нашел способ сделать это в Cufon, но, как я уже сказал, я хочу придерживаться @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))
  

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

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

Глядя на демонстрацию, которую вы имеете на 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 amp; text-shadow в селекторе «h1: after». Возможно, вы захотите удалить их, чтобы получить лучшее представление о том, как эффект выглядит в чистом виде.

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

Приветствия! 🙂

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

 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>