{"id":13588,"url":"\/distributions\/13588\/click?bit=1&hash=c4e99935d6b377960319c62e0c7dc30b541ffc5c218860b8308fee5adbfdcd9f","title":"\u0418\u043d\u0444\u0435\u0441\u0442\u0441\u043e\u0432\u0435\u0442 \u2116134 \u2014 \u043a\u0443\u043f\u0438\u0442\u044c \u0434\u043e\u043b\u044e \u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u043e\u043c \u0446\u0435\u043d\u0442\u0440\u0435","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"48b43026-aa57-59b3-94fc-8d140389b616","isPaidAndBannersEnabled":false}
Дизайн
Лунный сквер

Поясняю за кнопку

Привет! Чтобы добавить в копилку скилов манипуляции со слоями в 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 (по центру).

Результат: У нас получилась святящаяся кнопка, у которой внутренние эффекты подсвечиваются снаружи, как бы создавая затухающее свечение.

Результат Валя Джазиков

Спасибо за то, что дочитали до конца, а еще лучше — проделали ради фана это всё в фигме!) Также можно настроить анимацию движения эллипсов при наведении, но это, если захотите, в другой серии. :)

0
17 комментариев
Написать комментарий...
Неврозы Будды

Уровень самоубийств среди верстальщиков увеличился.

Ответить
Развернуть ветку
Денис Козуб

А где красивая кнопка?

Ответить
Развернуть ветку
Валентин Кротов

Дело вкуса?

Ответить
Развернуть ветку
Денис Бессонов

а как это верстать простите? 

Ответить
Развернуть ветку
Never Again

Сказать дизайнеру, чтобы он переделал эти эффекты с помощью круговых градиентов, а потом наложить их как фоны у :before и :after 

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Maxim Fringe

С помощью тега svg и далее css свойства для эффектов

Ответить
Развернуть ветку
Peoneer Carrozzeria

Вариант 1 - Экспортнуть фрейм кнопки в .svg
Вариант 2 - Если при использования варианта 1 - возникнут проблемы с блюрами, то экспортнуть фрейм кнопки в .png x3 

Ответить
Развернуть ветку
Глеб Богачев

красивая кнопка
@
600 строк css

Ответить
Развернуть ветку
Екатерина Спивак

а мне понравилось, спасибо. Повторила ))

Ответить
Развернуть ветку
Лунный сквер
Автор

Анимация в следующей статье)

Ответить
Развернуть ветку
Андрей Крамарь

Какая-то странная реакция, странное недовольство. Не хочешь делать эту работу - ее сделает другой.

Ответить
Развернуть ветку
Лунный сквер
Автор

Возможно, она и правда диковатая в плане разработки, но соглашусь со вторым предложением. Сегодня это дико, а завтра ты видишь это на сайте

Ответить
Развернуть ветку
Vsevolod Koshur

Представил весь сайт в таких кислотных кнопках) 

Ответить
Развернуть ветку
Лунный сквер
Автор

Такие можно сделать СТА, а второстепенные без прдсведки. В таком случае будет ок, согласен

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Hungry Designer

Можно без «мигалок», а с плавными перетеканиями из одного цвета в другой

Ответить
Развернуть ветку
Aleksei

Ну эта кнопка очень простая для версткия у нее всего одно состояние, можно просто как png сохранить, и верстать кнопку как изображение с переходом по клику.

Правда можно порассуждать над тем, стоит ли кнопку у которой одно состояни, назвать кнопкой?

Ответить
Развернуть ветку
Лунный сквер
Автор

Можно снять в пнг подсвечивание, и аналогично сделать ей ховер)

Ответить
Развернуть ветку
Читать все 17 комментариев
null