В наши дни градиентный текст довольно легко сделать с помощью
background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.#frontend #css #svg
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1🔥1
viewBox может помочь избежать необходимости устанавливать кучу атрибутов❌
<svg viewBox='0 0 12 12'>
<line x1='3' y1='6' x2='9' y2='6' stroke='red' stroke-width='3'/>
</svg>
✅
<svg viewBox='-1 -2 4 4'>
<line x2='2' stroke='red'/>
</svg>
Оба варианта дают одинаковый результат.
#SVG #tips
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
img✨ смещение исходного изображения
✨ размываем его
✨ вычитаем его из альфа-канала исходного изображения, чтобы получить черную внутреннюю тень
✨ красим её в оранжевый цвет
✨ размещаем её поверх исходного изображения
#SVG #tips
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1🤔1🤪1
SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.
#Frontend #SVG #Icons #HTML #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥1