Модификация размера изображения по клику в 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, поэтому он влияет на прокрутку страницы и поведение кнопки "назад" в браузере.

Полезные материалы

1. :active | CSS-Tricks – CSS-Tricks — Изучите псевдокласс :active для создания эффектов нажатия в CSS без использования магии!
2. Псевдоклассы – CSS: Каскадные таблицы стилей | MDN — Познакомьтесь с псевдоклассами CSS – вашими новыми незаменимыми помощниками.
3. Селектор CSS :hover — Узнайте, что произойдет, когда вы наведете на элемент. Мир возможностей открывается перед вами!
4. "Хак" с чекбоксом (и что с ним можно сделать) | CSS-Tricks – CSS-Tricks — Когда чекбокс становится больше, чем просто чекбокс? Когда это – хитрость!
5. Пришло время начать использовать пользовательские свойства CSS — Smashing Magazine — Настраивайте свои стили динамично, используя пользовательские свойства CSS.
6. :not() | Codrops — Понимайте, как работает селектор :not(), и элегантно фильтруйте нежелательные стили.
7. CSS :target — Цель, нацельтесь и нажмите :target... это стилизация, нацеленная точно в цель!