visibility: visible ( hidden ) | Как сделать HTML элемент невидимым | CSS
Чем отличаются visibility: hidden; от display: none; и opacity: 0;
Рассмотрим в чём различие нижеперечисленных свойств, какое из них лучше подходит для того, чтобы сделать невидимый блок.
ВНИМАНИЕ! Не все примеры работают в браузере Google Chrome. Мне было лень прописывать свойству animation префиксы -webkit- .
div вложенный
div вложенный
div вложенный
div вложенный
div вложенный
div вложенный
С transform: scale(0, 0); элемент полностью сужен, а значит и недоступен. Он продолжает занимать то же пространство, что и при transform: scale(1, 1); .
С height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML]. Если они не заданы, у блока останется его блочность, иначе говоря, строчные элементы, следующие после него, будут писаться с новой строки. Содержимое тега доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое можно с помощью свойства overflow .
Свойство clip работает только в паре с position: absolute; . При clip: rect(0, 0, 0, 0); элемент обрезан со всех сторон и аналогичен display: none; .
При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.
На CSS можно добиться поставленного результата несколькими способами. Так, например, отображения, аналогичного display: none; , коли добавить position: absolute; или position: fixed; .
навести навести
Как сделать текст невидимым на HTML странице
И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.
Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта:
Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]
В любом случае, нужно прописать изображению атрибут alt . По нему Google тоже передаёт анкорный вес.
Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:
div будет прозрачным div
div будет прозрачным div
Или очень маленьким:
div невидимый текст div
visibility: collapse; для таблицы и нет. Есть ли разница?
visibility: collapse; для всех элементов, кроме тегов таблицы работает аналогично visibility: hidden; , что полезно для долгого transition . Этим способом был реализован этот вариант таб-вкладок.
исчезающий текст
#raz div < visibility: collapse; transition: 0s 999999s; >#raz input:nth-of-type(1):focus ~ div < visibility: visible; transition: 0s; >#raz input:nth-of-type(2):focus ~ divисчезающий текст
visibility: collapse; для тегов tr , col , thead , tfoot , tbody перестраивает таблицу, при этом учитывая размеры удалённых элементов. Не поддерживается Гугл Хром. Для остальных могут быть проблемы, когда между ячейками одна и та же граница.
Если объединить ячейки столбца и строки
Аналогично для col
visibility: hidden; visibility: collapse; display: none;
16 комментариев:
Анонимный Любопытная информация. Спасибо. NMitra Пожалуйста. Возможно я что-то упустила — это всё, что смогла вспомнить. MagentaWAVE NMitra, вы уж меня если что простите, но я понять не могу смысл использовать для простого сокрытия объектов такие свойства как transition, animation и opacity. Зачем тогда display и visibility? И зачем для visibility:hidden — применять position:absolute если есть display:none?
И еще одно, мне почему-то кажется что если нужно точно указать «детеныша» элемента то вместо «+» лучше ставить «>», т.е. не #element:hover + div , а #element:hover > div (Посмотрите примеры в Хроме(последний), у меня чего-то ничего не происходит с DIVом при нажатии на кнопочки)
Кстати, не кажется ли вам, что id лучше применять к единичным элементам на странице, а если однотипных элементов много, то лучше пользоваться class?
Заранее спасибо. MagentaWAVE Простите, каюсь, про то что ничего не происходит погорячился — все нормально. Еще раз простите 🙂 NMitra Посмотрите меню http://shpargalkablog.ru/2012/06/vypadayushcheye-menyu-css.html (заключительный образец, где пункты выезжают). С display его не сделать. Грубо говоря, transition нужен для реализации эффектов, своего рода «украшательства».
Я навожу на элемент и у меня прячется div. Если поставить «>», то будет так: навожу на div и он прячется.
Однозначно, id на странице должен быть только один. В примерах я имела ввиду, что это один и тот же элемент.
Да мне и прощать нечего, это нормальные хорошие вопросы, кот орые могут возникнуть у каждого. MagentaWAVE Спасибо, за пояснения, но как и для чего используется transition я знаю, по-этому и интересовался сутью использования его для скрытия элемента.
«Я навожу на элемент и у меня прячется div. Если поставить «>», то будет так: навожу на div и он прячется.» — это если div не есть дочерним элементом, ну а если у вас в конструкции не один div, а два или три? То скрыт будет только лишь один — последний (если «+») и классы не спасают. Для примера конечно пойдет, но в реале придется «городить».
Урок 21. Скрытый текст с помощью JavaScript и с помощью динамического HTML
Для чего нужен скрытый текст?
Допустим, Вы не хотите отягощать свою страницу обилием какой-либо информации, например, вы хотите, разместить на Главной странице код вашего баннера, чтобы тот, кому понравится ваш сайт, мог поставить его на свою домашнюю страничку, однако, как мы можем догадаться, таких людей среди посетителей может оказаться немного и потому вывешивать код вашего баннера на всеобщем обозрении не имеет смысла. Лучше сделать маленький блок скрытого текста с маленькой, аrкуратной кникабельной надписью: Код нашего баннера. Тот, кому это нужно — нажмёт на надпись и увидит код. И совершенно не нужно на виду у всех выставлять html-потроха вашего баннера. Итак:
Откройте Код нашего баннера , нажав на эту ссылку и посмотрите (если хотите — поставьте у себя).
Код нашего баннера: Выглядит так:
Для того, чтобы действительно разобраться в яваскриптах (или иных каких-то скриптах), нужно потратить немало времени и сил. К тому же, по данным вопросам существует немало учебников и уроков. Поэтому просто приведу здесь два варианта того, как можно сделать скрытый текст на странице. И просто поясню, какой атрибут что обозначает. В будущем, если кому-то из вас понадобится изучить данный вопрос более подробно — вы уже будете иметь представление о том, с чем имеете дело.
Для начала поговорим о том, что для скрытого текста нам понадобится представлять себе, что такое «переменная». Несколько слов о том, что же это такое и почему она так важна
Скрытый текст, который я привела выше, сделан с помощью JavaScript. И вот по какому принципу он работает:
В компьютере все данные сохраняются на диске, в определённом месте, которое помечено, чтобы программа, которая отвечает за извлечение данных, знала, где что искать. Поскольку любой скрипт — это тоже программа, он точно так же работает с данными, под которые должно быть отведено определённое место. В данном случае, не в компьютере, а в коде вашей html-страницы. Поэтому вам необходимо занять место под те данные, которые, к примеру, помещаются в скрытом тексте. И пометить это место, чтобы в нужный момент программа нашла их и вывела на экран.
Переменной помеченный участок будет называться потому, что вы можете вложить в него любые значения, которые в нужный вам момент будут выводиться на экран с помощью скрипта. Нажимаете ссылку — и на экран выводятся те данные, которые вы поместили в скрытый текст. Пока всё просто, не так ли?
В коде нашей программы (скрипта) мы обозначаем нашу переменную каким-либо именем. В языке JavaScript есть некоторые ограничения для создания имён, о которых я здесь говорить не буду. Если вам понадобится скрипт скрытого текста — просто воспользуйтесь тем, что есть. Рассмотрим, из чего состоит наш код скрытого текста.
Весь скрипт будет выглядеть следующим образом: Этот сегмент ставим между
| else > |
А этот сегмент помещаем в то место документа html, между
| скрытый текст Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает. (далее по тексту) Закрыть текст и читать далее. |
Чтобы закрыть текст, необязательно нажимать ссылку «Закрыть текст». Можно вторично нажать первую ссылку. Чтобы нижней ссылки не было, просто уберите её (то есть, саму ссылку Закрыть текст и читать далее.
А следующий скрытый текст сделан без помощи яваскрипта. Не смущайтесь тем, что ссылка на него стоит по центру. Передвинуть её в нужную часть документа можно очень легко, поставив всю конструкцию в соответствующие теги, которые форматируют положение текста на странице.
Здесь у нас скрытый текст, который работает без JavaScript. Для того, чтобы понять, как он работает, читайте далее на странице:
Этот скрытый текст работает на динамическом HTML, или DHTML. Что такое DHTML:
Динамический html (Dynamic HTML) или DHTML — это не какой-то особенный язык для разметки страниц. Это обозначение страниц с динамически изменяемым без обновления страницы содержимым. Состоит DHTML из трёх компонентов: собственно html, элементов каскадных таблиц стилей (CSS) и элементов языка сценариев (JavaScript или VBScript). Эти три компонента связываются между собой, образуя своеобразный интерфейс, который и позволяет вносить в статическую html-страницу динамические изменения без перезагрузки всей страницы.
Весь скрипт, который позволяет внести элемент динамики в вашу html-страницу, вы устанавливаете в нужном вам месте страницы между тегами
Рассмотрим отдельные элементы:
onclick — это событие, которое происходит по нажатию левой кнопкой мыши.
obj — это тот сегмент, который будет содержать всё остальное (сходное с тегом textarea).
this.parentNode.childNodes[1].style (this — это, parent — родитель, Node — узел, child — ребёнок, Nodes — узлы). То есть, мы имеем соотношение между родительским и дочерним узлами, при чём вариант у нас всего один (либо текст, либо его нет).
tmp — могут сослаться на любое из следующих действий
obj.display! — В данном случае акцент на то, какой блок мы видим на экране.
block — то, в чём заключён текст.
none — ничто. То есть, нет никакого текста.
return false — ложный возврат
subblock — на блок, в котором нет текста. То есть, по логике всего кода мы по умолчанию имеем пустое место, которое не читает браузер до тех пор, пока мы не совершим действие — нажмём на ссылку. При повторном нажатии на ссылку мы снова получим якобы пустое место, а на самом деле просто по умолчанию от браузера блокируется та часть текста, которую мы хотим оставить скрытой.
Приведённый мною пример динамического html можно использовать, к примеру, для создания выпадающего меню. Вот такого: Страница сайта с выпадающим меню в левой колонке
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.HTML — показать/скрыть текст
Иногда возникает необходимость вставки кода, позволяющего показать или скрыть слой с картинкой или текстом по клику на кнопку. И хотя в Сети много вариантов подобного решения — бОльшая часть из них использует в своем механизме Java или jquery.
А ведь проблему можно решить и с помощью штатных средств HTML ��
.del:not(:checked) + label + *
/* тут редактируем вид кнопки */
.del:not(:checked) + label,
.del:checked + labeldisplay: inline-block;padding: 2px 10px;border-radius: 2px;color: #fff;background: #4e6473;cursor: pointer;.del:checked + labelbackground: #e36443;Как написать невидимый текст
Желание скрыть часть контента может возникать по разным причинам. Выяснять, для чего скрывают текст, картинки и другие элементы страницы, не станем, лучше узнаем, как написать невидимый текст, спрятать фотографию, баннер, ссылку различными способами. Для реализации большинства методов потребуются минимальные знания в области программирования и HTML-разметки.
Как скрыть текст на сайте
Используем HTML-код
Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.
Используем DHTML
Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.
Скрываем текст на странице в динамическом HTML-коде
Как скрыть текст на странице в DHTML
При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.
Методы скрытия объектов в DHTML
Способы скрытия объектов
Методы скрытия объектов в DHTML
Способы скрытия объектов
Используем JavaScript
Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.
Сначала надо написать функцию, которая будет скрывать контент.
Код функции на JavaScript для скрытия контента
Функция для скрытия контента в JavaScript
Далее в нужном месте кода страницы следует запросить вывод результата работы скрипта.
Вывод результата работы JS-скрипта
Вывод результата работы скрипта
При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.
Ссылка 'Подробнее' в коде страницы на JavaScript
Ссылка 'Подробнее' в JavaScript
Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.
