Крестик закрыть на чистом CSS

Привет. Сегодня рассмотрим как сделать Крестик закрыть на чистом CSS, то есть нарисовать иконку закрытия/удаления без картинок.

Сразу напомню, что если вы не хотите разрабатывать сайт самостоятельно, то обратитесь к профессионалам: http://alex-it.pro/razrabotka-sozdanie-saytov-v-zhitomir/, которые помогут вам разработать сайт быстро, качественно и без написание кода.

Ну, а для тех, кто все-таки хочет нарисовать иконку закрыть без картинок милости просим далее.

Крестик закрыть на чистом 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, что собственно говоря, является неплохим показателем.

При необходимости можно добавить разные примочки к этому крестику на ваше успотрение.

Чтобы посмотреть, как это работает:

2 424