Привет. Сегодня рассмотрим как сделать Крестик закрыть на чистом CSS, то есть нарисовать иконку закрытия/удаления без картинок.
Сразу напомню, что если вы не хотите разрабатывать сайт самостоятельно, то обратитесь к профессионалам: которые помогут вам разработать сайт быстро, качественно и без написание кода.
Ну, а для тех, кто все-таки хочет нарисовать иконку закрыть без картинок милости просим далее.
Крестик закрыть на чистом CSS
Для начала разберемся, что крестик должен быть описан в HTML коде. То есть это должен быть какой-то div или span. Так и сделаем:
<span class="close"></span>
Готово. Этот код нужно вставить в месте, где крестик должен выводится.
Теперь приступим к отрисовке самого крестика. Как понятно из заголовка статьи, делать это мы будем на чистом CSS, без использования картинок или иконочных шрифтов.
По умолчанию крестик будет полупрозрачным, при наведении – будет становится ярче. На ваше усмотрение, можно сделать альтернативный эффект при наведении.
Итак рассмотрим код на CSS:
.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
Как видите, всё довольно прозаично. Для отрисовки крестика используется две прямые, одна из них выполнена псевдоэлементом :after, другая – :before. При этом один повернут на 45°, другой на -45°. Всё просто.
Что касается совместимости с браузерами, то это легко можно проверить с помощью caniuse, согласно ему :after, :before поддерживают все современные браузеры, transform – все, кроме Opera mini, что собственно говоря, является неплохим показателем.
При необходимости можно добавить разные примочки к этому крестику на ваше успотрение.
Чтобы посмотреть, как это работает:
