Css ile dairesel resim efekti

Teknoloji, Web Tasarım

29 Ekim 2016

Merhaba,

CSS kullanarak, sizi zahmetli kodlamalardan kurtaran ve göz zevkinize uygun tasarımlar ortaya koyabilirsiniz. Dairesel css efekti ile profil fotoğrafı, avatar gibi öne çıkan fotoğrafları daire içine alıp, gölge verip hatta üzerine geldiğinde büyümesini sağlamak oldukça fayda sağlayacaktır. Bu iş için kullandığım kod parçacığını sizlerle paylaşmak istedim.

 

Öncelik olarak fotoğrafı nasıl aldığımıza bir bakalım. tagı kullanarak mı alıyoruz yoksa css ile background olarak mı? Ben sizlere iki yoluda göstereceğim. İşe yarayan kısmı kendinize göre düzenleyebilirsiniz.

1. CSS Background kullanarak yapmak

Tek bir div kullanmamız yeterli olacaktır. CSS sınıfı olarak ben dairesel adını kullandım.

HTML kodu

<div class="dairesel"></div>

Şimdi CSS’i ayarlayalım.

CSS Sınıf kodu

<style>

.dairesel{

width: 300px;

height: 300px;

border-radius: 150px;

-webkit-border-radius: 150px;

-moz-border-radius: 150px;

background: url(https://resim-dosyasinin.adresi/resim.jpg) no-repeat;

}

</style>

Genişlik ve Yükseklik değerleri aynı olmalı ki bir kare oluşsun. Kare oluşsun ki Radius değeri verdiğimizde tam bir daire elde edelim.

Bu çıktı bizlere tamamen CSS kullanarak tek bir div sayesinde Dairesel efekte sahip olmayı sağlar.

İkinci  yol  <img> Tag’i kullanarak Dairesel efekt yapmak

Bir div, ve içerisine de resmimizi çağıralım. Tabi resim yine kare olursa faydalı olur bizim için.

<div class=”dairesel”>
    <img src=”/resim-url.adresi/resim.jpg” alt=”resim hakkında bilgi”/>
</div>

Şimdi CSS’i ayarlayalım.

CSS Sınıf kodu

.dairesel{

  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;

}

.dairesel img {

  display: block;
  min-width: 100%;
  min-height: 100%;

}

 

Böylelikle dairesel efekti vermiş olduk. Fare üzerine geldiğinde resmin büyümesini isterseniz eğer; HTML’de ufak bir değişiklik gerek

class=”dairesel” Tag’ini class=”dairesel buyut” olarak değiştirelim.

.buyut{transition: all .2s ease-in-out;}

.buyut:hover{transform: scale(1.2); }