CSS | Имитация рандома

Элементы не могут действовать случайным образом в CSS, но этого можно достичь с помощью сложной формы анимации.

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

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

CSS | Вариативные шрифты

Вариативные шрифты - это технология, благодаря которой один-единственный шрифтовой файл ведет себя как бесконечное множество начертаний.

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

Подробности в статье, а в песочнице наглядно показана работа с такими шрифтами.

league/csv

League/CSV - отличная библиотека для работы с файлами в формате CSV, не привязанная к фреймворкам. Имеет простое и понятное API, позволяет как читать так и писать CSV файлы.

Устанавливается одной командой composer require league/csv и не требует дополнительной настройки.

Сервис для подключения иконок

Подключение иконок иногда сложнее, чем должно быть. SVGBox позволяет добавлять иконки в ваш проект с помощью простых тегов. Идея сервиса заключается в том, что включение значков должно быть таким же простым, как копирование и вставка.

SVGBox в настоящее время имеет 10 наборов значков и 3 405 значков. Коллекция постоянно пополняется и улучшается.

Синтаксис url иконки

https://s.noscriptbox.net/$ICONSET.noscript?fill=$FILL_COLOR&ic=$ICON

Пример подключения

<img src="https://s.noscriptbox.net/hero-solid.noscript?fill=red&ic=heart" width="32" height="32">

Как стать фронтендером в 2021?

✅ Выучить Angular, React или Vue

✅ Выйти на продвинутый уровень по верстке

✅ Прокачаться по Javanoscript

✅ Освоить английский для IT-шников

Успеешь все?

С курсом "Профессия Frontend-разработчик" от Skillbox точно успеешь,
да еще и по новогодней акции со скидкой 60%

CSS | Scroll Snap слайдеры без js

CSS Scroll Snap позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу.

Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса.

Свойство хорошо поддерживается браузерами.