Bu yazıda, dairesel öğelerini oluşturmak için bazı CSS tekniklerini gözden geçireceğiz. Efektten sorumlu ana CSS özelliği border-radius‘tur. Efekti kare görüntülere uygulamak oldukça basit olsa da, dikdörtgen görüntüler biraz daha fazla çalışma gerektirecektir.
Kare Görüntüleri Yuvarlama
Tam kare olan bir <img> öğesi yalnızca bir satır CSS’ye ihtiyaç duyar. Bu teknik en iyi kare görüntülerde işe yarar.
CSS Resimleri Yuvarlama
HTML
1 2 3 | <img class="yuvarla" src="https://picsum.photos/300/300" alt=""> |
CSS
1 2 3 4 5 | .yuvarla{ border-radius: 50%; } |
Dikdörtgen Görüntüleri Yuvarlama
Dikdörtgen görüntüler biraz daha yanıltıcıdır. Bir daire oluşturmak için görüntünün bir kare olarak başlaması gerekir. Sorunu çözmek için img öğesini bir kare div öğesine sarabiliriz.
Daha sonra img öğesinin kare sarmalayıcı div’in ötesine geçen kısımlarını “kırpıyoruz”. Bunu, sarmalayıcı div’in taşma özelliğini gizli olarak ayarlayarak gerçekleştirebiliriz. Fotoğrafın öznesinin kırpılma olasılığının daha düşük olması için, manzara fotoğraflarını (yatay olarak yönlendirilmiş dikdörtgenler) portre fotoğraflarından (dikey olarak yönlendirilmiş dikdörtgenler) farklı şekilde ele almamız gerekir.
CSS ile Resmi Yuvarlak Yapma
HTML
1 2 3 4 5 | <div class="resim--yuvarla"> <img src="https://picsum.photos/500/300" alt=""> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .resim--yuvarla { display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .resim--yuvarla img { width: auto; height: 100%; margin-left: -50%; } |
CSS object-fit ile Resimleri Yuvarlama
CSS object-fit özelliği, bir img yada video etiketini bir kabın içine sığdırmak için kullanılır. Bu özelliği kullanarak ölçüleri kare olmayan resimleri kare yapıp en boy oranı bozulmadan yuvarlayabiliriz.
Resmin genişlik ve yükseklik değerini aynı yapıp object-fit ile resmin bulunan alanın içine sığmasını sağlıyoruz. Ardından resmi yuvarlamak için border-radius:50% yaparak resimleri yuvarlıyoruz.
HTML:
1 2 3 | <img class="yuvarla" src="https://picsum.photos/500/300" alt=""> |
CSS:
1 2 3 4 5 6 7 8 | .yuvarla { width: 300px; height: 300px; object-fit: cover; border-radius: 50%; } |
Yuvarladığımız Resimlere Gölge Etkisi Verme
Bir önceki yazımızda nesnelere gölge verme konusunda örnekler vermiştik. Bu örneklerden bir kaç tanesini aşağıdaki gibi resimlerimize uyguladık.
Örnek :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- CSS KODU --> <style> body { background: #3D8EB9; width: 800px; margin: 200px; } .yuvarla { width: 300px; height: 300px; object-fit: cover; border-radius: 50%; box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); } </style> <!-- HTML KODU --> <img class="yuvarla" src="https://picsum.photos/500/300" alt=""> |
admin
[…] İlginizi çekebilir: CSS ile Resmi Yuvarlamak […]