{"ops":[{"attributes":{"color":"green","size":"16px","link":"https://programmerblog.ru/article/8"},"insert":"Начало в предыдущей статье."},{"attributes":{"color":"green","size":"16px"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Следующее свойство для скрытия элемента "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"visibility."},{"attributes":{"color":"black","size":"16px"},"insert":" Если установить значение "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"hidden"},{"attributes":{"color":"black","size":"16px"},"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"opacity"},{"attributes":{"color":"black","size":"16px"},"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"transition."},{"attributes":{"color":"black","size":"16px"},"insert":" Дочерние элементы тега со свойством"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: hidden"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"могут быть видны, если им задать свойство "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: visible"},{"attributes":{"size":"16px"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"pointer,"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока."},{"insert":"\n"}]}

{"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"}]}

{"ops":[{"attributes":{"size":"18px","font":"courier","color":"red","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" — это современный богатый совместимый и расширяемый текстовый редактор от известной компании Salesforce.com. «Перо» было разработано с целью избавиться от классического представления о"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"WYSIWYG"},{"attributes":{"size":"18px"},"insert":". На самом деле"},{"attributes":{"size":"18px","color":"red","bold":true},"insert":" "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill "},{"attributes":{"size":"18px"},"insert":"очень гибкий и очень очень модульный. Стоит посмотреть документацию к"},{"attributes":{"size":"18px","color":"green"},"insert":" "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"API"},{"attributes":{"size":"18px"},"insert":", после чего сразу будет понятно, что написан проект по-умному."},{"insert":"\n"},{"attributes":{"size":"18px"},"insert":"После загрузки "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" (смотрите в предыдущей статье) установим "},{"attributes":{"size":"18px","color":"red","font":"courier","bold":true},"insert":"Quill"},{"attributes":{"size":"18px"},"insert":" в наш проект, для этого в "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"Html"},{"attributes":{"font":"courier","size":"18px"},"insert":" "},{"attributes":{"size":"18px"},"insert":"нашей страницы, создадим "},{"attributes":{"size":"18px","color":"green","font":"courier","bold":true},"insert":"form"},{"attributes":{"font":"courier","size":"18px","color":"green"},"insert":"."},{"insert":"\n"}]}

{"ops":[{"attributes":{"size":"18px"},"insert":" "},{"attributes":{"size":"18px","color":"#000000"},"insert":"Главная задача поисковой строки — быстро привести клиентов к тому, что они ищут. Поэтому важно, чтобы пользоваться ею было просто и удобно. Мы еще поговорим о дизайне поисковой строки, в другой статье, но сейчас я расскажу вам, как реализовать поисковую строку на сайте, не подключая сторонние плагины, с помощью "},{"attributes":{"color":"green","size":"18px","font":"courier"},"insert":"PHP"},{"attributes":{"color":"green","size":"18px"},"insert":". "},{"attributes":{"color":"black","size":"18px"},"insert":"Я расскажу вам как написать свой простенький поисковик на примере сайта на "},{"attributes":{"color":"green","size":"18px","font":"courier"},"insert":"Laravel"},{"attributes":{"color":"black","size":"18px"},"insert":"."},{"insert":"\n"}]}