Görseli Yuvarlak Yapma

Bu yazımda img etiketiyle eklenen bir görseli Css özelliği border-radius ile nasıl yuvarlak yapabiliriz bu konudan bahsettim. Detaylar için yazımın devamını okuyabilirsiniz.

Merhabalar,

Bu yazımda <img> etiketiyle eklenen bir görseli Css ile nasıl yuvarlak yapabiliriz bu konudan bahsedeceğim. Birçok tasarımda görebilirsiniz nasıl yapıldığını merak ediyorsanız gelin hemen başlayalım.

<img src="gorsel.jpg" alt="" class="yuvarlak" /> 

Html tarafında görseli ekledik. Şimdi sıra bunu Css tarafında özelleştirmeye;

img.yuvarlak {
    border-radius: 50%;
} 

border-radius HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. yuvarlak class’ına sahip img etiketlerine  border-radius özelliğini veriyoruz.

Tabii ki bu işlem .yuvarlak class’ına sahip tüm görselleri, görselin kendi boyutlarına göre yuvarlak yapacaktır. Ama genel olarak çoğu tasarımda sabit boyutlarda kullanıldığı için gerekli boyutları da resme eklediğiniz takdirde daha düzenli olarak görünecektir.

img.yuvarlak {
    border-radius: 50%;
    height: 250px;
    width: 250px;
    object-fit: cover;
}

Sabit boyutlarımızı da görsellere ekledik. Sizde kendinize ait boyutları ayarlayabilirsiniz. Görsellere sabit boyut verdiğimizde görselin bozuk görünümü, sünmesini vb. engellemek için object-fit kullandım.

Codepen üzerinden size incelemeniz açısından bi örnek bırakayım; 

See the Pen Yuvarlak Görsel by furkangiray.com (@furkangiray_com) on CodePen.

Evet bu kadar kısa bir işlemin ardından görsellerinizi yuvarlak olarak gösterebilirsiniz. 

Umarım işinize yarar.

Mutlu Kodlamalar 🙂

1 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
CSS ::before, ::after
Devamını Oku

::before, ::after Kullanımı

CSS: before ve: after özellikleri, sözde öğeler olarak da bilinen özelliklerdir. Bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılırlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku

CSS – ::selection – Seçili Metin
Devamını Oku

::selection – Seçili Metin

::selection sözde seçicisi ile mouse sol tuşuyla tıklanıp basılı tutarak seçilen metinlere nasıl stil verilebileceği anlatılmıştır. Söz dizimi ve nasıl yapılmasıyla ile ilgili detaylara yazımdan ulaşabilirsiniz

Devamını Oku