это должно выглядеть так: http://img190.imageshack.us/img190/1686/textgradient.jpg
сложная часть в том, что это должно работать для Opera, Canvas..? Также важно: прозрачность нужна только для больших текстов на скриншоте.
текст представляет собой простой текст html в теге span. фон представляет собой несколько прозрачный png, определенный как фоновое изображение css контейнера div.
У меня не было бы проблем с использованием холста или чего-то подобного для отображения текста.
Если бы только Cufón поддерживала горизонтальный линейный градиент из коробки, вы бы легко <canvas> отсортировались. решение. Как ни странно, разговор о cufon, поддерживающем горизонтальный линейный градиент, был просто началось за последние 24 часа. Демонстрация ниже демонстрирует Cufón с вертикальным линейным градиентом с использованием rgba.
ну, это был долгий день, и я сам нашел решение. он использует холст.
для холста с высотой html 73px и шириной 720px:
var ctx = myCanvasEl.getContext("2d");
ctx.font = "53pt Arial, Helvetica, sans-serif";
var gradient = ctx.createLinearGradient(400, 0, 650, 0);
gradient.addColorStop(0, "rgb(255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.fillText(myText, 0, 58);
Самый простой способ сделать это, который я могу придумать, — создать копию фонового изображения, зайти в фотошоп и создать почти прозрачный градиент. Затем наложите градиент на текст. Думаю, это будет работать в любом браузере.
Вам больше не нужен холст. Используйте свойство background-clip: text в сочетании с градиентным фоном с rgba (альфа-канал до полной прозрачности).
Вот пример: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html
Это здорово, но в настоящее время работает только в браузере webkit.
Более совместимое решение можно найти на mask-image http://trentwalton.com/2011/05/19/mask-image-text/ Как и в первом методе, вы должны сделать маску полностью прозрачной, чтобы получить желаемый эффект.
