Архив меток: CSS3

Не упустите из виду переменные CSS

От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но ...

Читать далее »

Добавление крутых эффектов с помощью режимов наложения CSS

От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер. Режим наложения CSS является одним ...

Читать далее »

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

Подборка свежих эффектов, интересных идей и полезных наработок. Бегущая зебра Портреты Анимация «Винтовая линия (Helix)» Трансформация логотипа Красивая анимация с линиями Анимация волны из частиц Анимация с курицей SVG-анимация леттеринг-логотипа Список дел с CSS-анимацией Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

Читать далее »

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

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация «Дуэль» Неоновая вывеска Анимация с авокадо Нужно «схватить» курсором косточку и потянуть в сторону. Предупреждение: анимация сопровождается звуком!Технологии: canvas, CSS, JS.Автор: Себастьян ДеРосси (@derossi_s) Посмотреть живой пример Портрет из текстовой мозаики Создание рисунка из частиц «Нарисуйте» какие-нибудь линии «ручкой», удерживая курсор. После этого нажмите «Create Particles» для генерации частиц.Технологии: canvas, WebGL, particles.js.Автор: ...

Читать далее »

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

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект 3D-печати Нарядный переключатель Ракета в космосе Красивая анимация логотипа Креативное резюме с SVG-анимацией при прокрутке Эффектнее всего выглядит в полностраничном режиме (справа вверху кнопка «Change View» — «Full Page»).Технологии: SVG, CSS-трансформации, CSS-анимация, GreenSock.js.Автор: Ева (@SoyEva) Посмотреть живой пример Праздничный календарь на гридах Рисунок девушки Линии образуют рисунок при загрузке страницы. Чтобы посмотреть ...

Читать далее »

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

Подборка свежих эффектов, интересных идей и полезных наработок. Праздничная анимация Парад солдатиков с параллакс-эффектом Конструктор машины Шестиугольный прогресс-бар Глючный прогресс-бар Автор высмеивает бессмысленные прогресс-бары: когда индикатор вроде и есть, а толку от него ноль.Технологии: CSS-анимация.Автор: Крис Смит (@chris22smith) Посмотреть живой пример Трансформации иконок соцсетей Анимация с кофемашиной Градиентный фон при наведении Оптическая иллюзия Когда уголки квадратов окрашиваются, возникает иллюзия искажения прямых ...

Читать далее »

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

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект с подчеркиванием при наведении на ссылку Оптическая иллюзия с цветными кругами Посмотрите на два круга: кажется, что это голубой и зелёный. На самом деле они одного и того же цвета циан.Технологии: SVG.Автор: Эллиот Гено (@pyrografix) Посмотреть живой пример Трансформации героев фильма «Звездные войны: Последний джедай» из многоугольников Навигация по героям — над портретами, ...

Читать далее »