Привет! Чтобы добавить в копилку скилов манипуляции со слоями в 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 свойства для эффектов
Вариант 1 - Экспортнуть фрейм кнопки в .svg
Вариант 2 - Если при использования варианта 1 - возникнут проблемы с блюрами, то экспортнуть фрейм кнопки в .png x3
красивая кнопка
@
600 строк css
а мне понравилось, спасибо. Повторила ))
Анимация в следующей статье)
Какая-то странная реакция, странное недовольство. Не хочешь делать эту работу - ее сделает другой.
Возможно, она и правда диковатая в плане разработки, но соглашусь со вторым предложением. Сегодня это дико, а завтра ты видишь это на сайте
Представил весь сайт в таких кислотных кнопках)
Такие можно сделать СТА, а второстепенные без прдсведки. В таком случае будет ок, согласен
Комментарий удален модератором
Можно без «мигалок», а с плавными перетеканиями из одного цвета в другой
Ну эта кнопка очень простая для версткия у нее всего одно состояние, можно просто как png сохранить, и верстать кнопку как изображение с переходом по клику.
Правда можно порассуждать над тем, стоит ли кнопку у которой одно состояни, назвать кнопкой?
Можно снять в пнг подсвечивание, и аналогично сделать ей ховер)