Видео недоступно для предпросмотра
Смотреть в Telegram
#фишка дня
Давайте нормализуем выкладывание кода вместе с обучающим видео!
Немного раздражает, когда показывают красивый эффект, но оставляют только видео. Посмотреть можно, а понять, как повторить и что именно менять, — уже сложнее. Давайте исправлять: к ролику добавлять рабочий пример и короткий разбор.
Например, эффект с надписью PRO собран из нескольких простых приёмов SVG:
1. Буквы сведены к одному силуэту, поэтому фильтр обрабатывает их как цельную форму.
2. Размытие альфа-канала и композиция создают внутреннюю тень.
3. По буквам движется повторяющийся градиент — он задаёт светлые и тёмные участки.
4. feComponentTransfer переводит оттенки в цвет по таблицам RGB.
5. На финальном шаге контур возвращает буквам чёткость, а зерно добавляет фактуру. Цвет контура зависит от градиента и меняется вместе с ним.
Хороший пример показывает результат по этапам: включил шаг — увидел, что он добавил. Ещё полезно приложить минимальный запускаемый код, дать менять параметры и отметить, если часть значений пришлось восстановить приблизительно.
Собственно, вот вам хороший пример от меня: https://codepen.io/editor/alinaki/pen/01a0f735-901e-7978-a733-f7e89bd82597
Видео хорошо передаёт движение. Демо и код помогают разобраться, повторить и поэкспериментировать.
Хотелось бы, чтобы и публиковали их вместе.
#css #svg #effect #animation
Давайте нормализуем выкладывание кода вместе с обучающим видео!
Немного раздражает, когда показывают красивый эффект, но оставляют только видео. Посмотреть можно, а понять, как повторить и что именно менять, — уже сложнее. Давайте исправлять: к ролику добавлять рабочий пример и короткий разбор.
Например, эффект с надписью PRO собран из нескольких простых приёмов SVG:
1. Буквы сведены к одному силуэту, поэтому фильтр обрабатывает их как цельную форму.
2. Размытие альфа-канала и композиция создают внутреннюю тень.
3. По буквам движется повторяющийся градиент — он задаёт светлые и тёмные участки.
4. feComponentTransfer переводит оттенки в цвет по таблицам RGB.
5. На финальном шаге контур возвращает буквам чёткость, а зерно добавляет фактуру. Цвет контура зависит от градиента и меняется вместе с ним.
Хороший пример показывает результат по этапам: включил шаг — увидел, что он добавил. Ещё полезно приложить минимальный запускаемый код, дать менять параметры и отметить, если часть значений пришлось восстановить приблизительно.
Собственно, вот вам хороший пример от меня: https://codepen.io/editor/alinaki/pen/01a0f735-901e-7978-a733-f7e89bd82597
Видео хорошо передаёт движение. Демо и код помогают разобраться, повторить и поэкспериментировать.
Хотелось бы, чтобы и публиковали их вместе.
#css #svg #effect #animation