Кросс-платформенный текст, рисуемый цветовым градиентом

    Вот два изображенья — вот и вот: *

    [два изображенья]

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

    Здесь уместно припомнить, что веборазработчики постепенно выучились употреблять градиенты в качестве фоновых рисунков: для этой цели им верно служит свойство «background: linear-gradient();», описываемое в стандарте «CSS Image Values and Replaced Content Module Level 3». И если сейчас перейти к стандарту по гиперссылке, то станет видно, что он достиг уж статуса «Candidate Recommendation», и что датируется он семнадцатым апреля 2012 года. В честь первой годовщины этого дня позвольте поговорить о том, что градиентная отрисовка текста всё ещё распространена в Сети куда менее, чем градиентная отрисовка фона.

    Почему это так? Да потому, что единственным широко известным средством для градиентной раскраски текста служит нам нестандартный CSS-код «-webkit-background-clip: text», который обрезает любой фон (в том числе градиентный) по границе текста — и который употребляется обыкновенно в сочетании с CSS-кодом «-webkit-text-fill-color: transparent», обеспечивающим прозрачность букв самогó текста, так что фон через него проглядывает. Этот код работает с весны 2008 года, но, к сожалению, только во браузерах на основе WebKit, число которых хотя и возросло недавно (благодаря Опере, отступившейся от собственного движка), но ими одними плоды мирового браузеростроения не исчерпываются. Ни в Firefox, ни в Internet Explorer этот код не заработает.

    Можно ли преодолеть этот тупик и достичь кросс-платформенности текста, отрисовываемого цветовым градиентом? Да, это возможно; но для этого придётся вместо CSS прибегнуть ко джаваскрипту.

    Зайдите на сайт проекта «Codename Rainbows», откройте тамошнюю демонстрационную страницу (например, в Файерфоксе) — и вашему взору предстанут девять примеров текста, оформленного градиентом. Именно оттуда я позаимстовал два примера, приведённых выше.

    Как такое достигается? Читая пособие, нетрудно обнаружить, что действует плагин jQuery, который нарезает текст на узкие горизонтальные полоски однопиксельной высоты, и внутри каждой такой полоски отображает копию текста, раскрашенную в необходимый промежуточный цвет и сдвинутую по вертикали таким образом, чтобы в точности стать на место первоначального текста внутри этой полоски:

    [RAINBOWS]

    Благодаря этой счастливой мысли, пришедшей в голову авторов проекта «Codename Rainbows», мы можем считать решённою задачу кросс-платформенной отрисовки текста заданным цветовым градиентом. Правда, решена она только для одного частного случая: градиент должен быть вертикальным, да притом в данной реализации задавать возможно только самый верхний и самый нижний цвет его — не получится, например, поназадавать ряд специальных промежуточных точек и тем реализовать эффект «хромирования» букв. Но и так, и так нам есть чему порадоваться.

    _______________
    * Шекспир, «Гамлет, принц датский», акт III, сцена IV, в переводе Пастернака.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 11

      +1
      При этом пропадает сглаживание и результат смотрится как графика времен DOS.
        0
        Скриншот примеров я делал в Windows XP, где ClearType не занимается сглаживанием контуров, близких к горизонтальным. Кажется, именно поэтому «ступеньки». Вы полагаете, что не поэтому?
          0
          В 7-ке не сказать чтобы лучше

          Да я и не о причинах, а о результате.
            +1
            А все потому, «что действует плагин jQuery, который нарезает текст на узкие горизонтальные полоски однопиксельной высоты, и внутри каждой такой полоски отображает копию текста, раскрашенную в необходимый промежуточный цвет и сдвинутую по вертикали таким образом, чтобы в точности стать на место первоначального текста внутри этой полоски».

            Вот вам и пиксели, торчащие.
            +1
            МакОс 10.8.3, смотрится вполне сносно. Кстати, надпись Superblue выглядит хуже всех остальных в тесте. Зато возникают различия в лидинге (посмотрите на расстояние между «u» и «e» в Superblue) между МакОС и 7-кой.


            Такая себе кроссплатформенность…
          +10
          На том и на другом изображении мы видим красивый текст

          Ммм, я вижу стремный градиент из разряда «секретарь осваивает возможности Microsoft Word».
          Простите.
            +4
            Вам не за что извиняться, действительно ужасно.
            +6
            «Так называемою градиентною заливкою» — об авторстве и думать не пришлось.
              +2
              А я три раза старался прочитать слово «веборазработчики». Это же надо так ненавидеть русский язык, чтобы так сильно над ним издеваться.
              +1
              Плагин к jQuery от российского разработчика. Работает по такому же принципу.
                +1
                (не успел отредактировать)
                В отличие от описанного в статье плагина умеет раскрашивать и горизонтально.

              Only users with full accounts can post comments. Log in, please.