В прошлых статьях я рассматривал тему реализации псевдослучайности в CSS при помощи операции целочисленного деления и использовал простые числа для создания автоматического счётчика, при помощи которых можно генерировать разные значения для каждого объекта. Благодаря этому мы можем вычислять псевдослучайные значения для каждого элемента по отдельности.

Несмотря на надёжность этого решения, оно имеет и недостатки:



Функция деления с остатком не непрерывна

Способ слишком сложен: он требует трёх переменных и определения @property для каждого случайного значения, которое мы хотим сгенерировать

Требует применения @property, которое пока поддерживается не очень широко


К счастью, можно сделать лучше! В этой статье я предложу более оптимальное решение на основе тригонометрии.
Читать дальше →
[Перевод] А есть ли случайные числа в CSS?

CSS позволяет создавать динамические макеты и интерфейсы в Интернете, но как язык разметки он является статическим —...

Подробнее
О свойстве CSS "background"

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

Подробнее
[Перевод] Рисуем верёвку в формате SVG при помощи JavaScript

Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки. Вы...

Подробнее
[Перевод] Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

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

Подробнее
[Перевод] Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

В третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи...

Подробнее
React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями