Offset Çerçeve (Gölge) Rehberi

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

Dolu Çerçeve

Border Çerçeve

Nasıl Yapılır?

Bu efektin sırrı basittir: Ana görseli/kutuyu 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="img-fluid rounded shadow z-index-2">
    
    <!-- Arka Çerçeve -->
    <div class="bg-primary opacity-10 position-absolute top-0 start-0 w-100 h-100 z-index-1" 
         style="transform: translate(20px, 20px); border-radius: 1rem;">
    </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.

Neden Kullanmalıyız?

Klasik box-shadow her zaman "yumuşak" bir geçiş sağlar. Offset çerçeveler ise: