Создание прозрачного текстового градиента на прозрачном фоне - PullRequest
0 голосов
/ 31 марта 2011

это должно выглядеть как http://img190.imageshack.us/img190/1686/textgradient.jpg
хитрая часть, это должно работать для оперы, холста ..?также важно: прозрачность нужна только для больших текстов на скриншоте.

текст - это простой HTML-текст в теге span.фон является несколько прозрачным png, определенным как css background-image контейнера div.у меня не было бы проблем с использованием canvas или чего-то подобного для отображения текста.

Ответы [ 4 ]

2 голосов
/ 31 марта 2011

Если бы только Cufón поддерживал горизонтальный линейный градиент "из коробки", вы были бы отсортированы для простого <canvas> решения. Как ни странно, разговор о cufon, поддерживающем горизонтальный линейный градиент , только что начался в последние 24 часа. Демо ниже демонстрирует Cufón с вертикальным линейным градиентом, используя rgba.

Демонстрация: jsfiddle.net / Marcel / 35PXy ( во весь экран )

1 голос
/ 31 марта 2011

ну, это был долгий день, и я нашел решение сам. он использует холст.

для холста с высотой 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);
0 голосов
/ 03 августа 2012

Вам больше не нужен холст.Используйте свойство background-clip: text в сочетании с градиентным фоном с rgba (альфа-канал для полной прозрачности).

Вот пример: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html

Это здорово, но работает только в браузере веб-китна этот раз.

Для более совместимого решения вы можете взглянуть на mask-image http://trentwalton.com/2011/05/19/mask-image-text/ Как и в первом методе, вы должны уменьшить маску до полной прозрачности, чтобы получить эффект, который вы хотите реализовать.

0 голосов
/ 31 марта 2011

Самый простой способ сделать это, о чем я могу подумать, - это создать копию фонового изображения, перейти в фотошоп и создать градиент, который в основном прозрачный. Затем наложите градиент на текст. Я думаю, это будет работать в любом браузере.

...