CSS Sprite Tekniği Nasıl Yapılır ?

10.05.2014 20:55

umittoper WM Aracı Kullanıcı

Üyelik 18.02.2014
Yaş/Cinsiyet 38 / E
Meslek Yönetim Bilişim Sistemleri
Konum Bursa

Ad Soyad Ü** T**
Mesajlar 90
Beğeniler 4 / 8
Ticaret 1, (%100)

Merhaba Arkadaşlar,

oyunlaroyun1.com sitemde css sprite tekniğini kullanmak istiyorum. Bunun için google ve youtube da bir çok çalışma izledim. Kodlamaları çok iyi bilmediğim için bir aşama kaydedemedim. Sitede çok fazla birleşecek resim yok. Acaba yardımcı olabilecek arkadaş var mı ?

Teşekkürler.

10.05.2014 21:23

#2

mustea WM Aracı Kullanıcı

Üyelik 15.04.2014
Yaş/Cinsiyet 35 / E
Meslek Yazılım
Konum Ankara

Ad Soyad M** Ş**
Mesajlar 118
Beğeniler 4 / 24
Ticaret 3, (%100)

Css Sprite tekniği çok basittir. Web sayfan açılırken yüklenmesi gereken her resim için tarayıcın tek tek resimlerle bağlantı kurar. Bu da zaman kaybı anlamına gelir.
Bunun yerine bütün resimleri tek bir resimde toplayarak css den resim üzerindeki kordinatlar ile resmin bir kısmını çağırarak hızlanma sağlayabilirsin. Örnek olarak;

width:800 height:600 bir resmin var ve resmin adı logo.png

#logo{background:url('logo.png') 14px 12px;width:275px;height:47px;}

yukarıdaki kod ile kalın yazan yer resim üzerindeki koordinattır. -14 width, 12 ise height'i temsil eder. Yani bu kod ne yapar;
Resmin 14 widht(genişlik) noktası ve 12 height(yükseklik) noktasından başlar 275 width ve 47 height bölümünü getirir.

1 kişi bu mesajı beğendi.

10.05.2014 22:08

#3

umittoper WM Aracı Kullanıcı

Üyelik 18.02.2014
Yaş/Cinsiyet 38 / E
Meslek Yönetim Bilişim Sistemleri
Konum Bursa

Ad Soyad Ü** T**
Mesajlar 90
Beğeniler 4 / 8
Ticaret 1, (%100)

mustea adlı üyeden alıntı

Css Sprite tekniği çok basittir. Web sayfan açılırken yüklenmesi gereken her resim için tarayıcın tek tek resimlerle bağlantı kurar. Bu da zaman kaybı anlamına gelir.
Bunun yerine bütün resimleri tek bir resimde toplayarak css den resim üzerindeki kordinatlar ile resmin bir kısmını çağırarak hızlanma sağlayabilirsin. Örnek olarak;

width:800 height:600 bir resmin var ve resmin adı logo.png

#logo{background:url('logo.png') 14px 12px;width:275px;height:47px;}

yukarıdaki kod ile kalın yazan yer resim üzerindeki koordinattır. -14 width, 12 ise height'i temsil eder. Yani bu kod ne yapar;
Resmin 14 widht(genişlik) noktası ve 12 height(yükseklik) noktasından başlar 275 width ve 47 height bölümünü getirir.

GTmetrix sitesinde siteyi analiz ettim bunlar çıktı:
http://www.oyunlaroyun1.com/temalar/t3/resimler/anasayfa.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/blokalt1.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/menuayirac.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/reklambaslik.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/vucutust.gif

bu resimleri de http://css.spritegen.com/ adresine upload ettim şu kodları verdi:

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.vucutust, .blokalt1, .reklambaslik, .anasayfa, .menuayirac
{ display: block; background: url('png.png') no-repeat; }

.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }
----------

bunlar tamam bundan sonrasını ne yapacağımı bilmiyorum. Üsttekini hangi dosyaya alttakini hangi dosyaya koyacağım ?

10.05.2014 22:11

#4

DenizOZTURK WM Aracı Kullanıcı

Üyelik 02.02.2014
Yaş/Cinsiyet 26 / E
Meslek -
Konum Diğer

Ad Soyad D** Ö**
Mesajlar 478
Beğeniler 189 / 158
Ticaret 4, (%100)

umittoper adlı üyeden alıntı

GTmetrix sitesinde siteyi analiz ettim bunlar çıktı:
http://www.oyunlaroyun1.com/temalar/t3/resimler/anasayfa.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/blokalt1.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/menuayirac.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/reklambaslik.gif
http://www.oyunlaroyun1.com/temalar/t3/resimler/vucutust.gif

bu resimleri de http://css.spritegen.com/ adresine upload ettim şu kodları verdi:

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.vucutust, .blokalt1, .reklambaslik, .anasayfa, .menuayirac
{ display: block; background: url('png.png') no-repeat; }

.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }
----------

bunlar tamam bundan sonrasını ne yapacağımı bilmiyorum. Üsttekini hangi dosyaya alttakini hangi dosyaya koyacağım ?

Bu şekilde çalışması lazım . Yapacak baska birşey yok yani .

10.05.2014 22:13

#5

umittoper WM Aracı Kullanıcı

Üyelik 18.02.2014
Yaş/Cinsiyet 38 / E
Meslek Yönetim Bilişim Sistemleri
Konum Bursa

Ad Soyad Ü** T**
Mesajlar 90
Beğeniler 4 / 8
Ticaret 1, (%100)

Deniz ÖZTÜRK adlı üyeden alıntı

Bu şekilde çalışması lazım . Yapacak baska birşey yok yani .

işte bunların css ve html dosyalara konulması lazım. Nereye koyucam tam olarak ?

10.05.2014 22:15

#6

DenizOZTURK WM Aracı Kullanıcı

Üyelik 02.02.2014
Yaş/Cinsiyet 26 / E
Meslek -
Konum Diğer

Ad Soyad D** Ö**
Mesajlar 478
Beğeniler 189 / 158
Ticaret 4, (%100)

umittoper adlı üyeden alıntı

işte bunların css ve html dosyalara konulması lazım. Nereye koyucam tam olarak ?

CSS EKLENECEK

.vucutust, .blokalt1, .reklambaslik, .anasayfa, .menuayirac
{ display: block; background: url('png.png') no-repeat; }

.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }

HTML Olarak nerede istiyorsan oraya class="anasayfa" gibisinden yazıcaksın .

Kullanım için ör ;

10.05.2014 22:25

#7

umittoper WM Aracı Kullanıcı

Üyelik 18.02.2014
Yaş/Cinsiyet 38 / E
Meslek Yönetim Bilişim Sistemleri
Konum Bursa

Ad Soyad Ü** T**
Mesajlar 90
Beğeniler 4 / 8
Ticaret 1, (%100)

Deniz ÖZTÜRK adlı üyeden alıntı

CSS EKLENECEK

.vucutust, .blokalt1, .reklambaslik, .anasayfa, .menuayirac

{ display: block; background: url('png.png') no-repeat; }



.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }

.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }

.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }

.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }

.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }

HTML Olarak nerede istiyorsan oraya class="anasayfa" gibisinden yazıcaksın .

Kullanım için ör ;

10.05.2014 22:27

#8

DenizOZTURK WM Aracı Kullanıcı

Üyelik 02.02.2014
Yaş/Cinsiyet 26 / E
Meslek -
Konum Diğer

Ad Soyad D** Ö**
Mesajlar 478
Beğeniler 189 / 158
Ticaret 4, (%100)

umittoper adlı üyeden alıntı

HTML Kullanımına örnek o nerede kullanacaksan li h1 h2 h3 vs vs hangi tag da kullanacaksan yanına class="ad" diye eklemen lazım . Uzak bağlantı yapamam malesef .

10.05.2014 22:37

#9

umittoper WM Aracı Kullanıcı

Üyelik 18.02.2014
Yaş/Cinsiyet 38 / E
Meslek Yönetim Bilişim Sistemleri
Konum Bursa

Ad Soyad Ü** T**
Mesajlar 90
Beğeniler 4 / 8
Ticaret 1, (%100)

Deniz ÖZTÜRK adlı üyeden alıntı

HTML Kullanımına örnek o nerede kullanacaksan li h1 h2 h3 vs vs hangi tag da kullanacaksan yanına class="ad" diye eklemen lazım . Uzak bağlantı yapamam malesef .

Bunu style.css ye kelicem:
.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }
----------
Bunu da ust.tpl dosyasına eklicem şu şekilde

bu şekilde mi olacak ?

10.05.2014 23:05

#10

DenizOZTURK WM Aracı Kullanıcı

Üyelik 02.02.2014
Yaş/Cinsiyet 26 / E
Meslek -
Konum Diğer

Ad Soyad D** Ö**
Mesajlar 478
Beğeniler 189 / 158
Ticaret 4, (%100)

umittoper adlı üyeden alıntı

Bunu style.css ye kelicem:
.vucutust { background-position: -10px -0px; width: 1000px; height: 7px; }
.blokalt1 { background-position: -10px -17px; width: 310px; height: 3px; }
.reklambaslik { background-position: -330px -17px; width: 310px; height: 3px; }
.anasayfa { background-position: -650px -17px; width: 42px; height: 36px; }
.menuayirac { background-position: -702px -17px; width: 2px; height: 44px; }
----------
Bunu da ust.tpl dosyasına eklicem şu şekilde

bu şekilde mi olacak ?

HTML Kodlarınızı verin uyarlayıp yolluyayım

CSS Sprite Tekniği Nasıl Yapılır ?

Üye Girişi Yap