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

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

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

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

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

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

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

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

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

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