Главная » Архив меток: SVG

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

Миллиард способов того, как использовать SVG

От автора: ранее мы рассмотрели, что такое SVG-изображения и почему они отлично подходят для использования в веб-приложениях / на сайтах. В этой статье мы рассмотрим различные способы того, как использовать SVG в браузерах. Данными методами мы располагаем в HTML, CSS и JavaScript. Это будет небыстро, так что возьмите немного содовой (или другой предпочтительный напиток) и поехали. Много кода впереди В ...

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

Уроки CSSbattle

В начале апреля появилась затягивающая и познавательная онлайн-игра для верстальщиков — CSSbattle.dev. Вашего покорного слугу угораздило «влипнуть» в нее практически с самого начала (и даже пару раз какое-то время побыть в самом топе:). Это был интересный и поучительный опыт, которым хочется поделиться. Придумали и реализовали эту игру два друга-тёзки из Индии, фронтендер Кушагра Гур и дизайнер Кушагра Агарвал. Жанр таких развлекательных состязаний называют «code golf»: как в гольфе надо закатить мяч в лунку ...

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

Использование SVG с медиа-запросами

От автора: с помощью HTML-документов мы можем отображать, скрывать или реорганизовать части страницы в зависимости от условий окна просмотра. Если, например, окно браузера имеет ширину 480 пикселей, мы можем изменить панель навигации с горизонтальной на вертикальную. Мы можем сделать что-то подобное, используя медиа запросы CSS и документы SVG. Рассмотрим, например, логотип вымышленной компании Hexagon Web Design & Development ниже. Без ...

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. «Мона Лиза» из линий Крестики-нолики на CSS Портрет Криса Койера Переключатель в виде теннисного мяча CSS-анимация иконок меню Демонстрация работы функции crossfade() UI на чистом CSS Рука-загрузчик на CSS Анимация рукописного текста Мишка-переключатель на CSS Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. WebGL-слайдер с искажением Анимация кнопок выравнивания Интересный дизайн галереи Create.js + Oreo Значки Мстителей Хронологическая лента Перчатка Бесконечности Анимация меню социальных сетей Анимация с лосем Анимированный узор на CSS-гридах Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация про дизайнеров на CSS Лошадь в движении Эдварда Мейбридж Головоломка «Ханойская башня» Цель — переместить все диски с левой «башни» на правую. За один раз можно перемещать только один диск. При этом больший диск нельзя помещать на меньший.Технологии: CSS.Автор: Бенс Сабо (@finnhvman) Посмотреть живой пример Выбор любимого времени дня SVG-переключалка между табами ...

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Ползунок в научном стиле Адаптивная таблица с возможностью сортировки данных Демонстрация контрастности текста и фона Эффект наведения на кнопку Тоннели Графический постер на CSS-гридах Анимированные иконки из точек Анимированная на CSS страница 404 ошибки Полосатая иллюстрация Разделение экрана на две части на React Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. ...

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

Решено с помощью CSS! Колоризация SVG фонов

От автора: CSS становится мощнее. Благодаря функциям типа CSS Grid и пользовательским свойствам (или CSS переменным), мы видим, как развиваются действительно креативные решения. Мы до сих пор не знаем всех возможностей CSS, которые могут упростить написание UI, и это удивительно! Среди этих возможностей сейчас одна из моих любимых в CSS: фильтры. Давайте узнаем, как с помощью фильтров можно решить проблему, ...

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

Анимированный радиальный SVG прогресс-бар

От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой микро-анимации оказались слишком объемными (248k ...

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

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

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

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