Еженедельная подборка красивых эффектов на CSS/SVG/JS #56

Подборка свежих эффектов, интересных идей и полезных наработок.

Верстка страницы в стиле комиксов на CSS-гридах

Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)

Часы, цифры которых тоже состоят из цифр Посмотреть живой пример


Анимация с танцующим цветочком

Внизу кнопками можно переключать настроение.
Технологии: CSS, SVG, greensock.js.
Автор: agathaco (@agathaco)

Анимация с танцующим цветочком Посмотреть живой пример


Связка слов в тексте

Слева вверху кнопкой «Random» случайным образом выбираются новые два слова для связки.
Технологии: SVG, JS.
Автор: Блейк Боуэн (@osublake)

Связка слов в тексте Посмотреть живой пример


Имитация инструмента «Ластик» в режиме наложения программы Photoshop

Технологии: canvas, JS.
Автор: Карло Видек (@karlovidek)

Имитация инструмента Ластик в режиме наложения в программе Photoshop Посмотреть живой пример


Младенец на CSS

Технологии: CSS трансформации и анимация.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

Младенец на CSS Посмотреть живой пример


Офис в ночное время

Курсором-фонариком можно освещать участки помещения.
Технологии: CSS, SVG, React.js, GSAP.js.
Автор: Челси Адамс
(@chadamski)

Офис в ночное время Посмотреть живой пример


Джон Сноу на CSS

Рисунок персонажа из «Игры престолов».
Технологии: CSS.
Автор: Рахаф Шора (@Rofy)

Джон Сноу на CSS Посмотреть живой пример


Процесс рисования наброска

Технологии: SVG, CSS анимация.
Автор: Карпе Нумидиум (@carpenumidium)

Анимация костра на CSS  Посмотреть живой пример


«Счастье — это когда твой код запускается без ошибки»

Технологии: CSS трансформации и анимация.
Автор: Ниражан Баснет (@Nirajanbasnet)

Счастье - это когда твой код запускается без ошибки Посмотреть живой пример


Фотогалерея на CSS с раздвижной панелью на всю ширину

Технологии: CSS, CSS vars.
Автор: Shaw (@shshaw)

Фотогалерея на чистом CSS с развижной панелью на всю ширину Посмотреть живой пример


Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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