Offset Çerçeve (Shadow Frame) Etkisi

Giriş

hasan-yildiz.php sayfasındaki görsellerin arkasında fark ettiğiniz bu efekt, klasik bir gölge (box-shadow) kullanmak yerine, görselin arkasına fiziksel bir katman yerleştirilerek oluşturulur. Bu, tasarıma daha yapısal ve modern bir hava katar.

Örnek Uygulamalar

Nasıl Yapılır?

Bu efektin sırrı basittir: Ana görseli bir kapsayıcı (wrapper) içine alırız. Kapsayıcıyı position: relative yaparız. İçine hem görselimizi hem de çerçeve olacak boş bir div ekleriz.

1. HTML Yapısı

<div class="position-relative">
    <!-- Ana Görsel -->
    <img src="resim.jpg" class="z-index-2 position-relative">
    
    <!-- Arka Çerçeve -->
    <div class="shadow-frame"></div>
</div>

2. CSS Detayları

Çerçevenin görselin arkasında kalması için z-index: 1 ve görselin z-index: 2 olması kritiktir. Kaydırma miktarı transform: translate(x, y) ile manuel olarak ayarlanır.