Бесконечный CodePen. 9 демок для тех, кто любит делать красиво

Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.

Accent-color w/custom properties

Начнём с простого и будем постепенно разгоняться. Здесь у нас стилизация чекбоксов с помощью кастомных свойств. Изящное решение, с которым проще всего разобраться.

See the Pen Accent-color w/custom properties [updated] by Michelle Barker (@michellebarker) on CodePen.

Lotsa Notifications

Красивые всплывающие уведомления с разными наборами кнопок и стилизацией. Подойдут и для уведомления о завершении загрузки, и о неотправленном письме, и о сработавшем будильнике.

See the Pen Lotsa Notifications by Jon Kantner (@jkantner) on CodePen.

Login Form with floating placeholder and light button

Как следует из названия, форма входа на сайт со светящейся кнопкой и плейсхолдером, который сдвигается при клике.

See the Pen Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani) on CodePen.

Candy Color Button Animation

Два десятка анимированных кнопок на чистом CSS. Градиенты, анимация при наведении, перекраска, вращение и другие эффекты.

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.

Buttons. CSS Hover

Ещё немного кнопок — на этот раз hover-эффекты во всей красе.

See the Pen Buttons. CSS Hover by Marina Osadcha (@Marina_Os) on CodePen.

Download Button Animation

Кнопок много не бывает — поэтому вот вам ещё. Смешные анимации на кнопке загрузки, напоминающие спуск шторы. HTML, SCSS, JavaScript.

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Social Media Icons with Popups

Последние кнопки на сегодня. Многие могут захотеть встроить себе в портфолио красивую ссылку на Гитхаб или другую соцсеть — теперь можно это сделать с красивой всплывашкой.

See the Pen Social Media Icons with Popups (HTML + Pure CSS Only) by Abdelrhman Said (@abdelrhmansaid) on CodePen.

Impossible Checkbox v2

Наверняка вы видели видео с «невозможной коробкой» — нажимаете на переключатель, а через пару секунд вылезает палец и расщёлкивает кнопку. Наконец-то кто-то сделал это и в вебе — посмотрите, какая прекрасная лапка. Она и замыкает нашу подборку на сегодня.

See the Pen Impossible Checkbox v2 ???? by Jhey (@jh3y) on CodePen.

На этом сегодня всё — если со всеми пенами разбираться внимательно, хватит как раз до следующего выпуска.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.