Как скрыть блок на странице (продолжение)
Алекса

Как скрыть блок на странице (продолжение)

Главная > Блог > Статья

Как скрыть блок на странице (продолжение)

{"ops":[{"attributes":{"underline":true,"bold":true},"insert":"(Начало в предыдущей статье."},{"attributes":{"bold":true},"insert":") "},{"insert":"Следующее свойство для скрытия элемента visibility. Если установить значение "},{"attributes":{"bold":true},"insert":"hidden"},{"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"bold":true},"insert":"opacity"},{"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"bold":true},"insert":"transition"},{"insert":". Дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство "},{"attributes":{"bold":true},"insert":"visibility: visible"},{"insert":". \nПроведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer, и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока. \n"}]}

See the Pen block 5 by Aleksa (@mariamaskina) on CodePen.

{"ops":[{"insert":"Ну и конечно же мы можем скрыть элемент с помощью абсолютного позиционирования. Данное свойство может быть полезно, если нам нужен такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных выше свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. Ниже вы можете вернуть 2 блок в статическое положение кликом на первый и убрать кликом на третий.\n"}]}

See the Pen block6 by Aleksa (@mariamaskina) on CodePen.

{"ops":[{"insert":"И еще один способ о котором я хотела бы вам рассказать clip-path способ обрезки, кроме того с помощью этого способа мы можем скрывать элементы не только полностью, но и частично, но необходимо помнить, что clip-path не полностью поддерживается в IE и Edge, особенно если использовать внешний файл. \nДавайте теперь посмотрим, что у нас получилось. Второй и третий блоки скрыты полностью, четвертый и пятый частично. Для того, чтобы увидеть полностью скрытые блоки кликните на первый блок, чтобы скрыть на пятый.\nЭто все, что я хотела рассказать в этой статье.\n\n"}]}

See the Pen Block 7 by Aleksa (@mariamaskina) on CodePen.

Другие статьи этого автора

Алекса
07.06.2023

Дизайн поисковой строки (продолжение2)

Алекса
07.06.2023

Дизайн поисковой строки (продолжение)

Алекса
01.06.2023

Создание модального окна в Laravel с помощью Livewire

Алекса

___________________

Буду благодарна за оказание любой финансовой помощи на развитие сайта

___________________

___________________

___________________