Модификация размера изображения по клику в CSS: решение
Быстрый ответ
В CSS можно реализовать эффект onclick, используя псевдокласс :active
для мгновенной визуальной обратной связи или псевдокласс :checked
, чтобы создать переключаемый эффект с помощью невидимого чекбокса.
Мгновенный клик с использованием :active
:
.btn:active {
/* При нажатии кнопка становится синей. Невероятно! */
background: blue;
}
Переключаемый эффект с помощью :checked
:
<input type="checkbox" id="toggle" hidden>
<label for="toggle" class="btn">Переключить</label>
.btn {
/* Обычный цвет кнопки – серый. Без изысков. */
background: grey;
}
/* Если чекбокс включен, подсветим кнопку синим цветом. Вот это да! */
#toggle:checked + .btn { background: blue; }
В приведенных примерах демонстрируется использование исключительно CSS для создания интерфейса, реагирующего на действия пользователя.
Хитрость с использованием чекбокса
Для установки постоянного состояния используйте хитрость с чекбоксом, который подразумевает использование невидимого чекбокса для сохранения состояния и label
, который служит кнопкой для переключения состояний.
Метки в виде кнопок
Метки можно стилизовать под кнопки, задав соответствующие свойства, такие как background
, border-radius
и box-shadow
:
.btn {
/* Это выглядит как кнопка, но на самом деле это метка. Удивительно! */
display: inline-block;
padding: 10px 20px;
cursor: pointer;
background: grey;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
#toggle:checked + .btn {
/* Переключили на синий? Впечатляет! */
background: blue;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
Эффекты активного состояния
Сделайте взаимодействие с элементами более живым, применяя эффекты к псевдоклассам :active
и :focus
:
.btn:active {
/* Кнопка как бы утоплена, вернется ли снова на место? Есть только один способ узнать! */
transform: translateY(2px);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:focus {
/* Кто нуждается в фильтре синего света, когда можно сделать кнопку светло-голубой? */
outline: none;
background: lightblue;
}
Используйте изменение width
и height
для :checked
, чтобы смоделировать изменение размера кликабельных элементов:
#toggle:checked + .btn {
/* Мы как в Стране чудес? Видимо, кнопка выросла! */
width: 200px;
height: 60px;
}
Доступность для выбора с клавиатуры
Для улучшения доступности используйте tabindex
, чтобы элементы на странице могли быть выбраны с помощью клавиатуры:
<div tabindex="0">Элемент доступен для фокусировки, что радует пользователей клавиатуры!</div>
Псевдокласс :target
Псевдокласс :target
позволяет выделять элементы навигации и переключать видимость содержимого:
<style>
#section:target {
/* Осторожно: приближаемся к желтому разделу! */
background: yellow;
}
</style>
<a href="#section">Перейти к разделу</a>
<div id="section">
/* Осторожно: содержимое ниже выделено! */
Выделенный раздел подсвечивается при его выборе.
</div>
Применяйте :target
для выделения текущего раздела в навигационном меню:
nav a:target {
/* Синяя рамка признания окружает активную ссылку! */
outline: solid blue 2px;
}
Запомните, что :target
работает на основе URL, поэтому он влияет на прокрутку страницы и поведение кнопки "назад" в браузере.
Полезные материалы
- :active | CSS-Tricks – CSS-Tricks — Изучите псевдокласс
:active
для создания эффектов нажатия в CSS без использования магии! - Псевдоклассы – CSS: Каскадные таблицы стилей | MDN — Познакомьтесь с псевдоклассами CSS – вашими новыми незаменимыми помощниками.
- Селектор CSS :hover — Узнайте, что произойдет, когда вы наведете на элемент. Мир возможностей открывается перед вами!
- "Хак" с чекбоксом (и что с ним можно сделать) | CSS-Tricks – CSS-Tricks — Когда чекбокс становится больше, чем просто чекбокс? Когда это – хитрость!
- Пришло время начать использовать пользовательские свойства CSS — Smashing Magazine — Настраивайте свои стили динамично, используя пользовательские свойства CSS.
- :not() | Codrops — Понимайте, как работает селектор
:not()
, и элегантно фильтруйте нежелательные стили. - CSS :target — Цель, нацельтесь и нажмите
:target
... это стилизация, нацеленная точно в цель!