[Illustration Name]

` element and pure CSS. Based on Lynn Fisher's "A Single Div" technique. - Author: hoangleitvn - Repository: hoangleitvn/mymind - Version: 20260207144324 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-07 - Source: https://github.com/hoangleitvn/mymind - Web: https://mule.run/skillshub/@@hoangleitvn/mymind~single-div-css:20260207144324 --- # Single Div CSS Art Skill Create complex illustrations using only one HTML `

` element and pure CSS. Based on Lynn Fisher's "A Single Div" technique. ## When to Use This Skill Activate when user requests: - "create single div art" - "CSS illustration" - "single div infographic" - "CSS-only visual" - "pure CSS drawing" - Any visual that should be code-based (not image files) ## The Single Div Technique **Core Concept**: One `

` gives you 3 visual layers: 1. The `div` itself (main element) 2. `::before` pseudo-element 3. `::after` pseudo-element **Building Blocks**: - **Gradients** (linear, radial, conic) - the primary "paint" - **Box-shadow** - duplicate shapes, create outlines, add depth - **Border-radius** - organic shapes, circles, pills - **Background layering** - stack 15-50+ gradients for complexity - **Transforms** - rotate, scale, position elements - **Animations** - keyframes for motion, transitions for hover ## Workflow ### Phase 1: Analyze Understand what visual is needed: - What is being illustrated? (object, concept, data, scene) - What style? (minimal, detailed, realistic, abstract) - What mood/tone? (professional, playful, serious) - Animated or static? - Brand colors needed? ### Phase 2: Decompose Break the visual into 3 layers: ``` ┌─────────────────────────────┐ │ ::after (top layer) │ ← Details, accents, overlays ├─────────────────────────────┤ │ ::before (middle layer) │ ← Secondary shapes, backgrounds ├─────────────────────────────┤ │ div (base layer) │ ← Primary shape, main structure └─────────────────────────────┘ ``` Plan which elements go on which layer. Consider: - Z-order (what's in front/behind) - Complexity distribution - Animation requirements ### Phase 3: Build Layer gradients strategically: ```css .illustration { /* Base shape */ width: 200px; height: 200px; background: /* Layer 1: foreground details */ radial-gradient(...), /* Layer 2: middle elements */ linear-gradient(...), /* Layer 3: background */ linear-gradient(...); background-size: ..., ..., ...; background-position: ..., ..., ...; } ``` Use box-shadow for copies: ```css box-shadow: 20px 20px 0 #color, /* Copy at offset */ -20px 20px 0 #color, /* Another copy */ inset 0 0 10px #shadow; /* Inner shadow */ ``` ### Phase 4: Brand (Optional) Apply BTL design tokens if branding needed: ```css :root { --btl-jade: #00a86b; --btl-charcoal: #1f2937; /* See brand-integration.md for full tokens */ } ``` ### Phase 5: Output Generate complete HTML file: ```html [Illustration Name]

``` ## Reference Files - **techniques.md** - Core CSS patterns and syntax - **animation.md** - Keyframe and transition patterns - **brand-integration.md** - BTL design tokens - **patterns/** - Ready-to-use code snippets by category: - `shapes.md` - Basic geometric shapes - `icons.md` - Common icons and symbols - `data-viz.md` - Charts, graphs, indicators - `metaphors.md` - Iceberg, pyramid, layers - `characters.md` - Humans, animals, figures - `scenes.md` - Landscapes, environments ## Guidelines ### Do - Start simple, add complexity incrementally - Use CSS variables for repeated colors - Test in browser frequently - Comment complex gradient stacks - Use `background-size` and `background-position` for precise control ### Don't - Don't use more than one div (that's the constraint!) - Don't forget `content: ''` on pseudo-elements - Don't forget `position: absolute` on pseudo-elements - Don't overcomplicate - sometimes simple is better ### Complexity Levels | Level | Gradients | Use For | |-------|-----------|---------| | Simple | 1-5 | Icons, basic shapes | | Medium | 5-15 | Infographic elements, simple scenes | | Complex | 15-30 | Detailed illustrations, characters | | Expert | 30-50+ | Photorealistic scenes, complex art | ## Example: Simple Circle ```css .circle { width: 100px; height: 100px; background: radial-gradient(circle, #00a86b 70%, transparent 70%); } ``` ## Example: Iceberg (BTL Brand) ```css .iceberg { width: 200px; height: 300px; background: /* Sky */ linear-gradient(to bottom, #87ceeb 0%, #87ceeb 33%, transparent 33%), /* Water surface */ linear-gradient(to bottom, transparent 33%, #1e90ff 33%, #1e90ff 35%, transparent 35%), /* Above water (20%) */ linear-gradient(to bottom, transparent 20%, white 20%, white 33%, transparent 33%), /* Below water (80%) */ linear-gradient(to bottom, transparent 35%, rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 95%, transparent 95%), /* Deep water */ linear-gradient(to bottom, transparent 33%, #0066aa 33%); } ``` ## Troubleshooting | Issue | Solution | |-------|----------| | Pseudo-element not showing | Add `content: ''` and `position: absolute` | | Gradient not visible | Check `background-size` isn't 0 | | Shapes misaligned | Use `background-position` for precise placement | | Animation choppy | Use `transform` instead of position properties | | Colors bleeding | Add `transparent` stops between colors |