Css стилі способи приховати елемент css
Приховати елементи в css можна, використовуючи стилі CSS безліччю способів. Ти можеш приховати за допомогою установки opacity на 0, visibility на hidden, display на none або встановити крайні значення до самого кінця.
Ви коли-небудь задавалися питанням, чому так багато методів приховування елементів, хоча кінцева мета у них одна?
Але насправді все методи відрізняються один від одного, і їх особливості підкажуть нам коли використовувати той чи інший метод. У даній статті будуть розглянуті лише невеликі відмінності методів, які Ви повинні врахувати при їх використанні, коли хочете користуватися стилями CSS приховати елемент.
1 метод приховуємо елемент за допомогою: Opacity - (непрозорість)
Дана властивість Opacity встановлює прозорість елемента. Він не призначений змінювати саму контурну рамку у елемента. Це означає, що встановивши Opacity до 0, візуально елемент сховається, але як і раніше буде займати своє місце на веб-сторінці і впливати її макет. А також буде реагувати на дію користувача.
Якщо збираєтеся використовувати властивість Opacity для приховування елемента від читання, то це невдалий метод, так як він буде доступний для читання як і інші елементи веб-сторінки, іншими словами ви не відчуєте різницю з використанням Opacity і без нього.
Хотілося б відзначити, що властивість opacity можна анімувати і використовувати кілька відмінних ефектів.
Погляньте на наступне html і css
При наведенні курсора на прихований другий блок, елемент переходить плавно від непрозорості до повної прозорості. Блок має cursor для pointer щоб показати можливість взаємодії.
2 метод приховування елемента за допомогою стилів CSS: Visibility - (видимість)
Наступним властивістю нашого списку - Visibility. встановивши який допоможе приховати наш елемент. Дана властивість, як і opacity як і раніше впливає на макет нашої веб - сторінки. Відмінною рисою є те, що він не буде фіксувати будь-яка взаємодія користувача, коли на елементи встановлено властивість - приховане від користувачів. Елемент буде не доступний для читання з екрану. Дана властивість можна налаштувати, задаючи початкові і кінцеві значення, таким чином перехід між різним станом видимості буде м'яким, плавним, без різкості.
У прикладі можна спостерігати відмінності visibility від opacity
через тег
. всередині тега
Як тільки ви наведете курсор на текс в
3 метод, приховуємо за допомогою: Display - (відображення)
Властивість display приховує елемент в прямому сенсі цього слова. Установка display на none гарантує, що box-model не формується зовсім. Використовуючи цю властивість, при приховуванні елементу, після не залишається порожнього простору. Відмітною залишається той момент, що взаємодія з користувачем неможливо поки стоїть display на none. таким чином доступність для читання буде неможлива, як - ніби цей елемент і не існує.
Всі майбутні наші елементи також приховані. Дана властивість не може бути анимировано, тому переходи між статусами завжди різкі.
Зверніть увагу, що елемент доступний через DOM. Ви можете з ним працювати як з будь-яким іншим елементом.
Подивіться на CSS:
Ви побачите, що у другого блоку є пункт з набором властивостей display. але він залишається невидимим. Це ще одна відмінність між visibility: hidden і display: none. У першому випадку відбувається з встановленим властивістю visibility залишається видимим, це не те що відбувається з display. Всі блоки залишаються прихованими незалежно від певного властивості display.
4 метод, сховаємо за допомогою: Position - (позиціонування)
Використовуючи СSS можна зробити:
У запропонованій демонстрації ілюструється як потрібне переміщення приховує елемент і працює в основному також як і в попередньому прикладі:
Тут основне завдання - встановити негативні крайні верхнє і нижнє значення максимально для довгого зникнення з екрану потрібного елемента. Одним з переваг (потенційний недолік) методу - це те, що вміст - абсолютно позиціонується і Новомосковскется з екрану.
Не можна використовувати даний метод на елементи, які могли б отримати фокус, оскільки може привести несподіваним переходам, при фокусуванні на даному елементі. Цей метод часто використовується для створення користувацьких перемикачів або кнопок радіо.
5 метод, приховуємо елемент за допомогою: Clip-path - (скріплений шлях)
Eще одним із способів приховування елементів - це скріплення їх. Раніше це можна було зробити за допомогою властивості clip. але це застаріле властивість, набагато сучасніше визнано - clip-path.
Майте на увазі, що властивість clip-path. яке використовується нижче, зараз не підтримується в IE.
Якщо використовуєте зовнішні файл SVG в ваших clip-path. підтримування ще більш обмежена (що не відноситься до нижчеперелічених). Властивість clip-path для приховування елементів виглядає так:
Тут можна подивитися дію:
Якщо Ви наведете курсор на перший елемент, це вплине на другий елемент, не дивлячись на те, що він прихований властивістю clip-path. Якщо Ви клацніть на елемент це виведе прихований тип, щоб показати наш елемент, які були там разом. Цей текст залишиться доступним для читання з екрану і ця властивість використовується разом з clip в багатьох сайтах на WordPress.
Навіть, якщо прихований елемент не видно, все елементи навколо працюють також і мають початкові прямокутні розміри. Майте на увазі, що взаємодія користувача як при наведенні так і при кліці неможливо за межами певної області. У нашому випадку це означає, що немає прямого взаємодії користувача з прихованим елементом. Ця властивість може бути анимировано різними способами для створення нових ефектів.
У цій статті було розглянуто 5 методів приховування елементів за допомогою CSS. Кожна властивість відрізняється один від одного, і знаючи, що Ви хочете досягти, можете вже користуватися конкретним властивістю, що досить важливо для веб - розробників.