Поясняю за кнопку
Привет! Чтобы добавить в копилку скилов манипуляции со слоями в Figma, покажу, как можно сделать светящуюся кнопку со свечением маски в зависимости от внутренних объектов
1. Объекты
Сначала нужно создать два объекта
2. Маска
Упакуйте объекты в маску кнопкой сверху экрана Figma, либо сочетанием «ctrl+alt+M». После того, как создали маску, добавьте внутрь нее еще один прямоугольник, чтобы маска не была прозрачной
3. Размытие
Задайте эллипсу Эффект layer blur. Отодвиньте его к краю, чтобы половина эллипса выходила за маску.
4. Опять маска
Выделите в слоях объект «Маска». Задайте ей эффект Drop Shadows с достаточной интенсивностью blur (примерно 50). У вас получится эффект такой, что бледное свечение эллипса виднор за пределами маски
Теперь вы знаете принцип затухающего свечения за пределами маски. Отлично, теперь давайте создадим кнопку с таким эффектом.
5. Объекты кнопки
Делаем прямоугольник, два эллипса и текст кнопки. Расположение любое, главное чтобы границы эллипса лежали на поверхности прямоугольника одной частью и выступали за ее край другой частью.
6. Маска кнопки
Теперь, так же, как я показывал выше, упаковываем объекты в маску
7. Украшение
В такой кнопке прямоугольник, который мы создаем для фона, должен быть по размеру маски, включая закругления или иные манипуляции, чтобы края прямоугольника и маски совпадали. (Для корректного внутреннего свечения по краю маски)
Прямоугольнику задаем стиль:
- Fill #$$$$$$ 1% (Любой цвет)
- Inner Shadow Blur 6 (по центру)
Также подкрашиваем наши эллипсы и задаем им эффект layer blur, и получаем такую кнопку
8. Добавляем эффект маске
У самого слоя маски вы можете добавить 1 или 2 Drop Shadow, настройка по усмотрению, но я использую два слоя с blur со значением 8 и 3 (по центру).
Результат: У нас получилась святящаяся кнопка, у которой внутренние эффекты подсвечиваются снаружи, как бы создавая затухающее свечение.
Спасибо за то, что дочитали до конца, а еще лучше — проделали ради фана это всё в фигме!) Также можно настроить анимацию движения эллипсов при наведении, но это, если захотите, в другой серии. :)
Уровень самоубийств среди верстальщиков увеличился.
А где красивая кнопка?
Дело вкуса?
а как это верстать простите?
Сказать дизайнеру, чтобы он переделал эти эффекты с помощью круговых градиентов, а потом наложить их как фоны у :before и :after
С помощью тега svg и далее css свойства для эффектов