Полупрозрачный бублик, 3D-сапёр и электрорамка: самые интересные CSS-демки в январе

Посмотрели за вас в интернете и заботливо отобрали самые интересные демки на CSS и JavaScript.

Электрическая рамка

Эффект, который мы не могли и представить даже пять лет назад. Современный веб продвинулся далеко вперёд и теперь, кроме отрицательных углов возможны и вот такие эффекты.

See the Pen Electric Border by Bálint Ferenczy (@BalintFerenczy) on CodePen.

Полупрозрачный бублик

После анонса Liquid Glass от Apple все фронтендеры бросились реализовывать этот эффект. У кого-то получается лучше, у кого-то хуже, а здесь мы видим переосмысление концепции. Получился интересный эффект искажения текста под вращающимся бубликом, еще и с искажениями. Автор использовал Three.js, получилось здорово.

See the Pen Torus Glass by Daniel Muñoz (@daniel-mu-oz) on CodePen.

Игра «Сапёр»

Если вы застали интернет 20 лет назад, то знаете, что его почти и не было. Зато на всех компьютерах были обязательный «Сапёр» и пасьянс «Косынка». Сейчас, наверное, почти никто в «Сапёр» не играет, но если вдруг появится желание, то есть красивая (и познавательная) онлайн-версия на CSS и JS, еще и доступная для изучения. Из интересных решений — aspect-ratio: 1/1 для оквадрачивания ячеек, will-change: transform для оптимизации анимаций и backdrop-filter: blur для лёгенькой имитации стеклянного эффекта на фоне ячеек. Вращение 3D-доски тоже непростое:

transform: rotateX(55deg) rotateY(0deg);
transform-style: preserve-3d;
perspective: 1000px;

В общем, есть, что потыкать.

See the Pen Puzzle Play - Tron Minesweeper by ikrProjects (@ikrprojects) on CodePen.

Принципы неоморфизма

Неоморфизм — занятный визуальный стиль, о котором много говорили до появления Liquid Glass. Основной эффект неоформизма в иллюзии трёхмерности, которой на самом деле нет. То есть, грубо говоря, это скевоформизм (помните, был такой?) с добавленным объемом.

Много говорить не будем, смотрите демо, лучше тысячи слов.

See the Pen Neumorphism principles by Pedro Ondiviela (@Pedro-Ondiviela) on CodePen.

Отрицательные углы

«Negative border radius» или «inverted border radius» — это популярный интерфейсный паттерн. Если вы никогда с ним не встречались — вам повезло. Он бесит всех верстальщиков, потому что реализовывать его — сложно. Приходится писать море кода с позиционированными псевдоэлементами или использовать SVG. С библиотекой Nebo.css от HTML Academy это очень легко. Тыкайте в кнопку и попробуйте интерактивную демку.

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