Jak wypuścić kota
poza ramkę zdjęcia

Wszystko zaczęło się od kiepskiego kadru

W przesuwającym się pasku Kotka.dev były małe, przycięte zdjęcia: oczy, wąsy, uszy, ogon. Niektórym kadrom było za ciasno. Pojawiło się proste pytanie: a gdyby mogły wystawać? Zachowałyśmy fotograficzny wygląd i oddzieliłyśmy sylwetkę od podkładu.

Porównaj ten sam przezroczysty obraz w dwóch kontenerach. Po lewej jest przycięty, po prawej uszy i sylwetka mogą wychodzić poza ramkę. To warstwy 2D — wrażenie głębi, nie prawdziwa grafika 3D.

Przy obsłudze myszą Kotka po prawej lekko unosi się po najechaniu. W trybie ograniczonego ruchu głębia pozostaje, ale animacja znika.

Trzy składniki zamiast płaskiego obrazka

1. Przezroczysta sylwetka
   Tło musi być naprawdę przezroczyste. JPG lub szachownica narysowana wewnątrz PNG nadal zasłonią ramkę. Sprawdź krawędzie na ciemnym i jasnym tle.
2. Osobny podkład
   Ramka to pseudoelement za obrazem. Jej zaokrąglone rogi nie powinny przycinać sylwetki. Lekki obrót uwydatnia rozdzielenie warstw.
3. Cień dopasowany do kształtu
   filter: drop-shadow() uwzględnia kontur alfa obrazu. box-shadow rzuca cień prostokąta elementu. Przy uszach i wąsach to istotna różnica. MDN: drop-shadow()

Minimalny przepis, który działa

To komponent z porównania powyżej. Wstaw ścieżkę do własnego przezroczystego obrazu. Rozmiary i odstępy pasują do naszego kwadratowego pliku; inna sylwetka może potrzebować innych wartości. Zostaw wokół miejsce na wystające części.

<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);
  }
}

Obraz znajduje się nad pseudoelementem dzięki z-index. isolation: isolate zamyka kolejność warstw wewnątrz komponentu, ale nie wyłącza przycinania. Stały kwadratowy obszar obrazu wraz z object-fit: contain pozwala zmieścić go bez obcinania.

Gdzie znikają uszy

Jeśli Kotka nadal jest przycinana, sprawdź elementy nadrzędne. overflow: visible na małej ramce nie anuluje overflow: hidden na zewnętrznej karcie. Z kolei połączenie overflow-x: hidden z overflow-y: visible sprawi, że ta druga wartość zostanie obliczona jako auto. MDN: overflow

Nasz przesuwający się pasek nadal wymaga przycinania przy zewnętrznych krawędziach. Nie usunęłyśmy tej granicy, lecz zwiększyłyśmy pionowe odstępy, aby uszy, ogon i cienie mieściły się w środku. Mała ramka pozostaje otwarta, cały pasek zachowuje swoje granice.

Ruch jest opcjonalny. Media query włącza go tylko dla precyzyjnego wskaźnika z obsługą najechania, gdy użytkownik nie prosi o ograniczenie ruchu. Na ekranie dotykowym statyczne warstwy nadal dają wrażenie głębi. MDN: prefers-reduced-motion

Zanim powiesz „gotowe”

• Sprawdź sylwetkę i cień w rzeczywistym rozmiarze wyświetlania, nie tylko na powiększonym podglądzie.
• Sprawdź wąski ekran i ograniczenie ruchu; nic ważnego nie powinno zależeć od najechania myszą.
• Zostaw dość miejsca, aby obraz nie zasłaniał podpisu, linku ani sąsiedniej karty.
• Dodaj sensowny alt do ważnego obrazu. Jeśli podpis przekazuje już to samo, a obraz jest dekoracyjny, zostaw pusty alt.
• Sprawdź rozmiary plików. W naszym pasku sylwetki to PNG 256 × 256 dla pól obrazu o wielkości około 76–80 px; pasek nie pobiera pełnowymiarowych wyników generacji.