CSS ile İkonlar Oluşturma

Merhaba arkadaşlar,

Herkesin bildiği gibi sitelerdeki küçük ikonlar siteye bambaşka bir hava sokup onun daha güzel görünmesini sağlıyor. Bende belli bir birleşik ikon grubunu parçalayıp nasıl kullandığımız merak ediyordum. Bununla ilgili araştırmalar sonucu kendi yaptığım sitelerde uygulayabileceğim bazı bilgiler edindim. Bu resimde gördüğünüz gibi yan yana 6 tane otomobil ikonu var ve biz bu ikonları ayrı ayrı kullanmak istiyoruz. Bunun için yapmamız gereken önce tüm resmi yükleyip daha sonrada onun üzerinde pozisyonlar seçerek istediğimiz ikonu elde etmektir. Bunun için ;

CSS kodu :

.cars-large {
  background-image: url("images/cars.png");
  background-position: 2px 2px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 130px;  /*Herbir ikonun yüksekliği*/
  line-height:18px;
  vertical-align: text-bottom;
  width: 120px; /*Herbir ikonun genişliği*/
}
/* Herbir ikon için x ekseninde pozisyon değiştiriyoruz */ 
.cars-large.car1{ background-position: 0 0;      }
.cars-large.car2{ background-position: -140px 0; } 
.cars-large.car3{ background-position: -280px 0; } 
.cars-large.car4{ background-position: -410px 0; } 
.cars-large.car5{ background-position: -540px 0; } 
.cars-large.car6{ background-position: -670px 0; }

HTML Kodu :

    <i class="cars-large car1"></i> 
    <i class="cars-large car2"></i> 
    <i class="cars-large car3"></i> 
    <i class="cars-large car4"></i> 
    <i class="cars-large car5"></i> 
    <i class="cars-large car6"></i>

Bu şekilde yanyana birleşik olan her bir ikonu ayrı ayrı kullanabiliriz. Canlı demosunu görmek istiyorsanız tıklayınız ..

Peki ikonlarımız alt alta ise bunun içinde y eksenindeki pozisyonu değiştirerek ikonlarımızı elde edebiliriz.

Üstte ki birleşik ikon bloğu için bunu deneyebiliriz.

CSS Kodu:

.star-large {
  background-image: url("images/star-rating.png");
  background-position: 2px 2px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 15px; /*Herbir ikonun yüksekliği*/
  line-height:18px;
  vertical-align: text-bottom;
  width: 76px;/*Herbir ikonun genişliği*/
 }
.star-large.star-0{ background-position: 0 0; } 
.star-large.star-0-half{ background-position: 0 -15px; } 
.star-large.star-1{ background-position: 0 -30px; } 
.star-large.star-1-half{ background-position: 0 -45px; } 
.star-large.star-2{ background-position: 0 -60px; } 
.star-large.star-2-half{ background-position: 0 -75px; } 
.star-large.star-3{ background-position: 0 -90px; } 
.star-large.star-3-half{ background-position: 0 -105px; } 
.star-large.star-4{ background-position: 0 -120px; } 
.star-large.star-4-half{ background-position: 0 -135px; } 
.star-large.star-5{ background-position: 0 -150px; }

HTML Kodu:

  <i class="star-large star-0"       ></i>
  <i class="star-large star-0-half"  ></i>
  <i class="star-large star-1"       ></i>
  <i class="star-large star-1-half" ></i>
  <i class="star-large star-2"       ></i>
  <i class="star-large star-2-half"  ></i>
  <i class="star-large star-3"       ></i>
  <i class="star-large star-3-half"  ></i>

Eğer canlı demosunu görmek istiyorsanız tıklayıınız..

Teşekkürler :)

Ismail Akbudak

CSS ile İkonlar Oluşturma

Leave a Reply Cancel reply