Как сделать кнопку скрытой
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Кнопки «Закрыть»: паттерны и антипаттерны
На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».
Неудачные паттерны
▍Паттерн №1: элемент div и фоновое изображение
Взглянем на HTML-код, используемый для создания кнопки «Закрыть»:
Проблемы и их решение
Ниже приведён список проблем, которые характерны для данного варианта реализации кнопки «Закрыть». Зная об этих проблемах, можно наметить пути их решения.
▍Паттерн №2: элемент div и иконка
Проблемы и их решение
▍Паттерн №3: иконки из Font Awesome
Проблемы и их решение
▍Паттерн №4: ссылка «Закрыть»
Проблемы и их решение
▍Паттерн №5: ссылка «Закрыть» с текстом
Вот HTML-код этого паттерна:
Проблемы и их решение
▍Паттерн №6: ссылка «Закрыть» без атрибута href
Проблемы и их решение
▍Паттерн №7: ссылка-местозаполнитель и элемент img
Вот HTML-код этого паттерна:
Проблемы и их решение
▍Паттерн №8: радиокнопка
Вот применяемый здесь стиль:
Проблемы и их решение
▍Паттерн №9: кнопка с иконкой
Как обычно, сначала рассмотрим разметку:
Проблемы и их решение
▍Паттерн №10: кнопка с SVG-изображением
Проблемы и их решение
▍Паттерн №11: старый добрый символ X
Вот HTML-код, реализующий этот паттерн:
Проблемы и их решение
Вот CodePen-проект, в котором собраны неудачные паттерны создания кнопок «Закрыть»
Альтернативы неудачным паттернам
▍Решение №1: кнопка с видимым текстом без иконки
Вот разметка, применяема в этом решении:
Особенности
▍Решение №2: кнопка с видимым текстом и с иконкой, скрытой от ассистивных технологий
Особенности
▍Решение №3: кнопка со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий
Вот HTML-код этого решения:
Особенности
▍Решение №4: ещё один вариант кнопки со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий
Особенности
▍Решение №5: использование Font Awesome
Вот, ради полноты изложения, удачный пример кнопки «Закрыть», при создании которой используется Font Awesome:
▍Общие замечания
Иногда имеет смысл использовать метки с более подробными описаниями действий, вроде «Закрыть окно», или «Закрыть галерею», или «Закрыть рекламу».
Если вы применяете решения сторонних разработчиков для оформления модальных окон, диалоговых окон и прочего подобного, пожалуйста, перед включением их в состав своего сайта, поинтересуйтесь тем, как именно реализованы эти решения. Не стоит слепо доверять другим в вопросах качества кода и обеспечения доступности контента.
Здесь можно найти примеры реализации удачных паттернов кнопок «Закрыть».
Как сделаны кнопки «Закрыть», которые используются в ваших проектах?
Похожие публикации
Интересные CSS-находки в дизайне Twitter
Практический пример использования render-функций Vue: создание типографской сетки для дизайн-системы
Руководство по веб-дизайну для разработчиков
Комментарии 55
Они могут выглядеть идентично или почти идентично из-за наличия/отсутствия текста Close
Да ну, это все мелочи. Главный антипаттерн — это когда
Не стоит забывать, что эта кнопка «закрыть» появляется только через N секунд после того как сам поп-ап элемент на экране возникнет.
И на самом деле это не кнопка «закрыть», а очередной «скрыто» спрятанный попандер. А реальная кнопка «закрыть» с другой стороны окна бледным текстом и мелким шрифтом (чтобы никто, не дай бог, не догадался).
Бывает тоньше — кнопка [x] есть сразу, но ровно через N.M секунд примерно соответствующих времени реакции пользователя она прыгает в другую область баннера.
Ну и толсто — тупо реагирующие на мышь и уползапющие тоже встречались.
И потом эти люди жалуются что такие нехорошие пользователи ставят адблок
Это, конечно, было интересное исследование, но вы упустили, на мой взгляд, самый приятный вариант:
1. Делаем попап, внутрь (на одном уровне) кладём кнопку и обёртку контента. В кнопку кладем пустой span, он будет ловить клики вне попапа (ну и/или не только клики).
2. Попапу задаём z-index: 999 (можно больше), кнопке закрыть — z-index: 1, контенту — z-index: 2. Таким образом, всё содержимое кнопки всегда будет ниже содержимого контента
4. Саму кнопку размещаем где хотим.
5. Для span’а задаём фиксированное позиционирование (за счёт чего он забивает на то, что его родитель (кнопка) маленькая, и спокойно примет заданные размеры, а их мы зададим во весь экран).
5. С помощью псевдоэлементов ::before и ::after делаем две полоски, поворачиваем, закругляем углы — делаем вообще всё, что придёт в голову. Размещаем их справа, делаем из них крестик.
6. При наведении на кнопку ставим любое действие с псевдоэлементами, чтобы было красиво. Можно их вращать, скалировать, перекрашивать, добавлять обводки — в общем, делать вообще всё, что в голову взбредет.
Скринридеры читают «Закрыть» внутри кнопки, псевдоэлементы делают красиво, span прикрепляет область вокруг попапа к кнопке.
Пример, сделанный за 15 минут на коленке =)
[Советы] Как спрятать наэкранные клавиши
Заходим в настройки>расширенные настройки>кнопки и жесты>скрыть экранные кнопки. Кому интересно: если приложение не поддерживает формат 18.9 то рядом пункт «полноэкранный режим» и ставим галочку.  |
avatar.png (67.83 KB, Downloads: 0)
2018-03-06 04:20:06 Upload
avatar.png (62.73 KB, Downloads: 0)
2018-03-06 04:20:15 Upload
avatar.png (93.59 KB, Downloads: 0)
2018-03-06 04:20:28 Upload
Вы сейчас угараите? Чтобы с клавами не было экрана 16.9 а было, то за что заплатили 18.9
Mi Comm APP
Получайте новости о Mi продукции и MIUI
Рекомендации
* Рекомендуется загружать изображения для обложки с разрешением 720*312
Изменения необратимы после отправки
Cookies Preference Center
We use cookies on this website. To learn in detail about how we use cookies, please read our full Cookies Notice. To reject all non-essential cookies simply click «Save and Close» below. To accept or reject cookies by category please simply click on the tabs to the left. You can revisit and change your settings at any time. read more
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
[Вопросы] как сделать что бы кнопки навигации с низу экрана скрывались
| Здравствуйте, по какой причине кнопки навигации в низу экрана сами по себе зафиксировались хотя до этого они появлялись и скрывались, без причин теперь просто закрепились и не могу найти где можно вернуть как было |
| мистика, но у меня было также, потом поиграв в какую-то игру они намертво зафиксировались, так и не нашла как их настраивать, будет любопытно найти ответ. Но вроде никак |
Screenshot_2020-07-16-23-35-42-044_com.android.settings.jpg (395.54 KB, Downloads: 0)
2020-07-17 04:36:35 Upload
вот что в расширенных настройках  |
IMG_20200717_030040.jpg (131.42 KB, Downloads: 1)
2020-07-17 08:01:29 Upload
решил поставить тесты но полоска всеровно на фоне осталась, я прикрепил скриншот если присмотреться то в низу видно что виден какой-то крестик на фоне
эта полоска всегда активна если же раньше она сварачивалась, при переключение на жесты полоска остаеться на фоне не рабочей  |
IMG_20200717_030753.jpg (267.99 KB, Downloads: 0)
2020-07-17 08:09:11 Upload
IMG_20200717_030516.jpg (246.48 KB, Downloads: 0)
2020-07-17 08:09:11 Upload
а как насчет этого  |
Screenshot_2020-07-17-11-16-45-736_com.android.settings.jpg (389.83 KB, Downloads: 0)
2020-07-17 09:18:58 Upload
но всеголишь можно выбрать для каких приложений должно отключаться но не скрываться к примеру на рабочем столе
Mi Comm APP
Получайте новости о Mi продукции и MIUI
Рекомендации
* Рекомендуется загружать изображения для обложки с разрешением 720*312
Изменения необратимы после отправки
Cookies Preference Center
We use cookies on this website. To learn in detail about how we use cookies, please read our full Cookies Notice. To reject all non-essential cookies simply click «Save and Close» below. To accept or reject cookies by category please simply click on the tabs to the left. You can revisit and change your settings at any time. read more
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
Как скрыть показать текст
Задача заключается в том, чтобы нажав на ссылку/кнопку, появлялся/скрывался элемент (изображение, таблица, блок и т.д.). Для чего достаточно добавить небольшой CSS, скрипт не нужен.
Кнопка, нажав на которую появляются/прячутся комментарии Blogger
Все действия производим на вкладке «Шаблон».
Шаг 1. Два вхождения кодазаменяем на
Шаг 2. Выделенные участки кодазаменяем на
Показать/скрыть содержимое гаджета Blogspot
Результат можно посмотреть в Приложении 1.
Тренироваться будем на гаджете «Архив блога». Активизируем вкладку «Шаблон».
Шаг 1. Кодзаменяем на
Шаг 2. Выделенные участки кодазаменяем на
65 комментариев:
Можно также в сообщение добавить:
Скрипт пишем один раз, в том случае, когда скрытых блогов несколько. Woodman Подскажите Пожалуйста.
Возможно ли открытие текста(видео ролика) только после клика по ссылке wmlink.ru или tak.ru
Как это делают в Юкозе.
Заранее Спасибо. NMitra Приведите, пожалуйста, URL с примером. С Юкозе не работала, нужно посмотреть. NMitra Нащёлкалась от души.))) Пусть скажут спасибо)) Там показан код tak.ru, её и возьмём в качестве примера. На вкладке «Изменить HTML» при написании/редактировании сообщения добавляем код:
Выделенное жирным замените на своё. Woodman Огромное Спасибо За Ваши Труды.
Скрипт на tak.ru РАБОТАЕТ. А вот wmlink.ru немогу заставить работать. NMitra Не успела посмотреть, вы изменили страницу. NMitra wmlink.ru прикрыл лавочку. NMitra Не стала писать новую статью. Ещё один вариант:
Pavas Спасибо, очень помогло! А как можно сделать, чтобы ссылка, по которой кликаешь, чтобы показать скрытый текст, после его появления исчезала? NMitra Попробуйте как-то так:
Пример Pavas Спасибо, то что нужно! Космо Мизраил Горыныч NMitra, скрипт в сообщении №14 плохо работает. Мазилка.
Думал тут найти красивый спойлер без доп. библиотек NMitra У меня она же. В вашем примере добавлен идентификатор MVM, а так код тот же. С помощью ID вы показываете какой именно div нужно скрывать/показывать.
NMitra Добавить к стилям CSS
#skryt
label[for=»raz»]:hover
Описание:
выплывающий текст
Рекомендации:
выплывающий текст
Важная информация:
выплывающий текст
Ингридиенты:
выплывающий текст
http://shpargalkablog.ru/2011/07/accordion-css.html
http://shpargalkablog.ru/2012/03/css-tabs.html Анонимный Good article! We will be linking to this particularly great content
on our site. Keep up the good writing. NMitra Благодарю вас! Приятно слышать. Анонимный Way cool! Some extremely valid points! I appreciate you penning this article and
also the rest of the website is also very good. NMitra Спасибо за отзыв! Павел Бреусов Подскажите пожалуйста, а как заставить на главной странице блога весь текст скрывать и оставлять несколько предложений от статьи? А то у меня все статьи на главной странице полностью без скрытия. спасибо NMitra Есть иконка «разорванный листок» (или «обрезать статью») http://shpargalkablog.ru/2012/11/nastroit-blogger.html#panel Maximilian Edelman ДЯКУЮЮЮ NMitra Звертайтеся Анонимный Не работает кнопка на телефонах и планшетах, кто знает как поправить? NMitra Вероятно у них нет поддержки :checked, примените скрипт
Когда на них нажимаешь они в одну строку почемуто встают. как сделать чтобы они совсем друг от друга не зависели? Анонимный help! не получается! одна вкладывается в другую! help!
если попытаться их свернуть они вообще в один ряд становятся(((( NMitra Измените стиль кнопки, http://jsfiddle.net/NMitra/5uarcff5/1/