# chokcoco/magicCss

CSS3奇思妙想，单标签实现各类图形

Repository: https://github.com/chokcoco/magicCss
Canonical: https://ross.abutalabs.com/products/magiccss
Homepage: https://chokcoco.github.io/magicCss/html/index.html
Language: HTML
License Family: other
Topics: css3, pesudo
Last push: 2020-02-08T15:13:00+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 3758, "days_push": 2398, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1445, forks 288 (observed 2026-08-28T04:04:45.171765+00:00)

## What it is
A curated collection of CSS3 demos showing how to create a wide variety of shapes and visual effects using a single HTML tag. It demonstrates techniques with pseudo-elements, gradients, borders, shadows, and filters, inspired by the book CSS Secrets.

## Use cases
- learn how to draw shapes with pure css
- css single element graphics examples
- create heart or star shapes with css3
- css gradient background patterns examples
- pure css loading spinner and effects
- css pseudo-element before after tricks
- css filter blur contrast water effect demo

## When to choose
- learning advanced CSS3 techniques like gradients, shadows, and pseudo-elements
- looking for copy-paste CSS snippets for decorative shapes and effects
- studying single-tag CSS drawing patterns for inspiration

## When to avoid
- you need a production-ready UI component library or framework
- you want a maintained tool with a license and active releases
- you need cross-browser guaranteed support beyond Chrome

## Facets
- artifact type: learning-resource
- maturity: maintenance
- function: css-framework, ui-components, animation, graphics
- domain: web-development, frontend, web-design, tutorials
- platform: browser
- tags: css3, pseudo-elements, single-tag-graphics, css-tricks, demo-collection, gradients, box-shadow, web-server

## Member repositories
- chokcoco/magicCss (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:45.171765+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:36:13.502048+00:00, confidence not recorded.
  - readme: https://github.com/chokcoco/magicCss (fetched 2026-08-28T04:04:45.171765+00:00, sha 689896d38bbb)
  - homepage: https://chokcoco.github.io/magicCss/html/index.html (fetched 2026-08-29T11:46:05.305867+00:00, sha fc0d0d891166)
- Data as of 2026-08-30T08:39:29.467469+00:00.