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

«Крестики-нолики» на HTML и CSS

Давно хотел попробовать сделать «крестики-нолики» только на HTML и CSS, без использования скриптов, вот — сделал.

HTML+CSS only tic-tac-toe (24.29КиБ)

Играет на уровне мастера, то есть пытается либо выиграть, либо свести к ничьей. Вычисления позиций проводил через реализацию «крестиков-ноликов» Стефена Остермиллера. Там на ДжаваСкрипте, я написал обвязку для перебора и запускал через «Ви8». Поскольку мне хотелось придать игре налёт винтажности, добавил лёгкий фон конца девяностых, шрифт курсивом и тень. Всё как в старые добрые девяностые, возможно только анимированного ГИФа какого-нибудь нехватает.

Кстати, несмотря на всю винтажность, от браузера требуется поддержка CSS3, включая трансформации.

Я сильно не тестировал, спать уже надо ложиться. Если будут ошибки, пишите, постараюсь поправить, если только они не относятся к недостаткам алгоритма Остермиллера. Всё-таки это скорее концепт, чем полноценная игра.

Как работает иконка крестик справа в поисковой строке для удаления строки?

Разбираю пример строки поиска https://codepen.io/MarcoGuglielmelli/pen/rfpEm
Верстка почему то некорректно отображается в Мозиле, в Хром и Опере все хорошо.
Не могу понять, как появляется иконка крестик справа в текстовом поле поиска, при нажатии на которую удаляется строка из поисковой строки.
Мне как раз нужно было сделать крестик в строке поиска, чтобы удалить строку.

Сохранил этот пример локально на свой компьютер. Все работает также, но в html и css коде не смог найти код, который отвечает за иконку крестика и строки предыдущих поисков.

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

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

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

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

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

Для начала разберемся, что крестик должен быть описан в HTML коде. То есть это должен быть какой-то div или span. Так и сделаем:

Готово. Этот код нужно вставить в месте, где крестик должен выводится.

Теперь приступим к отрисовке самого крестика. Как понятно из заголовка статьи, делать это мы будем на чистом CSS, без использования картинок или иконочных шрифтов.

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

Итак рассмотрим код на CSS:

Как видите, всё довольно прозаично. Для отрисовки крестика используется две прямые, одна из них выполнена псевдоэлементом :after, другая – :before. При этом один повернут на 45°, другой на -45°. Всё просто.

Что касается совместимости с браузерами, то это легко можно проверить с помощью caniuse, согласно ему :after, :before поддерживают все современные браузеры, transform – все, кроме Opera mini, что собственно говоря, является неплохим показателем.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *