Yuvarlak köşeli div

Son zamanlarda  bir çok  popüler  site  tarafından kullanılmaya başlanan daire  şeklindeki  tasarımlar gerçektende  site  görüntüsüne  farklı  bir görünüm kazandırmayı  başarabiliyor.  Hemen  hemen her  tasarımcının da  dikkat çektiği  bir  tasarım örneğidir  daire şeklindeki tasarımlar. Bu sefer  sizlerle paylaşacağım  Css3  örneği mükemmel özelliklere sahip  olmasada  sitenizin görüntüsünü  çok farklı  kılacak bir  örnek.

Paul Demers tarafından hazırlanmış olan basit  ve kullanımıda  bir o kadar  kolay olan Css3  örneğinde  border radius kullanılarak  resimlere  daire biçiminde  bir  görüntü kazandırılmış.  Demo  sayfası  ilk açıldığında  bütün resimler  siyah  beyaz bir görüntüye  sahip. Normalde  hepside  renkli renkli  resimler olmasına  rağmen  siyah beyaz  olarak görünmesinin sebebi  resimler üzerinde Css3 grey scale  kullanılmış olmasıdır. Tabi mouse  ile üzerine  geldiğiniz  resimlerde  grey scale  devre dışı  kalıyor  ve orjinal  renkli  resim görüntüleniyor  tarayıcı üzerinde.

 Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

body{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 100%;
}

h1{
  text-align: center;
  color: rgba(57, 123, 150, 1);
}

ul, li{
  margin: 0;
  padding: 0;
}

ul{
  width: 645px;
  margin: 30px auto 0;
}

li{
  list-style-type: none;
  float: left;
  margin-right: 1em;
  text-align: center;
  font-size: .875em;

}

a{
  text-decoration: none;
  color: rgba(57, 123, 150, 1);
  -webkit-transition: all .5s;
}

a:hover{
  color: rgba(57, 123, 150, 1);
}

a img{
  display: block;
  margin-bottom: 10px;
  border-radius: 50%;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}

  a img{
    -webkit-filter: brightness(50%) grayscale(1);
    -moz-filter: brightness(50%) grayscale(1);
    /* Hardware acceleration FTW! */
    -webkit-transform: translate3d(0,0,0);
  }

  a:hover img{
    -webkit-filter: brightness(100%) grayscale(0);
    -moz-filter: brightness(100%) grayscale(0);
  }

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<h1>Freakin' Animals</h1>
<ul>
  <li><a href="#"><img src="https://lorempixel.com/output/animals-q-c-200-200-10.jpg" />Freakin' Horse</a></li>

  <li><a href="#"><img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />Freakin' Rhinos</a></li>

    <li><a href="#"><img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />Freakin' Tigers</a></li>
</ul>