Tasarım Kodlama

CSS ile Resmi Yuvarlak Yapma

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.

HTML

CSS

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.

HTML

CSS:

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:

CSS:

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 :

CSS Resimleri Yuvarlak Yapma Örnekleri
CSS Resimleri Yuvarlak Yapma Örnekleri

Yorum yap