CSS ile Fotoğrafı Daire Yapmak

css-circle-image

Bu yazıda, CSS kullanarak fotoğraflarımızı daire şeklinde nasıl gösterebileceğimizi öğreneceğiz.

CSS ile fotoğraflarımızı daire ( circle image ) şeklinde göstermek oldukça kolaydır. border-radius, width, height gibi basit CSS özelliklerini kullanarak farklı boyutlarda, kenarlıklı daireler oluşturabilirsiniz.

Bunu en basitçe yapmak için “img” etiketine ihtiyacımız var. Bu etikete basitçe genişlik, yükseklik ve kenarlık yuvarlama oranı yazmamız yeterli.

Aşağıda basit bir örnek paylaştım, kodları inceleyebilirsiniz. Çalışan örneğini şurada görebilirsiniz. CSS Circle Image (codepen.io)

HTML

<img src="https://serdarkaraca.com.tr/serdarkaraca.jpg" class="cover">

CSS

.cover{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


The reCAPTCHA verification period has expired. Please reload the page.

Back To Top