У меня есть текст со встроенными шрифтами, который должен иметь вертикальный градиент, вы можете предложить ему плагин jQuery? Мне нужно, чтобы семейство шрифтов, размер и другие атрибуты были сохранены, и был добавлен только вертикальный градиент.Плагин jQuery для текстового градиента
Я нашел один (http://www.codefocus.ca/goodies/gradienttext), но он переопределяет все мои шрифты.
вам просто нужно указать текст, который вы хотите использовать, и использовать этот идентификатор в коде jquery. здесь демо-версия:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gradienttext-0.1.min.js"></script>
<style>
p{ font-size: 30px; }
</style>
<script>
$(document).ready(function(){
$('#test1').gradienttext({
colors: ['#FFF', '#EB9300'],
style: 'vertical',
shadow: true,
shadow_color: '#000000',
shadow_offset_x: 1,
shadow_offset_x: 1,
shadow_blur: 1
});
});
$(document).ready(function(){
$('#test2').gradienttext({
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
});
});
</script>
</head>
<body>
<p id="test1">test 1</p>
<p id="test2">test 2</p>
</body>
</html>
Вы можете просто использовать css для выполнения линейного градиента.
background-image: linear-gradient(bottom, #666666 23%, #908c8c 62%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #666666),
color-stop(0.62, #908c8c)
);
Но это сделало бы _background_ текста градиентом, а не самим текстом - нет? – powerbuoy
На самом деле, вы можете выполнять текстовые градиенты с помощью чистого CSS. Этот метод включает в себя наложение текста на прозрачный градиентный PNG (вы также можете использовать CSS3 linear-gradient).
Вы можете прочитать здесь: http://webdesignerwall.com/tutorials/css-gradient-text-effect
Вместо добавления span сек, необходимые в реальной разметке вы могли бы сделать это автоматически с помощью JS (или JQuery).
Этот эффект не изменит шрифт (@ font-face, связанный или иначе).
Это не работает для меня, поскольку у меня есть фон, полный текстуры. – Karine
Да, вы можете
Просто вызовите метод CSS(), чтобы снова применить шрифты
Во-первых, почему вы не пишете как код в одной ГОТОВ функции?
Во-вторых, решение (может быть :))
jQuery(document).ready(function($){ // yup, I like to use it this way - safe
var test1Opts = {
colors: ['#FFF', '#EB9300'],
style: 'vertical',
shadow: true,
shadow_color: '#000000',
shadow_offset_x: 1,
shadow_offset_x: 1,
shadow_blur: 1
},
test2Opts = {
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
}
$('#test1')
.gradienttext(test1Opts)
.css('font-family', 'YOUR CUSTOM FONT NAME')
// optionally you can call the following to apply font on all child items
// by uncommenting the 2 lines below
// .find('*')
// .css('font-family', 'YOUR CUSTOM FONT NAME');
// you can also use the short "font" syntax,
// if you have a lot of options in your font-face
$('#test2')
.gradienttext(test2Opts)
// .css('font', 'style weight size/line-height YOUR CUSTOM FONT NAME')
.css('font', 'normal bold 11px/16px YOUR CUSTOM FONT NAME')
.find('*')
.css('font-family', 'YOUR CUSTOM FONT NAME');
});
ли сохранить пользовательский тип шрифта, который я добавил через @ шрифта лицо ?? – Karine
Вам определенно не нужно указывать каждому элементу идентификатор. Просто используйте любой селектор, который вы хотите. – powerbuoy
Karine, конечно, поддерживает пользовательский тип шрифта. @powerbuoy, как мы это делаем? – Houx