Summarize this content to 400 words in Persian Lang
می توانید تمام کدها را در این پست در repo Github پیدا کنید.
شما می توانید تصویری را در اینجا بررسی کنید پنهان کردن یک عنصر – CodeSandbox
پنهان کردن یک عنصر
lang=”en”>
charset=”UTF-8″ />
name=”viewport” content=”width=device-width, initial-scale=1.0″ />
http-equiv=”X-UA-Compatible” content=”ie=edge” />
Hiding Elements
rel=”stylesheet” href=”styles.css” />
class=”display-none”>Hiding elements
id=”hidden” hidden>Hiding elements
class=”outside-by-absolute”>Hiding elements
class=”outside-by-relative”>Hiding elements
class=”outside-by-margin”>Hiding elements
aria-hidden=”true”>Hiding elements(for screen reader)
class=”hide-by-opacacity”>Hiding elements
class=”container”>
class=”hidden-element”>This is hidden
class=”covering-element”>Covering the elements
class=”hide-by-clip”>Hiding elements
class=”hide-by-transform”>Hiding elements
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
.display-none {
display: none;
}
.outside-by-absolute {
position: absolute;
left: -9999px;
}
.outside-by-relative {
position: relative;
left: -9999px;
}
.outside-by-margin {
margin-left: -9999px;
}
.hide-by-opacacity {
opacity: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
}
.covering-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.hidden-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.hide-by-clip {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 0px, 0px, 0px);
}
.hide-by-transform {
transform: scale(0, 0);
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
می توانید تمام کدها را در این پست در repo Github پیدا کنید.
شما می توانید تصویری را در اینجا بررسی کنید پنهان کردن یک عنصر – CodeSandbox
پنهان کردن یک عنصر
lang="en">
charset="UTF-8" />
name="viewport" content="width=device-width, initial-scale=1.0" />
http-equiv="X-UA-Compatible" content="ie=edge" />
class="display-none">Hiding elements
id="hidden" hidden>Hiding elements
class="outside-by-absolute">Hiding elements
class="outside-by-relative">Hiding elements
class="outside-by-margin">Hiding elements
aria-hidden="true">Hiding elements(for screen reader)
class="hide-by-opacacity">Hiding elements
class="container">
class="hidden-element">This is hidden
class="covering-element">Covering the elements
class="hide-by-clip">Hiding elements
class="hide-by-transform">Hiding elements
.display-none {
display: none;
}
.outside-by-absolute {
position: absolute;
left: -9999px;
}
.outside-by-relative {
position: relative;
left: -9999px;
}
.outside-by-margin {
margin-left: -9999px;
}
.hide-by-opacacity {
opacity: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
}
.covering-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.hidden-element {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.hide-by-clip {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 0px, 0px, 0px);
}
.hide-by-transform {
transform: scale(0, 0);
}
