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

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

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

Имейте в виду, что свойство -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;
}

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

Вот и всё!

Ссылка на автора - twitter.com/guerriero_se !


Top

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

💌 Написать сообщение ×

Все поля обязательны для заполнения!