CSS-live.ru

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

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

Солнечная система на CSS

Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»).
Технологии: CSS, CSS-анимация, CSS-трансформации.
Автор: Джейми Коултер (@jcoulterdesign)

Солнечная система на CSS Посмотреть живой пример


Дом с растущей крышей

Тяните за крышу вверх или вниз для изменения количества этажей.
Технологии: CSS, CSS-гриды, JS, jQuery.js.
Автор: creme (@creme)

Дом с растущей крышей Посмотреть живой пример


Трехмерная мозаика из шестиугольников

Технологии: Three.js, hex-grid.js, TweenMax.js.
Автор: Иван Хуарес Н. (@radixzz)

Трехмерная мозаика из шестиугольников Посмотреть живой пример


Кнопка скрытия/отображения пароля на CSS

Нажмите на кнопку-глаз.
Технологии: CSS.
Автор: n7best (@n7best)

Анимация Старцы по мотивам Лавкрафта Посмотреть живой пример


Картины Мондриана на CSS-гридах

Картины поворачиваются в зависимости от положения курсора на них.
Технологии: CSS, CSS-гриды, CSS-трансформации, jQuery.js, GSAP.
Автор: Питер Барр (@petebarr)

Картины Мондриана на CSS-гридах Посмотреть живой пример


Анимированный портрет с треугольниками

Технологии: SVG, canvas, JS, Perlin.js.
Автор: Микаэль Айналем (@ainalem)

Анимированный портрет с треугольниками Посмотреть живой пример


Песочница для свойств типографики

Можно менять длину и высоту строки, выравнивание, количество колонок. Все эти свойства отображаются также в виде CSS-кода.
Технологии: CSS-гриды, mix-blend-mode.
Автор: Ли Вера (@leaverou)

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


Растительная рамка у фото

Кликом меняется фото и заново запускается анимация.
Технологии: SVG, JS, GSAP.
Автор: Стив Гарднер (@steveg3003)

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


Анимация подчеркивания пунктов меню

Технологии: CSS, JS.
Автор: Коллин Смит (@cmdeveloped)

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


Переключатель в виде лампочки

Технологии: CSS.
Автор: Джон Кантнер (@jkantner)

Переключатель в виде лампочки Посмотреть живой пример


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

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

1 комментарий

  1. Трёхмерная мозаика красива, а также интересна идея с визуальным изменением свойств текста.

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

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

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