👩‍💻 Градиентный текст с тенью

В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.

🖥 Читать статью

📱 @dev_notes_ru

#frontend #css #svg

👩‍💻 Правильно выбранный 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>

Оба варианта дают одинаковый результат.

📱 @dev_notes_ru

#SVG #tips

👩‍💻Краткое пошаговое руководство по созданию внутренней тени для элемента img

✨ смещение исходного изображения
✨ размываем его
✨ вычитаем его из альфа-канала исходного изображения, чтобы получить черную внутреннюю тень
✨ красим её в оранжевый цвет
✨ размещаем её поверх исходного изображения

📱 @dev_notes_ru

#SVG #tips

👩‍💻 Лучший подход к SVG иконкам

SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #SVG #Icons #HTML #CSS