gitmyhub

iCSS

JavaScript ★ 21k updated 3mo ago

不止于 CSS

A curated collection of 220+ CSS tips, tricks, and creative techniques for animations, effects, and modern web design, organized by topic with live demos.

CSSJavaScriptHTMLSVGsetup: easycomplexity 1/5

iCSS is a long-running Chinese-language collection of CSS tips and tricks maintained by the developer chokcoco. The tagline at the top reads "CSS odd tricks and clever techniques, they're all here." It is not a library or a framework. The whole project is a curated reading list of articles, and each article lives inside a GitHub Issue on the repository. Readers browse the issues, look at the screenshots and animated previews, and read the explanations.

The README describes the scope as CSS and web animation. The author writes about anything they find interesting in that space, from solving practical layout problems to exploring CSS details that often go unnoticed. Each post focuses on a single small topic, usually backed by a code example and an animated GIF or screenshot showing the result. The author mentions that everything is also published on their personal blog at cnblogs.com/coco1s and on their WeChat public account.

Posts are organized by category using GitHub issue labels, and the README opens with a colourful grid of label badges linking directly to each category. The categories cover the building blocks of modern CSS work: Background, Border, clip-path, Mask, Shadow, Shape, blend modes, filters, pseudo-classes, CSS Layout, CSS Functions, CSS Houdini, CSS Variables, new CSS features, CSS-doodle, Modern CSS, animation effects, animation, accessibility, 3D effects, image effects, text effects, border effects, SVG, "odd tricks", performance, general tips, browser-specific features, special interactions, user experience, translations, design, interview questions, and bug notes.

After the label grid, the body of the README is a long numbered list of post titles, each linking to the corresponding GitHub issue. Recent entries (around #220 down to #200 in the list) cover topics like Anchor Positioning for native "magnet snap" effects, complex button shapes with inward smooth rounded corners, multi-line text colour transitions on scroll, the more powerful :nth-child selector, gradient borders, single-side shadows, gradient text effects, card hover effects using blur, a ChatGPT-style typing animation, the new scrollbar-color and scrollbar-width properties, accent-color, automatic text colour against a background, dashed borders with rounded corners, Flex-layout centered-overflow scroll truncation, and various advanced animation walkthroughs. The list goes back through more than 200 numbered entries, making it a deep reference for CSS practitioners who want to learn by browsing real examples.

Where it fits