Crystal Faceting
0 viewshard
Background:
1
Crystal Faceting
0 viewshard
Background:
Crystal Faceting
1
Was this helpful?
What is inside Crystal Faceting
Crystal Faceting is a CSS checkbox built with a keyframe animation, gradient fills, transforms, defined in 157 lines across 23 selectors.
27
CSS properties
23
Selectors
157
Lines of CSS
2
Formats
Techniques used
Keyframe animationTransitionsTransformsGradientsShadowsChecked stateFlexbox
Animations defined: crystal-refractfacet-shineray-emitspectrum-flow
CSS properties in this component
align-itemsanimationbackgroundborder-radiusbottombox-shadowclip-pathcolorcursordisplayfont-sizefont-weightgapheightinputjustify-contentleftopacityoverflowpositionrighttoptransformtransitionuser-selectwidthz-indexAccessibility 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
- Complex clip-path shapes were unreliable before Safari 14.
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.