İçerik Resimlerinize Dairesel Görünüm Kazandırın

Sitenizde düzenlemiş olduğunuz içerik yazılarınıza eklediğiniz resimlerinize dairesel ve elipstik şekiller kazandırarak,içeriğinizin görünümünü ilgi çekici hale getirebilirsiniz.

Bu işlemi kod ekleyerek iki farklı adımda kolayca düzenleyebilirsiniz.

1.aşamada Style.css dosyasına altta verilen kodu ekleyin ve kaydediniz.Kod üzerindeki değerleri isteğinize göre düzenleyebilirsiniz.

.circular-image img {
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
border-radius: 150px;
}

2. aşamada Resimlerinize yuvarlak yada elips şeklini vermek için yazı ekle sayfasında metin editöre alttaki kodu yapıştırın.

<div class=”circular-image”>code-for-Resim Yolu buraya</div

Daha sonra görsel editörde code-for-image üzerine sağ tıklayarak ortam dosyasından resim yükleyin.Tekrar metin editöre dönerek resim boyutlarını düzenleyiniz.

Örnek için üstteki resimleri düzenledim.Metin editörde resim boyutlarında oynama yaptım.

<div class=”circular-image”><img class=”alignnone wp-image-1287″ src=”https://guytu.com/wp-content/uploads/2016/05/bicimli_resim-1024×607.jpg” alt=”bicimli_resim” width=”650″ height=”385″ /></div>

<div class=”circular-image”><img class=”alignnone wp-image-1287″ src=”https://guytu.com/wp-content/uploads/2016/05/bicimli_resim-1024×607.jpg” alt=”bicimli_resim” width=”385″ height=”385″ /></div>

Elip şeklindeki resim için değerlere dokunmadım.Yuvarlak resim yükseklik ve genişlik değerlerini eşitledim

Resimlere tam kare veya dikdörtgen şekil vermek için altta verilen kodları stylecss dosyasında üstteki kodlarla değiştiriyoruz.

.circular-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

Yazı editöründe de alttaki kodları kullanıyoruz.

<div class=”wrap-image”>code-for-Resim Yolu buraya</div

Resimlerinizin sadece köşelerini yuvarlamak isterseniz roundpic.com web aracını kullanarak resimlerinizin kenarlarını online olarak düzenleyebilirsiniz