Эффект заливки текста на CSS

Как создать эффект заполнения текста в CSS.

ДЕМО

Свойства -webkit-text-fill-color и -webkit-text-stroke можно использовать для изменения цвета заливки и обводки ваших текстовых элементов. Поддержка браузера тоже неплохая!

Имейте в виду, что свойство -webkit-text-stroke не всегда дает приятные результаты: это зависит от используемого семейства шрифтов.


.text-fill {
  -webkit-text-fill-color: transparent;

  /* -webkit-text-stroke: {size} {color}; */
  -webkit-text-stroke: thin PaleTurquoise; 
  -webkit-text-stroke: 0.2rem PaleTurquoise;

  /* 👇 split stroke properties */
  -webkit-text-stroke-color: PaleTurquoise;
  -webkit-text-stroke-width: 0.2rem;
}

Вот демонстрация:

Вот и всё!


🔖 Выбор по тегам ×

Top