Skip to content

Instantly share code, notes, and snippets.

@luxplanjay

luxplanjay/visually-hidden.css

Last active May 21, 2024 17:52
Show Gist options
  • Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.
Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.
Download ZIP
Visually hidden CSS pattern
Raw
visually-hidden.css
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
@Baxtiyorov092
Copy link

oooooo assalomu alekom bratiim qandaysiiz ozbela bormi Uzbekistan

@jasurhaydarovcode
Copy link

what is visually hidded ?please explain to me

@jasurhaydarovcode
Copy link

oooooo assalomu alekom bratiim qandaysiiz ozbela bormi Uzbekistan

bor i'm Uzbek

@wittjeff
Copy link

visually hidden means it can be "seen" by blind people using screen readers, but not by sighted people (no part of the item styled this way is drawn visually, because the clip rect is empty, but this item is still "visible" in the DOM.)

@jasurhaydarovcode
Copy link

visually hidden means it can be "seen" by blind people using screen readers, but not by sighted people (no part of the item styled this way is drawn visually, because the clip rect is empty, but this item is still "visible" in the DOM.)

thanks )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment