Dream Sequence Flow
0 viewshard
Background:
1
Dream Sequence Flow
0 viewshard
Background:
Dream Sequence Flow
1
Was this helpful?
What is inside Dream Sequence Flow
Dream Sequence Flow is a CSS checkbox built with a keyframe animation, gradient fills, a blurred backdrop, defined in 102 lines across 19 selectors.
26
CSS properties
19
Selectors
102
Lines of CSS
2
Formats
Techniques used
Keyframe animationTransitionsTransformsGradientsBackdrop blurChecked stateFlexbox
Animations defined: dream-floatdream-twinkledream-ripple
CSS properties in this component
align-itemsanimationanimation-delaybackdrop-filterbackgroundborderborder-radiusbottomcolorcursordisplayfont-weightgapheightinputjustify-contentleftopacityoverflowpositionrighttoptransformtransitionuser-selectwidthAccessibility check2 to fix
- No focus style is defined. Add one before shipping, or keyboard users lose track of position.
- Animates without a prefers-reduced-motion guard. Wrap the animation in that query if motion sensitivity matters to your audience.
Browser support notes
- Backdrop filter needs a -webkit- prefix on older Safari.
These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in CSS, Tailwind and adapt it freely.