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

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

Ползунок в научном стиле

Технологии: SVG, GSAP.
Автор: Крис Ганнон (@chrisgannon)

Ползунок в научном стиле Посмотреть живой пример


Адаптивная таблица с возможностью сортировки данных

Технологии: CSS, JS, jQuery.
Автор: Эрин Э. Салливан (@erinesullivan)

Адаптивная таблица с возможностью сортировки данных Посмотреть живой пример


Демонстрация контрастности текста и фона

Можно менять цвет текста и фона в обоих частях.
Технологии: CSS-переменные, JS.
Автор: Мустафа Энес (@pavlovsk)

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


Эффект наведения на кнопку

Технологии: SVG, CSS, CSS-трансформации.
Автор: Андреас Шторм (@andreasstorm)

Эффект наведения на кнопку Посмотреть живой пример


Тоннели

Технологии: Three.js, GLSL.
Автор: Лиам Эган (@shubniggurath)

Тоннели Посмотреть живой пример


Графический постер на CSS-гридах

Технологии: CSS-гриды.
Автор: Виктория Нинни Бергквист (@vicbergquist)

Графический постер на CSS-гридах Посмотреть живой пример


Анимированные иконки из точек

Технологии: SVG, canvas, jQuery.
Автор: Яхья Рефейа (@YahiaRefaiea)

Анимированные иконки из точек Посмотреть живой пример


Анимированная на CSS страница 404 ошибки

Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Юсуке Накая (@YusukeNakaya)

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


Полосатая иллюстрация

Технологии: canvas, JS.
Автор: Эллиот (@vez)

Полосатая иллюстрация Посмотреть живой пример


Разделение экрана на две части на React

Технологии: SVG, JS, GSAP, React.js.
Автор: Веб-разработчик Роберт ДелВалль (@REDedits)

Разделение экрана на две части на React Посмотреть живой пример


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

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

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

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

Ваш E-mail не будет опубликован

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