Как сделать крестик в css

Кнопки «Закрыть»: паттерны и антипаттерны

На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».

Неудачные паттерны

▍Паттерн №1: элемент div и фоновое изображение

Взглянем на HTML-код, используемый для создания кнопки «Закрыть»:

Проблемы и их решение

Ниже приведён список проблем, которые характерны для данного варианта реализации кнопки «Закрыть». Зная об этих проблемах, можно наметить пути их решения.

1. Элемент <div> — это элемент, которым пользуются в крайнем случае, тогда, когда для решения некоей задачи просто нет другого, более подходящего элемента. Использование <div> вместо более подходящих элементов ведёт к плохой доступности проекта.
2. Событие click элемента <div> вызывается только в том случае, если по нему щёлкают мышью. А, например, такое же событие элемента <button> вызывается и по щелчку мыши, и по нажатию клавиш Enter и Пробел на клавиатуре.
3. Элемент <div> не поддерживает получение фокуса с клавиатуры.
4. Здесь нет текстовой альтернативы фоновому изображению.
5. Средства для чтения с экрана не «озвучивают» этот элемент.

▍Паттерн №2: элемент div и иконка

Проблемы и их решение

1. Значок ✕ не является чем-то таким, что можно напрямую соотнести с командой «Закрыть». Этот значок используется для записи математических выражений, в которых одно число умножается на другое (вроде 2✕2). Не стоит использовать его для оформления кнопки «Закрыть».
2. О минусах использования элемента <div> при оформлении кнопок «Закрыть» читайте в разделе «Паттерн №1».
3. Средства для чтения с экрана «озвучат» этот значок, использовав какое-нибудь слово, имеющее отношение к умножению (вроде «multiplication x» или «times»).

▍Паттерн №3: иконки из Font Awesome

Проблемы и их решение

1. Средства для чтения с экрана могут озвучить содержимое, сгенерированное средствами CSS.
2. В документации к Font Awesome рекомендуется семантически скрывать иконки, например, пользуясь атрибутом aria-hidden=«true» элемента <i> .
3. Font Awesome добавляет на страницу Unicode-содержимое с помощью псевдоэлемента ::before . Ассистивные технологии могут озвучить Unicode-эквивалент соответствующей иконки, что в данном примере приведёт к сообщению о том, что тут имеется символ умножения («times»). Дело в том, что fa-times — это не символ-крестик, а знак умножения. Обратите внимание на то, что Talkback и VoiceOver при обработке подобного кода вообще ничего не «говорят».
4. Элемент <i> представляет собой фрагмент текста, который, при использовании средств для чтения с экрана, должен озвучиваться другим голосом или с другой интонацией. То есть это — фрагмент, который система должна «прочитать» не так, как обычный текст. Если всё, что нужно — это текст, набранный курсивом, рекомендуется использовать CSS-стиль font-style: italic; .
5. О недостатках элемента <div> читайте в разделе «Паттерн №1».

▍Паттерн №4: ссылка «Закрыть»

Проблемы и их решение

1. Если у элемента <a> есть атрибут href , он представляет собой ссылку на некий ресурс — вроде другой веб-страницы или PDF-документа.
2. Цель элемента из этого примера заключается в вызове на той же самой странице действия, выполняемого средствами JavaScript. В такой ситуации лучше подойдёт элемент <button> , атрибут type которого установлен в значение button . Дело в том, что такой элемент, по умолчанию, не выполняет никаких действий. Он создан специально для того, чтобы вызывать выполнение каких-то действий в ответ на события пользовательского ввода.
3. Если вы не уверены в том, какой именно элемент использовать, <a> или <button> , посмотрите это видео.
4. Средства для чтения с экрана могут «прочитать» то, что будет сгенерировано с помощью CSS. Значок, используемый в этом примере, как и в предыдущих примерах, это не значок «закрыть», а значок, символизирующий умножение. Его не стоит использовать для оформления кнопок «Закрыть».
5. Средства для чтения с экрана, разбирая этот код, могут сообщить о значке умножения и о ссылке, но не о кнопке «Закрыть».

▍Паттерн №5: ссылка «Закрыть» с текстом

Вот HTML-код этого паттерна:

Проблемы и их решение

1. Это, на самом деле, не так уж и плохо, но тут, всё же используется ссылка, а не кнопка.
2. Почитайте то, о чём говорится в разделе «Паттерн №4» относительно элементов <a> и содержимого, генерируемого средствами CSS.
3. Средства для чтения с экрана могут «озвучить» подобный элемент как «link, times close».

▍Паттерн №6: ссылка «Закрыть» без атрибута href

Проблемы и их решение

