Questions tagged [css]
Post a PromptPrompts focused on styling and visual design.
29 prompts
11votes
2answers
2.2kviews
One-shot prompt for a subgrid card layout where every card's footer lines up
I kept getting card grids where the CTA button floated at a different height on every card because each card is its own grid. The naive prompt ("responsive card grid with title, body, button") always
11votes
1answers
1.4kviews
Using :has() to restyle a form layout when a checkbox is toggled, no JS state
I have a shipping form with a "billing address same as shipping" checkbox. Toggling it should collapse the billing fields and shift the layout. I was about to reach for JS class toggling out of habit.
10votes
1answers
1.9kviews
Prompt for a dark-mode pricing table that reads as premium, not a spreadsheet
I build a lot of dark-mode products and pricing tables are where AI output falls apart. The default is three equal cards, a wall of checkmarks, and one card with a garish "Most Popular" badge slapped
10votes
1answers
1.7kviews
Staggered list entrance where items cascade in without a JS timeline library
I wanted a list where items rise and fade in one after another, the classic stagger. My first prompts hardcoded animation-delay per child, which breaks the moment the list length changes, and used a l
10votes
0answers
1.3kviews
Touch bottom-sheet micro-interaction that feels native without a JS animation lib
Building a PWA and the bottom sheet is the make-or-break interaction. The generated versions animated height (janky), had no drag affordance, and snapped instantly instead of easing, so it felt like a
9votes
1answers
1.7kviews
Prompt for a feature section that isn't just a 3-column grid of icon + heading + text
The feature section is where landing pages go to be boring. Every model defaults to the same three-up card grid with a generic icon, a two-word heading, and a sentence of filler. It's instantly forget
9votes
0answers
1.2kviews
GitHub-style contribution calendar heatmap as pure SVG, no library
I wanted the little year-of-squares heatmap for an activity page, but the versions I got either misaligned the weekday rows or started the week on the wrong day, so the whole grid was shifted by one a
9votes
1answers
2.0kviews
Prompt that bakes accessibility into a chart instead of bolting it on later
Our charts passed a visual review and failed an a11y audit hard: color-only encoding, no keyboard access, screen readers announcing a wall of unlabeled paths. Retrofitting was miserable, so I moved th
9votes
1answers
1.6kviews
Fluid type scale with clamp() that stays readable and doesn't overshoot on 4K
Editorial layouts live and die by the type scale. My first prompts gave me clamp() values that looked fine on a laptop but ballooned to absurd sizes on a 32-inch monitor because the preferred vw term
9votes
1answers
2.0kviews
Generative CSS gradient-mesh background that stays subtle behind text
For a poster-style hero I wanted a soft animated gradient mesh, but the usual prompt gives you a seizure-inducing rainbow that makes overlaid text unreadable. The animation also pinned the CPU because
8votes
1answers
2.0kviews
Gemini prompt for an animated gradient hero background that doesn't jank on scroll
I wanted a slow, living gradient behind a hero, the kind that feels expensive. My first attempts animated background-position on a huge gradient and it hitched badly on scroll and cooked laptop fans,
6votes
0answers
665views
SVG line-draw animation for an icon that self-draws once, then holds
I wanted a checkmark that draws itself in on success, the classic stroke-dasharray trick, but every generated version either looped forever, drew at a constant robotic speed, or flashed the fully-draw
6votes
0answers
928views
Container-query-driven component that reflows by its own width, not the viewport
I'm building a media object (avatar + text + actions) that lives in a sidebar, a wide feed, and a narrow modal. Media queries were useless because the component's width has nothing to do with the view
6votes
0answers
973views
Getting a responsive landing layout with real grid instead of 20 stacked flexbox divs
Most models scaffold a landing page as an endless tower of <div class="flex flex-col" wrappers. It works but it's impossible to maintain and the vertical rhythm is always slightly off between sections