Results for “Visual treatment & accessibility”
Small, practical examples. Search by task or narrow things down below.
Add depth with a box shadow
CSS: Box shadows are painted outside the box without reserving additional layout space.
CSS✓ Tested
Align an image within its content box
CSS: Object-position places the rendered object when fitting leaves spare space or crops an edge.
CSS✓ Tested
Allow pointer input to pass through a decorative overlay
CSS: Pointer-events none excludes the overlay from ordinary pointer hit testing.
CSS✓ Tested
Control the size of a repeated background tile
CSS: Background-size sets the rendered dimensions of each repeated background image.
CSS✓ Tested
Fade an entire element and its descendants
CSS: Opacity applies to the rendered element as a group, including child text.
CSS✓ Tested
Fit an entire image inside a differently shaped box
CSS: Contain preserves the image aspect ratio while keeping all of it visible inside the specified content box.
CSS✓ Tested
Keep a label available without occupying visible layout space
CSS: A clipped one-pixel label remains the input’s accessible name.
CSS✓ Tested
Leave room above a scrolled-to heading
CSS: Scroll-margin offsets scrollIntoView placement so a heading is not flush against the viewport edge.
CSS✓ Tested
Paint a gradient without an image file
CSS: Linear-gradient generates a CSS background image from color stops.
CSS✓ Tested
Round a box’s corners
CSS: Border-radius changes the corner shape without changing its rectangular layout dimensions.
CSS✓ Tested
Bind an accessibility attribute
Bind an accessibility attribute with a standalone Angular component and explicit browser behavior.
Angular✓ Tested
Change visual order without changing DOM order
CSS: Order changes flex painting positions while keyboard and reading order still follow the document.
CSS✓ Tested