Цвет градиента с линейной границей градиента в тексте с использованием CSS не работает - PullRequest
Новая
       52

Цвет градиента с линейной границей градиента в тексте с использованием CSS не работает

4 голосов
/ 20 мая 2019

Мне бы хотелось, чтобы дизайн £ 1 был похож на следующее изображение с использованием CSS.

£1

Я хотел бы получить немноготекст с градиентным цветом, градиентной границей и текстовой тенью в этом дизайне.Я попробовал следующий код, но он не работает.

CSS: 

.pound-lbl {
       background-image: linear-gradient(275deg, #f8e71c 0%, #f8bd1c 100%);
       -webkit-background-clip: text;
       color: #FFDE17;
       text-shadow: 0 2px 4px rgba(0,0,0,0.50);
       background: -webkit-linear-gradient(275deg,#F8CC1C 0%, #FFFFFF 100%);
       -webkit-background-clip: text;
       -webkit-text-stroke: 2px transparent;
}

Ответы [ 2 ]

5 голосов
/ 20 мая 2019

Я думаю, что единственный способ получить этот эффект - дублировать текст.Один получит окраску обводки, а другой - окраску фона:

Я использовал разные цвета, чтобы лучше их идентифицировать: 

span[data-text] {
  display:inline-block;
  font-size:90px;
  font-weight:bold;
  font-family:arial;
  position:relative;
  margin:10px;
}
span[data-text]:before {
  content:attr(data-text);
  text-shadow: 0 2px 20px purple;
  background: linear-gradient(to bottom,red 0%, blue 100%);
  -webkit-text-stroke: 5px transparent;    
  -webkit-background-clip: text;
  background-clip: text;
  color:transparent;
}
span[data-text]:after {
  content:attr(data-text);
  left:0;
  top:0;
  position:absolute;
  background-image: linear-gradient(275deg, green 0%, yellow 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<span data-text="£1"></span>
2 голосов
/ 21 мая 2019

Градиенты по тексту

Когда вам нужно установить градиенты по тексту, CSS не является инструментом для использования.
Его проще использовать svg для продвинутых градиентов и всех сложных фигур.

Вот как я бы порекомендовал создать SVG:

  1. Определить два градиента один для фона, один для текста.( LinearGradient )
  2. Создание фона и текста.(прямоугольник и текст, tspan)
  3. Установить обводку и заливку элементов для LinearGradients.

Вот как это будет выглядеть: 

<!--viewBox cuts the shape so that there is little whitespace-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" viewBox="0 40 100 60">
   <defs>
      <!--Gradients defined to use later-->
      <linearGradient id="textGradient" x1="90" x2="90" y1="40" y2="60" gradientUnits="userSpaceOnUse">
         <stop stop-color="#f2cb3c" offset="0"/>
         <stop stop-color="#ffffff" offset="1"/>
      </linearGradient>
      <linearGradient id="backgroundGradient" x1="0" y1="100" x2="0" y2="100" gradientUnits="userSpaceOnUse">
         <stop stop-color="#5bc129" offset="0"/>
         <stop stop-color="#85de31" offset="1"/>
      </linearGradient>
   </defs>
   <!--Rect that covers the background-->
   <rect fill="url(#backgroundGradient)" stroke="none"; width="100" height="60" x="0" y="20"/>
   <g class="text" stroke="url(#textGradient)" fill="#f5e43e" stroke-width="0.5">
      <text x="35" y="68" style="font-size:50px;font-family:Arial;">
         <tspan>£1</tspan>
      </text>
   </g>
</svg>
...