Кроссбраузерный текстовый градиент в чистом css без использования фонового изображения

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


css linear-gradients
person Hiten S    schedule 04.11.2011    source источник
comment
Закрыто: нужно быть более целенаправленным: это должно быть защищено сообществом, а не закрыто x) ...   -  person jave.web    schedule 09.02.2020

Ответы (3)


arrow_upward
34
arrow_downward

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

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
          <stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
        </linearGradient>
      </defs>
      <text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
    SVG Text Gradient</text>
    </svg>

Вы можете изменить значения x и y для создания горизонтального/вертикального или диагонального градиента, вы также можете применять к нему стили с помощью таблицы стилей CSS, все, что для этого требуется, — это дополнительная строка кода между тегами defs.

  <link href="style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

Этот метод работает в последних версиях Chrome, IE, Firefox и Safari. Вы также можете применять радиальные градиенты, размытие и фильтры. Дополнительную информацию см. в W3 Schools.

person Harry12345    schedule 24.08.2013
comment
＋１ ???????????? тщательное, кросс-браузерное, независимое от дизайна и динамического текста решение. - person dakab; 06.04.2016
comment
Я нашел это решение много лет назад, и, к сожалению, по состоянию на 2020 год оно все еще остается лучшим решением, которое я нашел — самый кроссбраузерный && не исключает другие стили, такие как text-shadow, потому что это не фоновый взлом. Поддержка background-clip: text сейчас лучше, но это все еще не полная поддержка, и, как я уже сказал, это обходной путь caniuse.com/#feat=mdn-css_properties_background-clip_text - person jave.web; 09.02.2020

arrow_upward
6
arrow_downward

Вы можете сделать это с помощью плагинов jQuery.

Плагин Cufon тоже может иметь это, вы должны проверить это. Это также можно сделать с помощью плагина Raphael или SVG и VML, но кроссбраузерное решение на чистом CSS трудно найти.

Только для Chrome и Safari:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

Для остальных браузеров вы должны использовать JavaScript.

person Jozsef Kerekes    schedule 04.11.2011
comment
Ссылка мертва. У вас есть альтернатива? Кроме того, что такое «плагин cufon»? - person dakab; 06.04.2016

arrow_upward

arrow_downward

person    schedule
comment
Вы должны отметить, что это работает только на белом фоне, хотя отличное решение! - person Tim Baas; 11.06.2013
comment
Не только белый, так как вы можете изменить цвет в предоставленном css. Однако цвет градиента должен быть таким же, как и цвет фона текста. - person Soul Reaver; 07.11.2013
comment
Комментируя старый вопрос, но есть ли способ скрыть этот белый фон? - person Rvervuurt; 10.02.2015
comment
Как сказал @SoulReaver, это работает только для затухания текста на сплошном цветном фоне или за его пределами. В этом примере невозможно изменить цвет текста с красного на черный, сохраняя при этом белый фон. - person macguru2000; 15.02.2015
comment
запустите фрагмент кода, удивитесь, почему графика черная - person Michael Kunst; 22.10.2015