1. Перед нами ещё один пример, который нельзя признать очень уж плохим, но тут у ссылки нет атрибута href , и это, опять же, ссылка, а не кнопка.
2. Если у элемента <a> нет атрибута href , это значит, что элемент представляет собой местозаполнитель элемента, куда могла бы быть вставлена реальная ссылка.
3. Если вы обрабатываете событие щелчка на ссылке-местозаполнителе, то вам, возможно, стоит использовать не такую ссылку, а ссылку с атрибутом href , или элемент <button> . Это зависит от того, что именно происходит при щелчке по подобному элементу.
4. Ссылки-местозаполнители не могут получать фокус.
5. Если вы не знаете точно о том, что именно вам нужно, элемент <a> или <button> , обратитесь к этому видео.
6. Средства для чтения с экрана могут «прочитать» этот элемент как «times, clickable».

▍Паттерн №7: ссылка-местозаполнитель и элемент img

Вот HTML-код этого паттерна:

Проблемы и их решение

1. Тут нет текстовой альтернативы изображению.
2. Об особенностях ссылок-местозаполнителей читайте в разделе «Паттерн №6».
3. Средства для чтения с экрана могут «прочитать» в такой ситуации имя файла, например, выдать что-то вроде «close.png, image».

▍Паттерн №8: радиокнопка

Вот применяемый здесь стиль:

Проблемы и их решение

1. Когда люди, которые продвигают идеи доступности контента, говорят о том, что нужно просто использовать кнопки, они имеют в виду элемент <button> , а не радиокнопки.
2. Радиокнопки используются в группах, описывающих наборы взаимосвязанных опций.
3. У SVG-изображения нет текстовой альтернативы. Вот хорошая статья о доступности SVG-изображений.
4. Средства для чтения с экрана могут никак не «озвучить» такой элемент.

▍Паттерн №9: кнопка с иконкой

Как обычно, сначала рассмотрим разметку:

Проблемы и их решение

1. Значок ✕, с которым мы уже встречались, это не символ закрытия чего-либо. Это знак, символизирующий умножение. Не стоит использовать его для оформления кнопки «Закрыть».
2. Средства для чтения с экрана могут «прочитать» эту кнопку как «times, button».

▍Паттерн №10: кнопка с SVG-изображением

Проблемы и их решение

1. Здесь нет текстовой альтернативы SVG-изображению. О доступности таких изображений читайте здесь.
2. Средства для чтения с экрана могут сообщить о том, что тут имеется «button», не «сказав» больше ничего.

▍Паттерн №11: старый добрый символ X

Вот HTML-код, реализующий этот паттерн:

Проблемы и их решение

1. Учитывая то, что существует элемент <button> , в явной настройке семантики кнопки с использованием атрибута role необходимости нет.
2. Если пользоваться элементом <button> , не нужно применять атрибут tabindex . HTML-кнопки, по умолчанию, рассчитаны на возможность получения ими фокуса ввода.
3. О минусах <div> читайте в разделе «Паттерн №1».
4. Символ, представляющий букву X, это не иконка для закрытия чего-либо.
5. Средства для чтения с экрана могут «озвучить» этот элемент как «X».

Вот CodePen-проект, в котором собраны неудачные паттерны создания кнопок «Закрыть»

Альтернативы неудачным паттернам

▍Решение №1: кнопка с видимым текстом без иконки

Вот разметка, применяема в этом решении:

Особенности

1. Здесь используется только текст. Такую кнопку просто реализовать, её назначение понятно пользователям.
2. Средства для чтения с экрана могут «озвучить» такую кнопку как «Close, button».

▍Решение №2: кнопка с видимым текстом и с иконкой, скрытой от ассистивных технологий

Особенности

1. Если вам и правда нужно пользоваться иконкой, которая, в обычных условиях, используется как символ умножения, её стоит скрыть от средств для чтения с экрана, поместив в элемент <span> с атрибутом aria-hidden=«true» .
2. Средства для чтения с экрана могут сообщить о том, что это «Close, button».

▍Решение №3: кнопка со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий

Вот HTML-код этого решения:

Особенности

1. К сожалению, нет стандартного способа скрытия элементов, при использовании которого они не видны, но остаются доступными для ассистивных технологий. Эта задача решается здесь с помощью стиля класса .sr-only .
2. Средства для чтения с экрана могут «озвучить» эту кнопку как «Close, button».

▍Решение №4: ещё один вариант кнопки со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий

Особенности

1. Если вам не хочется выводить текст — назначьте иконке или SVG-изображению текстовую альтернативу, воспользовавшись атрибутом кнопки aria-label .
2. Средства для чтения с экрана могут сообщить о том, что перед нами «Close, button».

▍Решение №5: использование Font Awesome

Вот, ради полноты изложения, удачный пример кнопки «Закрыть», при создании которой используется Font Awesome:

▍Общие замечания

Иногда имеет смысл использовать метки с более подробными описаниями действий, вроде «Закрыть окно», или «Закрыть галерею», или «Закрыть рекламу».

Если вы применяете решения сторонних разработчиков для оформления модальных окон, диалоговых окон и прочего подобного, пожалуйста, перед включением их в состав своего сайта, поинтересуйтесь тем, как именно реализованы эти решения. Не стоит слепо доверять другим в вопросах качества кода и обеспечения доступности контента.

Здесь можно найти примеры реализации удачных паттернов кнопок «Закрыть».

Как сделаны кнопки «Закрыть», которые используются в ваших проектах?

X close button only using css

How to make a cross (X) only in CSS3, to use as a close button?

I’ve been searching for a long time, and cannot found how. When I look at source code on a website using it, there’s always something weird which makes the code I take unusable.

When you click an image, this is the cross on the right:

I think this would be great if somebody can post a simple universal CSS code to make a simple X cross in CSS3.

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Как сделать кнопку «Закрыть» и скрыть элемент со страницы

В статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись «Закрыть» или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно — с помощью скрипта.

ПРИМЕР
Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:

Вариант 1. Кнопка «Закрыть» только на CSS

Вариант 2. Автоматическое добавление кнопки-крестика на jQuery

Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.

6 комментариев:

Вариант только на CSS. Непонятно как установить саму кнопку ? У меня отображается только надпись "Какой то контент" Объясните новичку как быть с кнопкой ? Кнопка это изображение ? Как её прикрутить )) ?

С большим трудом разобрался куда чего и как, часа два возился, в итоге получилось, блок скрывается по нажатию кнопки. А вот реклама от google помещённая в этот блок остаётся и никуда не исчезает. 🙁

С ней нужно "правильный" блок скрывать )

Здравствуйте, думаю очень полезная штука, обязательно воспользуюсь, но есть пара вопросов: можно как то прикрутить еще одну кнопку, но уже с добавлением (как закладки) не знаю как даже это обьяснить, допустим нажал пользователь "Х" как я понимаю пока не почистит куки, то он этот элемент уже не будет видеть при повторном заходе на сайт, это хорошо, но можно так сделать чтоб была еще кнопка "+" при нажатии на которую материал добавлялся как бы в личную страничку пользователя на сайте, другими словами сделать что то вроде корзины отмеченных пользователем материалов? И второй вопрос, как сделать такое выдвижное меню как у Вас слева на сайте? Спасибо.

Еще одну кнопку прикинуть можно, насчет "корзины" можно подумать. По поводу мену, надеюсь, опубликовать в ближайшее время статью.

Иконка гамбургер-меню на CSS+JS

На этом уроке мы создадим на чистом CSS саму иконку гамбургера-меню и с помощью JS функции, поменяем её внешний вид, на крестик (X), символизирующий – закрывание.

HTML код

Для начала, создадим общий контейнер, на который повесим событие мыши onclick. Внутри которого, будет три блока div с разными классами. Контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. Первый блок изображает верхнюю линию, второй – среднюю и третий – нижнюю. Когда пользователь кликает по этой (this) иконке, выполняется функция burgerMenu(this). Что делает эта функция, мы разберем чуть ниже.

CSS код

Иконка гамбургер-меню не является ссылкой, поэтому при наведении на неё, сам курсор не появится, добавим его.

.container <
cursor: pointer;
>

Нарисуем темные линии, одинаковые для всех трех классов. Предвижу вопрос: «Зачем создавать отдельные классы, если линии все одинаковые?»

.b1, .b2, .b3 <
width: 36px;
height: 5px;
background-color: #000;
margin: 5px 0;
transition: 0.3s;
>

Ответ кроется в следующем коде. Нам надо анимировать каждую полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (X). Верхняя и нижняя повернутся на 45 градусов, но в противоположных направлениях и переместятся на несколько пикселей.

.change .b1 <
transform: rotate(-45deg) translate(-9px, 6px);
>
.change .b3 <
transform: rotate(45deg) translate(-8px, -8px);
>

Средняя полоска просто исчезнет, став прозрачной.

Кроме того, мы добавили новый класс change, это значит, что вся эта анимация произойдет, когда запустится функция, переключающая классы.

На данном этапе, иконка гамбургера готова, но при клике по ней ничего не происходит, поскольку мы не написали ещё функцию.

JS код

При клике на контейнер с событием onclick, выполнится JavaScript функция burgerMenu(), которая добавит через метод classList.toggle новое имя класса (change) к нему, что изменит стили каждой горизонтальной полосы: верхняя и нижняя трансформируются в крестик (X). Средняя полоса исчезнет и станет невидимой.

function burgerMenu(icon) <
icon.classList.toggle(«change»);
>

Попробуйте в действии анимацию.

Итоги

Наверняка сейчас, у читателя назрел главный вопрос. Зачем делать эту трансформацию-анимацию иконки? Где это использовать? И вы будете правы, во всей этой конструкции не хватает самого меню. При клике по иконке гамбургеру, должно раскрыться текстовое меню и крестик. При клике по крестику, текстовое меню закроется и мы снова увидим гамбургер.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.