Як випустити кота
за межі фоторамки

Усе почалося з невдалого обрізання

У рухомому рядку Kotka.dev були маленькі обрізані фотографії: очі, вуса, вушка, хвіст. Частині кадрів було затісно. Виникло просте запитання: а можна зробити їх виступаючими? Ми зберегли фотографічний вигляд і відділили силует від підкладки.

Порівняй те саме прозоре зображення у двох контейнерах. Ліворуч воно обрізане, праворуч вушка й силует можуть перетинати рамку. Це шари у 2D — враження глибини, а не справжня 3D-графіка.

З мишею Котка праворуч ще й ледь піднімається при наведенні. У режимі зменшеного руху об’єм лишається, а руху немає.

Три складники замість пласкої картинки

1. Прозорий силует
   Тло має бути справді прозорим. JPG або шахівниця, намальована всередині PNG, усе одно закриють рамку. Перевір край на темному й світлому тлі.
2. Окрема підкладка
   Рамка — псевдоелемент за зображенням. Її заокруглені кути не мають обрізати силует. Невеликий поворот робить поділ помітнішим.
3. Тінь, що повторює форму
   filter: drop-shadow() враховує альфа-контур зображення. box-shadow дає тінь від коробки елемента. Для вушок і вусів це суттєва різниця. MDN: drop-shadow()

Мінімальний робочий рецепт

Це компонент із порівняння вище. Підстав шлях до власного прозорого зображення. Розміри й відступи підібрані під наш квадратний файл; іншому силуету можуть знадобитися інші значення. Залиши довкола місце для частин, що виступають.

<div class="pop-frame">
  <img class="pop-subject"
    src="assets/img/detail-ears-cutout-v1.png"
    width="256" height="256"
    alt="Kotka peeking over a frame">
</div>

.pop-frame {
  position: relative;
  width: 144px;
  height: 120px;
  margin: 36px auto 24px;
  isolation: isolate;
  overflow: visible;
}
.pop-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid #c9a46b;
  border-radius: 18px;
  background: #1a2634;
  transform: rotate(-5deg);
}
.pop-subject {
  position: absolute;
  z-index: 1;
  width: 168px;
  height: 168px;
  max-width: none;
  left: -12px;
  top: -32px;
  object-fit: contain;
  filter: drop-shadow(0 8px 6px #0008);
}
@media (hover: hover) and (pointer: fine)
  and (prefers-reduced-motion: no-preference) {
  .pop-subject {
    transition: transform .25s ease;
  }
  .pop-frame:hover .pop-subject {
    transform: translateY(-3px) rotate(-2deg);
  }
}

Зображення стоїть над псевдоелементом завдяки z-index. isolation: isolate лишає порядок шарів усередині компонента; обрізання воно не скасовує. Фіксована квадратна область зображення разом з object-fit: contain дозволяє вмістити його без обрізання.

Де зникають вушка

Якщо Котку все ще обрізає, перевір батьківські елементи. overflow: visible на маленькій рамці не скасує overflow: hidden у зовнішній картці. А поєднання overflow-x: hidden та overflow-y: visible змусить останнє обчислюватися як auto. MDN: overflow

Наш рухомий рядок усе ще потребує обрізання на зовнішніх краях. Ми не прибрали цю межу, а збільшили вертикальні відступи, щоб вушка, хвіст і тіні поміщалися всередині. Маленька рамка відкрита, весь рядок зберігає свої межі.

Рух необов’язковий. Медіазапит вмикає його лише для точного вказівника з наведенням, коли немає запиту на зменшення руху. На сенсорному екрані статичні шари все одно передають об’єм. MDN: prefers-reduced-motion

Перед тим як сказати «готово»

• Перевір силует і тінь у реальному розмірі показу, не лише на збільшеному прев’ю.
• Перевір вузький екран і зменшення руху; ніщо важливе не має залежати від наведення.
• Залиши повітря, щоб зображення не накривало підпис, посилання або сусідню картку.
• Дай змістовний alt важливому зображенню. Якщо підпис уже передає те саме, а зображення декоративне, залиш alt порожнім.
• Перевір вагу файлів. У нашому рядку силуети — PNG 256 × 256 для областей зображення приблизно 76–80 px; повнорозмірні результати генерації рядок не завантажує.