10.8K ·GitHub
Что это?
Тщательно подобранная коллекция демо и визуальных эффектов на чистом CSS, разложенная по категориям (вёрстка, тени, градиенты, фильтры, режимы наложения, 3D, анимация, clip-path, SVG) — можно листать ради вдохновения или чтобы освоить конкретный приём CSS.
Тщательно подобранная коллекция демо и визуальных эффектов на чистом CSS, разложенная по категориям (вёрстка, тени, градиенты, фильтры, режимы наложения, 3D, анимация, clip-path, SVG) — можно листать ради вдохновения или чтобы освоить конкретный приём CSS.Это библиотека, которую нужно устанавливать, или просто просматриваемая подборка?Это не библиотека и не пакет — это просматриваемая галерея самостоятельных CSS-демо и сниппетов, сгруппированных по темам; их смотрят и копируют, а не импортируют в проект.
Это не библиотека и не пакет — это просматриваемая галерея самостоятельных CSS-демо и сниппетов, сгруппированных по темам; их смотрят и копируют, а не импортируют в проект.Как посмотреть примеры?У каждой записи есть ссылка на страницу онлайн-превью, где эффект работает вживую и код можно изучить; зеркало на GitHub Pages служит запасным вариантом на случай проблем с сертификатами у основных ссылок.
У каждой записи есть ссылка на страницу онлайн-превью, где эффект работает вживую и код можно изучить; зеркало на GitHub Pages служит запасным вариантом на случай проблем с сертификатами у основных ссылок.Для этих эффектов нужен JavaScript или это чистый CSS?Большинство эффектов реализованы на чистом CSS с трюками вроде псевдоклассов hover, checked и target, имитирующими интерактивность без JS; несколько записей используют CSS-Doodle — инструмент на кастомных элементах для генеративных узоров.
Большинство эффектов реализованы на чистом CSS с трюками вроде псевдоклассов hover, checked и target, имитирующими интерактивность без JS; несколько записей используют CSS-Doodle — инструмент на кастомных элементах для генеративных узоров.Кому пригодится эта коллекция?Она рассчитана на фронтенд-разработчиков и дизайнеров, которым нужны справочные примеры продвинутых CSS-техник (тени, градиенты, 3D-трансформации, режимы наложения), а не готовая библиотека компонентов.
Она рассчитана на фронтенд-разработчиков и дизайнеров, которым нужны справочные примеры продвинутых CSS-техник (тени, градиенты, 3D-трансформации, режимы наложения), а не готовая библиотека компонентов.Что такое CSS-Doodle, упоминаемый в некоторых записях?CSS-Doodle — это кастомный HTML-элемент/инструмент, используемый в нескольких демо для генерации узоров и фонов в стиле генеративного искусства исключительно средствами CSS.
CSS-Doodle — это кастомный HTML-элемент/инструмент, используемый в нескольких демо для генерации узоров и фонов в стиле генеративного искусства исключительно средствами CSS.Почему для одного и того же логотипа, например TikTok/Douyin, есть несколько демо?Автор намеренно показывает несколько разных техник (box-shadow, mix-blend-mode и т. д.), каждая из которых даёт одну и ту же картинку, чтобы наглядно сравнить разные возможности CSS.
Автор намеренно показывает несколько разных техник (box-shadow, mix-blend-mode и т. д.), каждая из которых даёт одну и ту же картинку, чтобы наглядно сравнить разные возможности CSS.Есть ли там и SVG-техники, или только чистый CSS?Да, отдельный раздел про SVG охватывает, например, фильтры feTurbulence и анимации SVG-линий при наведении в сочетании с CSS drop-shadow и blur.
Да, отдельный раздел про SVG охватывает, например, фильтры feTurbulence и анимации SVG-линий при наведении в сочетании с CSS drop-shadow и blur.What are similar projects?iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks
iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks