Вітання. У цій статті розглянемо як зробити Хрестик закрити на чистому CSS, тобто намалювати іконку закриття / видалення без картинок.
Ну, а для тих, хто все-таки хоче намалювати іконку закрити без картинок ласкаво просимо далі.
Хрестик закрити на чистому CSS
Для початку розберемося, що хрестик повинен бути описаний в HTML коді. Тобто це повинен бути якийсь div або span. Так і зробимо:
Готово. Цей код потрібно вставити в місці, де хрестик повинен виводиться.
Тепер приступимо до отрисовке самого хрестика. Як зрозуміло з заголовка статті, робити це ми будемо на чистому CSS, без використання картинок або іконочние шрифтів.
За замовчуванням хрестик буде напівпрозорим, при наведенні - буде стає яскравішим. На ваш розсуд, можна зробити альтернативний ефект при наведенні.
Отже розглянемо код на CSS:
Як бачите, все досить прозаїчно. Для відтворення хрестика використовується дві прямі, одна з них виконана псевдоелементи: after, інша -: before. При цьому один повернуть на 45 °, інший на -45 °. Все просто.
Що стосується сумісності з браузерами, то це легко можна перевірити за допомогою caniuse, згідно з ним: after. before підтримують всі сучасні браузери, transform - все, крім Opera mini, що власне кажучи, є непоганим показником.
При необхідності можна додати різні примочки до цього хрестику на ваше успотреніе.
Щоб подивитися, як це працює:
- Поворот тексту CSS. просто
- Прибрати хрестик очищення IE
- Як зафіксувати орієнтацію сайту в мобільному браузері
