CSS-live.ru

Cтатьи по тегу «SVG»

Уроки CSSbattle

5

В начале апреля появилась затягивающая и познавательная онлайн-игра для верстальщиков — CSSbattle.dev. Вашего покорного слугу угораздило «влипнуть» в нее практически с самого начала (и даже пару раз какое-то время побыть в самом топе:). Это был интересный и поучительный опыт, которым хочется поделиться.

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

1

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

«Мона Лиза» из линий

Технологии: canvas, JS.
Автор: Никита Дубко (@dark_mefody)

Мона Лиза из линий Посмотреть живой пример


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

3

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

WebGL-слайдер с искажением

Технологии: CSS-анимация, Three.js, jQuery.js, Tweenmax.js.
Автор: Аш Торнтон (@ashthornton)

WebGL-слайдер с искажением Посмотреть живой пример


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

0

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

Анимация про дизайнеров на CSS

Технологии: CSS-анимация.
Автор: Юлия Музафарова (@miocene)

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


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

0

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

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

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

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


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

1

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

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

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

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


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

0

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

SVG-рисунок при прокрутке

Технологии: SVG, CSS, jQuery.js, Scrollify.js.
Автор: Али Клейн (@AliKlein)

SVG-рисунок при прокрутке Посмотреть живой пример


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

1

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

Трехмерный городок

Кликом и удерживанием курсора можно «крутить» пейзаж.
Эффектнее смотрится в полностраничном режиме.
Технологии: canvas, JS.
Автор: Дэйв ДеСандро (@desandro)

Трехмерный городок Посмотреть живой пример


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

0

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

CSS-иллюстрация «Спортсменка»

По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)

CSS-иллюстрация Спортсменка Посмотреть живой пример


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

2

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

«Волк Шредингера»

Кликом справа или слева вы изменяете ширину синего блока.
Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).
Автор: Jean (@jeankvd)

Волк Шредингера Посмотреть живой пример


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

0

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

Схема-дерево на CSS и JS

Технологии: CSS, CSS-переменные, Bliss.js.
Автор: Ли Вера (@leaverou)

Схема-дерево на CSS и JS Посмотреть живой пример


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

1

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

Постер к фильму «Соло: Звездные войны»

Внизу можно выбирать персонажа для фона и менять текст.
Технологии: CSS, React.
Автор: Морис Мелчерс (@mephysto)

Постер к фильму Соло: Звездные войны Посмотреть живой пример


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

1

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

Трансформация лошади в дракона

Технологии: CSS, JS.
Автор: Эли Фитч (@elifitch)

Трансформация лошади в дракона Посмотреть живой пример


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

0

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

Эффект с подчеркиванием при наведении на ссылку

Технологии: CSS-анимация.
Автор: Мехмет Бурак Эрман (@mburakerman)

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


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

0

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

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

Праздничная анимация Посмотреть живой пример