Holographic Display Checkbox
0 viewshard
Background:
1
2
3
4
5
6
7
<label class="holographic-display-container">
<input type="checkbox" />
<div class="holographic-display-checkmark">
<div class="holographic-display-scanline"></div>
<div class="holographic-display-icon">◇</div>
</div>
</label>Holographic Display Checkbox
0 viewshard
Background:
Holographic Display Checkbox
1
2
3
4
5
6
7
<label class="holographic-display-container">
<input type="checkbox" />
<div class="holographic-display-checkmark">
<div class="holographic-display-scanline"></div>
<div class="holographic-display-icon">◇</div>
</div>
</label>Was this helpful?
What is inside Holographic Display Checkbox
Holographic Display Checkbox is a CSS checkbox built with a keyframe animation, gradient fills, a blurred backdrop, defined in 64 lines across 11 selectors.
27
CSS properties
11
Selectors
64
Lines of CSS
3
Formats
Techniques used
Keyframe animationTransitionsTransformsGradientsShadowsBackdrop blurChecked stateFlexbox
Animation defined: holographic-scan
CSS properties in this component
align-itemsanimationbackdrop-filterbackgroundborderborder-colorborder-radiusbox-shadowcolorcursordisplayfont-sizegapheightinputjustify-contentleftopacityoverflowpositionrighttoptransformtransitionuser-selectwidthz-indexAccessibility check2 to fix
- Built on a native <label> element, so keyboard focus and screen reader semantics work without extra attributes.
- 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 HTML, CSS, Tailwind and adapt it freely.