На том и на другом изображении мы видим красивый текст. Большей частью своей красоты этот текст обязан тому, что рисуется не одним простым цветом, а плавным цветовым переходом — так называемою градиентною заливкою.
Здесь уместно припомнить, что веборазработчики постепенно выучились употреблять градиенты в качестве фоновых рисунков: для этой цели им верно служит свойство «background:
Почему это так? Да потому, что единственным широко известным средством для градиентной раскраски текста служит нам нестандартный
Можно ли преодолеть этот тупик и достичь кросс-платформенности текста, отрисовываемого цветовым градиентом?
Зайдите на сайт проекта
Как такое достигается? Читая пособие, нетрудно обнаружить, что действует плагин jQuery, который нарезает текст на узкие горизонтальные полоски однопиксельной высоты, и внутри каждой такой полоски отображает копию текста, раскрашенную в необходимый промежуточный цвет и сдвинутую по вертикали таким образом, чтобы в точности стать на место первоначального текста внутри этой полоски:
Благодаря этой счастливой мысли, пришедшей в голову авторов проекта «Codename Rainbows», мы можем считать решённою задачу кросс-платформенной отрисовки текста заданным цветовым градиентом. Правда, решена она только для одного частного случая: градиент должен быть вертикальным, да притом в данной реализации задавать возможно только самый верхний и самый нижний цвет его — не получится, например, поназадавать ряд специальных промежуточных точек и тем реализовать эффект «хромирования» букв. Но и так, и так нам есть чему порадоваться.
_______________
* Шекспир, «Гамлет, принц датский», акт III, сцена IV, в переводе Пастернака.
ссылка на оригинал статьи http://habrahabr.ru/post/177011/
Добавить комментарий