Как скрыть блок на странице
{"ops":[{"attributes":{"color":"black","size":"16px"},"insert":"Сегодня я расскажу вам как можно скрыть блок в разметке"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"HTML"},{"attributes":{"size":"16px","color":"green"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Все очень просто, самый простой способ это задать в стилях для нужного блока:"},{"insert":"\n.block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Зачем нам это нужно, например у нас существует страница и при переходе на мобильную версию, мы хотим упростить ее и не показывать данные из какого-то блока, и этот способ может очень нам помочь, достаточно только добавить миксин в стили, с классом нашего блока, например:"},{"insert":"\n@media (max-width: 767px) {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Давайте создадим три блока и уберем один из разметки, средствами "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"CSS."},{"insert":"\n"}]}
See the Pen Block1 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"attributes":{"size":"16px","color":"#000000"},"insert":"Возможно вам пригодится ещё и такой вариант, если к существующему коду мы добавим немного "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"JS"},{"attributes":{"size":"16px","color":"#000000"},"insert":", то при клике по первому блоку у нас будет открываться второй. Для закрытия второго блока кликните по нему. Иногда это бывает очень полезно. "},{"insert":"\n"}]}
See the Pen Blocks 2 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"attributes":{"size":"16px","color":"black"},"insert":"В "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"CSS"},{"attributes":{"size":"16px","color":"black"},"insert":" есть много различных способов сокрытия элементов. Можно установить "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"opacity: 0, visibility: hidden, display: none"},{"attributes":{"size":"16px","color":"black"},"insert":" или задать сверх большие значения при абсолютном позиционировании. При использовании свойства "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"display: none "},{"attributes":{"size":"16px","color":"black"},"insert":"блок полностью сворачивается и как-бы выпадает из разметки, давайте рассмотрим свойство "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"opacity"},{"attributes":{"size":"16px","color":"black"},"insert":", с помощью которого задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним."},{"insert":"\n"},{"attributes":{"size":"16px","color":"black"},"insert":"Если мы наведем курсор на второй блок, то он плавно поменяет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"cursor: pointer"},{"attributes":{"size":"16px","color":"black"},"insert":", показывающее, что с ним можно взаимодействовать."},{"attributes":{"size":"16px","color":"#000000"},"insert":" В следующей статье расскажу еще о нескольких методах сокрытия элементов."},{"insert":"\n"}]}
See the Pen Untitled by Aleksa (@mariamaskina) on CodePen.