CSS-live.ru

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

CSS4 не будет… потому что он давно прошел. Встречайте «CSS8»!

7

Хотя мы свыклись с «вечнозеленой», безверсионной природой CSS, иногда хочется каких-то ориентиров. Всё-таки, как ни крути, CSS сегодня, когда во всех основных движках доступны гриды с CSS-переменными — совсем не то же самое, что CSS в каком-нибудь 2012-м, когда даже флексбоксы были туманным будущим. И постоянно растущий зоопарк модулей с уровнями от первого до пятого включительно — причем первые могут быть гораздо новее последних — ясности не добавляет.

Внимательные читатели нашего сайта уже знают, что с 2007 года существует периодически обновляемый документ под названием «CSS Snapshot» (т.е. «снимок» состояния CSS), c лаконичным адресом https://w3.org/TR/css. Один из его разделов называется (ни много ни мало) «Официальным определением CSS». Чем не ориентир?

Еженедельная подборка красивых эффектов на 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)

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