Usefuldevtools.com
☕

Holographic Display

0 viewshard
Background:
Holographic Display
1
2
3
4
5
6
7
8
9
<div class="holographic-container">
  <input type="checkbox" />
  <div class="holographic-checkmark">
    <div class="holo-surface"></div>
    <div class="interference-pattern"></div>
    <div class="holo-check">✓</div>
  </div>
  <span class="holographic-label">Hologram Active</span>
</div>
Was this helpful?

What is inside Holographic Display

Holographic Display is a CSS checkbox built with a keyframe animation, gradient fills, a blurred backdrop, defined in 98 lines across 13 selectors.

30
CSS properties
13
Selectors
98
Lines of CSS
3
Formats

Techniques used

Keyframe animationTransitionsTransformsGradientsShadowsFiltersBackdrop blurChecked stateFlexbox

Animations defined: holo-shiftinterference-flicker

CSS properties in this component

align-itemsanimationbackdrop-filterbackgroundbackground-imagebackground-positionbackground-sizeborderborder-colorborder-radiusbox-shadowcolorcursordisplayfilterfont-sizefont-weightgapheightinputinsetjustify-contentopacityoverflowpositiontext-shadowtransformtransitionuser-selectwidth

Accessibility check2 to fix

  • Built on a native <input> 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.