Привет. Сегодня рассмотрим как сделать Крестик закрыть на чистом 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, что собственно говоря, является неплохим показателем.
При необходимости можно добавить разные примочки к этому крестику на ваше успотрение.
Чтобы посмотреть, как это работает: