Css İkon Set Kullanımı
Merhaba Arkadaşlar,
Bu makalemizde sizlere css içerisinde kullandığımız bir parametre olan ” background-position ” değerinden bahsedeceğim. Bu anlatım için de bana göre en uygun yollardan birisi olan ikonlardan yararlanacağım. Makale sonunda position değerini kullanarak ne kadar geniş bir alana farklı farklı class’lar ile hitap edebileceğimizi görmüş olacağız.
İşlemlerimize başlarken hazır olarak elimizde bulunan veya internetten kısa bir araştırma sonucunda elde edebileceğimiz ” .png ” uzantılı bir resim ediniyoruz. Daha sonra bir klasör içerisine atacağımız bu resmimizin yanına ” index.html ” isimli web sayfamızı yaratıyoruz. İlk olarak web sayfamızın boş halinin kodlarını görelim :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Şimdi ilk olarak ” icon ” isimli bir class oluşturuyoruz. Bu class’ a verececeğimiz değerler tüm ikonlarımızın ortak özelliklerini oluşturmalıdır. Genişlik , yükseklik , arka plan resminin url’ i gibi alanları tekrar tekrar yazmak yerine tek seferde tanımlamış olacağız. Benim ikonlarımın bulunduğu resim için en yüksek boyuta baktığımda 32px*32px’lik bir alan yeterli olmaktadır. Oluşturduğum icon class’ı nın eklendiği hali ile kod yapım şu şekildedir :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.icon{width: 32px; height: 32px; background: url("icons.png"); display:block;}
</style>
</head>
<body>
</body>
</html>
Şimdi yapacağımız işlemde her bir ikon için ayrı ayrı birer açacağız ve class bölümüne ilk olarak ” icon ” daha sonra da o alana gelecek olan ikon için vermek istediğimiz class ismini yazacağız. Böylece ” icon ” class’ı sayesinde genişlik , yükseklik ve arkaplan resmini çağırmış olup ikinci class ile de yalnızca background-position değerini vermiş olacağız. İşlemlerimiz sonucunda oluşacak görüntü şu şekilde olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
span{margin-bottom: 20px;}
.icon{width: 32px; height: 32px; background: url("icons.png"); display: block;}
.jar{background-position: 0 0;}
.round-jar{background-position: -81px 0;}
.large-glass{background-position: -161px 0;}
.logo-glass{background-position: -241px 0;}
.nologo-glass{background-position: -318px 0;}
.bread{background-position: -386px 0;}
.slice-bread{background-position: -465px 0;}
.drop{background-position: -544px 0;}
.cup1{background-position: -618px 0;}
.cup2{background-position: -695px 0;}
.propeller{background-position: 0 -62px;}
.loop{background-position: -81px -62px;}
.microphone{background-position: -156px -62px;}
.pizza{background-position: -233px -62px;}
.pizza2{background-position: -312px -62px;}
.replay{background-position: -388px -62px;}
.previous{background-position: -462px -62px;}
.stop{background-position: -546px -62px;}
.play{background-position: -621px -62px;}
.next{background-position: -693px -62px;}
</style>
</head>
<body>
<span class="icon jar"></span>
<span class="icon round-jar"></span>
<span class="icon large-glass"></span>
<span class="icon logo-glass"></span>
<span class="icon nologo-glass"></span>
<span class="icon bread"></span>
<span class="icon slice-bread"></span>
<span class="icon drop"></span>
<span class="icon cup1"></span>
<span class="icon cup2"></span>
<span class="icon propeller"></span>
<span class="icon loop"></span>
<span class="icon microphone"></span>
<span class="icon pizza"></span>
<span class="icon pizza2"></span>
<span class="icon replay"></span>
<span class="icon previous"></span>
<span class="icon stop"></span>
<span class="icon play"></span>
<span class="icon next"></span>
</body>
</html>
Gördüğünüz üzere olabildiğince anlamlı class’lar atamaya çalışarak düzgün bir yapı ile tüm ikonlarımızı html sayfamız içerisine ekleyebildik. Artık herhangi bir yerde örneğin bir mikrofon ikonu gerekli olduğunda gerekli alana ” icon microphone ” şeklinde class’ lar verdiğimizde ikonumuzu bu alan içerisine çekmiş olacağız.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 44 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar