Ring Prepulsion

Создано на canvas и JS.

#js

Infinity

Создано на HTML и SCSS. Анимировано при помощи CSS keyframes.

#css

JavaScript. Задача

Преобразуйте строку по таким правилам:

1) Изменить регистр каждого символа, т.е. нижний регистр в верхний, верхний - в нижний. Например, 'FizzBuzz' -> 'fIZZbUZZ'.
2) Изменить порядок слов на обратный. Например, 'pen pinapple apple PEN' -> 'pen APPLE PINAPPLE PEN'.

Примечание:
Количество пробелов должно быть сохранено. Например, для строки 'js css html':
- 'HTML CSS JS' - неправильный вариант
- 'HTML CSS JS' - правильный вариант

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

Выходные данные: преобразованная строка.

Ответ

Scroll Reveal

В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент.

#js

​Как нарисовать квадрат 3 × 3 см на веб-странице

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

#ru

Card Hover Interactions

Анимация при наведении на карточки, написана на чистом CSS.

#css

Rainbolt

Создано и анимировано с использованием библиотеки P5.js

#js

JavaScript. Что будет выведено в консоль?

Ответ

​Получение размера окна на чистом CSS

Вы не поверите, но теперь в CSS можно определять свойства, выполнять математические вычисления и даже напрямую получать размер окна! В этой статье мы расскажем вам, как это делается.

#ru

Pure CSS Tabs

Боковое скользящее меню. Написано на чистом CSS.

#css

Progress Button

Кнопка состоит из нескольких svg, анимируемых библиотекой anime.js

#js