CSS Sprite Tekniği
Yazar: Volkan Görgülü | Yayın Tarihi:
02 Temmuz 2008 | Yorumlar:
68 Yorum
Kategori: CSS & XHTML
Merhaba, blogumda ilk değinmek istediğim konu CSS Sprite tekniği, daha önce bu konu üzerine CSS-Tricks.com’da Chris ile beraber bir paylaşımda bulunmuştuk ve Smashing Magazine, 2008 Ocak ayının en iyileri adlı yazısında paylaşımımıza yer vermişti. Bende kendi blogumda paylaşımlarıma bu konu ile başlamak istedim.
Aşağıdaki resme tıklayarak ulaşabileceğiniz videoda CSS Sprite Tekniği Nedir?, Neden Kullanılabilir? Avantajları gibi konulara değiniyorum ve normal bir menuye CSS Sprite Tekniği uyguluyorum.
Ayrıca videoda geliştirdiğim örneğin, CSS Sprite Öncesi sürümü ve Sonrası sürümü sayfalarınada sağladığım bağlantılardan ulaşabilirsiniz.
Online Sprite Üreteci
Malesef bu konuya videoda değinmeyi unuttum, bir çok resim dosyasını, tek bir resim dosyasında birleştirmek biraz zamanınızı alabilir, ve bu zaman konusunda ise CSS Sprite Üreteci yardımınıza koşuyor, resimlerinizi ZİP formatında sıkıştırarak üretece yolluyorsunuz ve o size tüm resimlerin birleştiği bir dosya sunuyor, kesinlikle size zaman kazandıracak bir araç.
Kullandığım Dosyalar
- Menunun ilk sürümü
- Menunun CSS Sprite uygulanmış sürümü
- CSS Sprite için kullandığım PhotoShop çalışmam
Sizin Düşünceleriniz?
Peki sizler bu teknik hakkında ne düşünüyorsunuz, projelerinizde kullanıyor musunuz ya da kullanmayı düşünür müsünüz?
Benim uygulama videom hakkında düşüncelerinizide paylaşırsanız çok mutlu olurum.
Yeni Paylaşımlarımdan Haberdar Olmak İçin
RSS ya da Twitter yayınımı takip edebilirsiniz.
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
Fatih Hayrioğlu
03 Temmuz 2008´de söylemiş
Video anlatımı güzel olmuş eline sağlık.
Konu site hızlarını arttırmak için önemli bir içerik.
Devamını bekliyoruz
2
Hakan Görgülü
03 Temmuz 2008´de söylemiş
Öncelikle siteniz hayırlı olsun.Bilgi paylaşmak tabikide çok güzel bir şeydir ve siz bunu çok iyi yapıyorsunuz.Yani hiç bir şey bilmeyen bile videoyu izleyince o konuda en az sizin kadar bilgi edinmiş oluyor.Bilgilerinize ihtiyacı olan çok fazla insan olduğunu düşünüyorum ve devamının gelmesini diliyorum. Kolay Gelsin..
3
Volkan Görgülü
03 Temmuz 2008´de söylemiş
@Fatih Hayrioğlu, yorumunuz benim için çok değerli, teşekkürler.
@Hakan Görgülü, Sağol Hakancım (Kendisi benim öz kardeşim) yorumun için
4
oceangray
04 Temmuz 2008´de söylemiş
tebrikler.. yazıyı videoyla pekiştirmek güzel bir fikir… devamını bekliyoruz..
5
Çağatay
05 Temmuz 2008´de söylemiş
Aslında hayati önem taşıyan bir konu.
Fakat çoğu insan css sprite tekniğine yan gözle bakmayı dahi reddecek hatta gereksiz bulacaklardır.
Gerçi ben bile üşendim şunca zaman
Başarılar
6
Öner Demircioğlu
05 Temmuz 2008´de söylemiş
Çok güzel bir çalışma elinize ağzınıza sağlık
ben joomla ile çalışıyorum inşallah bu sistemi joomla ile uygulamaya çalışacağım inşallah becerebilirim
7
Volkan Görgülü
05 Temmuz 2008´de söylemiş
@oceangray, çok teşekkür ederim
@Çağatay, sana katılıyorum evet ama paylaşımımda bağlantısını verdiğim Online Sprite Üreteci işini çok kolaylaştırıyor, bence bir dene.
@Öner Demircioğlu, teşekkür ederim, CSS aracılığı ile yapılabilen bir teknik olduğundan bir sorun çıkacağını sanmıyorum.
8
Uğur Özşahin
05 Temmuz 2008´de söylemiş
Öncelikle hayırlı olsun demek istiyorum.
CSS Sprite konusunu biraz biliyordum. Ancak öğrenmek istediğim farklı bir durum söz konusu. Farklı genişliklere sahip grafik dosyaları için bu tekniği uygulamak ne kadar mümkün? Yada şöyle de sorulabilir CSS Sprite tekniğini sadece aynı tarz grafik dosyaları için uygulamak mı daha mantıklı? Örn: Sadece menü icon’ları veya sadece kenarlıklar vb.
9
Volkan Görgülü
05 Temmuz 2008´de söylemiş
@Uğur Özşahin, öncelikle çok teşekkür ederim, CSS Sprite tekniğini farklı genişliklere sahip grafik dosyaları içinde uygulamak gayet mümkün.
En geniş resminizin genişliğinde bir resim dosyası açıp yukarıdan aşağıya resimlerini sıralayarak yerleştirin.
Background-position özelliği ile resmi kontrol edebildiğimiz için bir sorun olmayacaktır.
Bu konuya değinmeyi unutmuşum, hatırlattığın için teşekkür ederim. Küçük bir örnek yapıp yüklemeyi planlıyorum.
10
Cihan ÖNER
05 Temmuz 2008´de söylemiş
Öncelikle hayırlı olsun demek istiyorum. Bir anda sitenin 1 yıl sonra ki hali gözümde canlandı, onlarca faydalı video ve Yüzlerce yorum
Gerçekten güzel bir başlangıç ve faydalı bir video hazırlamışsın. Sprite tekniğinin mantığını sayende öğrendim teşekkür ederim. Şahsen senin takipcin olucam bundan sonra.. Artık Fatih Hayrioğlundan sonra bir yol göstericimizde sen oldun. Başarılarının devamını dilerim.
Saygılarımla..
11
Volkan Görgülü
05 Temmuz 2008´de söylemiş
@Cihan Öner, güzel dileklerin için çok teşekkür ederim, Fatih Hayrioğlu çok değerli bir abimiz, umarım bende onun gibi türk internet kullanıcılarına kaliteli türkçe içerik sunabilirim.
Kendisi benim idollerimden birtanesi.
12
MuratK
05 Temmuz 2008´de söylemiş
Bu güzel çalışma için teşekkür ederim.Sizi takip etmeye devam ediyorum.Çalışmalarınızda kolaylıklar dilerim.
13
Çağatay
05 Temmuz 2008´de söylemiş
@Volkan Görgülü
Evet bahsettiğiniz sihirbaz bir hayli işe yarayacaktır. Deneyeceğim.
Mutlu günler
14
Güler Yüksel
06 Temmuz 2008´de söylemiş
Web sitesi alanında çalışanlar için çok yararlı teknik bilgi ve yenilikleri sesli/görüntülü vermeniz çok yararlı bir fikir, tebrik ederim. Bu alanda kendini geliştirmek isteyenlere önemli bir kaynak sunuyorsunuz. İşin son kullanıcı tarafında olan biri olarak canlı ve hızlı anlatımınız öğrenmeyi kolaylaştırıyor.. İzlemeye devam edeceğim. Başarılar..
15
Levent Candan
07 Temmuz 2008´de söylemiş
Bu güzel çalışmlarınızdan ötürü teşekkürlerimi sunarım. Ayrıca Fahri Bey’ e de buraya yönlendirdiği için teşekkür ederim.
16
alico
07 Temmuz 2008´de söylemiş
Hayırlı olsun blog’un. Sprite deyince nedir dedim ancak tekniği anlatınca video gösterimine devam etmeme gerek kalmadı ezbere bildiğim bir mevzu.
Tekniğin tek request ile sağladığı avantaj göz ardı edilemez elbette. Ancak bu tekniği kullanım alanın dışını çıkılıp genel çalışmaya yansırsa bize işimizde zaman kazandırmaz aksinezaman kaybettirir.
1. Panel yahut sitemizde tüm materyallerde kullandığımız alanları tek resim dosyaları içersinde guruplayıp position değerine göre çağırmamız kullandığımız alanların yoğunluğuna göre takibi artık mümkün olamayacak şekilde css back position değerlerine yol açar.
Yani filan kutunun başlığının yanındaki için resim dosyasından şu gurubtaki postion değerleri yok falan bölümün altındakiler için postion değerleri şuraya yazıyorum unutma alico diye dimli notlar bırakmamız. Yani css’leri gruplamada bir yerden sonra ciddi sorun olur.
2. Birinci maddeden ötürü kabarık css dosyası ortaya çıkar.
3. Css yüklenmeden de linklerle birlikte erişilebilirliğin göz önün de bulundurulması gerek Bu da tam bir dezavantaj.
4. Bu position mevzu girdikleri css yoğunluğuna göre her zaman kararlı çalışmıyabiliyorlar.
Elbette bu dezavatanjları bu tekniğin kullanılmaması için söylemedim. Örnekte açıklandığı gibi kullanılmış olduğu yer tamamen verimli bir dönüş sağlaması açısından doğru bir yerdir.
Hangi tekniğin neyi nerede nasıl kullanılması gerektiği de puzzle’ın tamamına bakmayı gerektircek bir tecrübe arzettirdiğinden ilk konunu ilk olarak okuyup adım atanların, tek geçerli kural sanma yanılgısına düşmemesi için dipnot olarak belirtmekte yarar var.
makale için teşekkür eder kolaylıklar dilerim.
17
Göksu Özen
09 Temmuz 2008´de söylemiş
Güzel bir paylaşım olmuş. Teşekkür ediyorum. Çok basit ve anlaşılır bir dille anlatmışsınız. Videolarınızın devamını dilerim.
18
Salih ÖZEL
10 Temmuz 2008´de söylemiş
Merhabalar Volkan arkadaşım bu gösterdiğin teknik özellikle cms sistemlerde kullanıldığını görmüştüm gerçekten Web sayfasının performansını bir nebze öteye taşıyor ama nasıl olduğu hakkında bilgim yoktu bunuda video anlatımın ile öğrendim sana çok teşekkür ediyorum saol anlatımlarının devamını bekliyoruz.
19
Murat BEŞER
10 Temmuz 2008´de söylemiş
Merhabalar,
anlatımınız çok güzel, ama sanırım doğaçlama olarak bir anlatım yapılmış. Bu yüzden de arada teklemeler ve benzeri durumlar mevcut.
Aslında öncelik ile normal bir makale yazar gibi bu konu üzerinde düşünülmeli ve üzerine yazılmalı. Bende kendi blog’umda(kısmet olurda açabilir isem) bazı konularda videolu anlatımı düşünüyordum. Siz benden önce davrandınız
20
SvY
11 Temmuz 2008´de söylemiş
Merhaba,
CSS hakim olmayan kişiler tarafından bile rahatça anlaşılabilecek bir ders olmuş..
Kendi adıma teşekkür ederim..
21
gezgin123
11 Temmuz 2008´de söylemiş
Elinize kolunuza vede dilinize saglık.cok yalın ve akıcı bir anlatım. teşekur ediyoruz.sitenizi sıkkullanılanlara ekledim
ve yeni calişmalarınızı bekliyoruz
22
ilkay
11 Temmuz 2008´de söylemiş
Güzel bir yöntem. Css ile menü oluştururken de 2 resim için kullandığım bir yöntem.
Benim sorum acaba resimler arası neden 10px. Bunu minimuma indirsek hız artmaz mı?
23
Volkan Görgülü
11 Temmuz 2008´de söylemiş
Arkadaşlar, iyi dilekleriniz için çok teşekkür ederim, yorumlarınız ile blogumun içeriğine katkıda bulunduğunuz için çok teşekkür ederim
@İlkay, 1px lik boşluklarda bırakabilirsin ama öyle bir durumda ziyaretçiler yazıları büyüttüklerinde boşluk 1px olduğundan 1 resim gözükecek alanda 2 resim gözükebilir (1 resmin tamamı ve diğer resmin az bir kısmı).
24
ilkay
12 Temmuz 2008´de söylemiş
Evet haklısın, ben onu hesaba kaymamıştım.
25
Volkan Altınbaş
15 Temmuz 2008´de söylemiş
Yakın zamanda bloğumda anlatmayı düşündüğüm CSS Sprite tekniğini gayet güzel şekilde anlatmışsın. Tekniği anlatırken kullandığın video ise gerçekten güzel olmuş. Paylaşımın için teşekkürler adaş.
26
HC
16 Temmuz 2008´de söylemiş
Volkan harika bir paylaşım olmuş, konuya çok yabancı olanların bile öğrenebileceği şekilde işlemişsin, takipdeyim.
27
sedran
18 Temmuz 2008´de söylemiş
Çok güzel anlatımlar yapıyorsun teşekkürler, abone oldum ben de böyle anlatımlara gerçekten çok ihtiyacım var
28
ümran
02 Ağustos 2008´de söylemiş
video bulunamadı diyor.. bende mi bir hata var acaba?
29
Volkan Görgülü
02 Ağustos 2008´de söylemiş
@Ümran, bir sorun oluşmuş, video şu anda izlenebilir durumda, uyarınız için teşekkürler.
30
eXspet
20 Ağustos 2008´de söylemiş
Hocam bu gün r10′dan bir konu aracılığıyla geldim, o konuda bahsi geçen videoyu izleyecektim, vazgeçtim; bu blog’u baştan aşağı takip etmek gerekir diye düşündüm
Şimdi ilk konunuzu okudum ve ilk videonuzu izledim, gerçekten çok güzel anlatmışsınız.Fakat, bence (gördüğüm kadarıyla) bu Sprite tekniği, çok da gerekli bir şey değil; belki harcadığınız zamana bile deymeyebilir..
Bu arada FeedBurner’dan da üye oldum, artık sürekli takip ediyorum sizi
Devamını bekliyoruz, başarılar.
31
Burak
25 Eylül 2008´de söylemiş
Videoda bir sorun var kullanıcı bilgisi istiyor Volkan abi.
32
Volkan Görgülü
25 Eylül 2008´de söylemiş
@Burak, sorun giderildi
33
Burak
25 Eylül 2008´de söylemiş
Tek kelime ile bu tekniğe hayran kaldım.Ama bir sorum olacak bunu ben wordpress’e bir yazı içerisinde birden fazla resim eklediğimiz zaman bu tekniği nasıl uygulayabiliriz?
Aslında biraz biliyorum bu videoya göre bir css dosyası oluşurup gerekli koordinatları belirledikten sonra…
buraya kadar biliyorum maalesef.WordPress’te yaz bölümünde kaynak’a gelip ekleyeceğim kodlar ne olabilir acaba?
Ama şu var resim dosyası fazla yüklemesin diye biz bir css dosyası yapıyoruz ve onu yüklektiriyoruz siteye.Aynı hesap olabilirmi avantaj sağlayabilirmi hızlı açılmasında sitenin?
34
Volkan Görgülü
25 Eylül 2008´de söylemiş
@Burak, CSS Sprite tekniğini WordPress temamızda kullandığımız simgeler için kullanabiliriz, ama yazımızın içeriği ile alakalı resimler için kullanırsak durumu biraz abartmış oluruz. Kısacası gerek yok.
35
Burak
25 Eylül 2008´de söylemiş
Teşekkürler volkan abi.(:
36
PTC Master
27 Eylül 2008´de söylemiş
Teşekkürler.
Ama gerçekten çok uğraştırıyor
37
Ozan AKSAKBOGA
30 Eylül 2008´de söylemiş
Cok net, herkesin anlayabilecegi dilde bir anlatim olmus tesekkürler,
Saygilar.
38
gevv
10 Ekim 2008´de söylemiş
Teşekkürler bu yöntemi yan menü içinde kullanabilitmiiz son yorumlar kategoriler vs çok uğraştım ama beceremedim
39
Egemen Özbeyli
12 Ekim 2008´de söylemiş
çok güzel bir video ellerine sağlık
ben bişey sormak istiyorum benim yaptığım resimlerin boyutları seninkine göre biraz farklı.
Ben “-px” değerleri nasıl görebilirim.Çünkü tek tek uğraşmak çok zor olacak gibi geldi.Mesela arada böle bi boşluk var vede o -313px e gelio hesabını yapmak için kısa bir yol varmı acaba.Şimdiden çok teşekkür ediyorum…
40
Volkan Görgülü
13 Ekim 2008´de söylemiş
@Egemen Özbeyli, ben bahsettiğiniz bilgiyi edinmek için Photoshop’ta Info penceresini kullanıyorum.
41
Egemen Özbeyli
13 Ekim 2008´de söylemiş
Photoshopta bi o özelliğe alışamadım
Teşekkür ederim…
42
Göktürk Doğan
19 Ekim 2008´de söylemiş
Teşekkürler Volkan abi çok güzel bir paylaşımm…
Bunun gibi güzel örnekler vermeni istiyoruz…
çalışmalarında başarılar…
43
gevv
20 Ekim 2008´de söylemiş
sanırım saçma bir soru sordum olumlu olumsuz bir cevap verilse ne güzel olurdu sitenizi sadece uzman işi bilen kişiler takip etmiyor
..
44
Server DOĞAN
29 Ekim 2008´de söylemiş
Volkan kardeşim sen, övgüye değer bir insansın inan çok hak ediyosun övülmeyi lütfen böyle devam et.
45
Orhan
14 Aralık 2008´de söylemiş
Merhaba volkan abi ben orhan 17 yaşındayım ve senin gibi abileri görmek çok güzel web tasarım okuyorum ve böyle kaliteli kişiler yanında seneye staj yapmayı çok istiyorum ve gelişmek tabiki içimde bir hırs var gelişme adına photoshop bilgimde var ileri düzey denenecek kadar.Ancak css konusunda sıfırım gelişmek adına neler yapabilirim tavsiyelerin nelerdir çünkü geleceğim web tasarımcısı
46
koç
24 Ocak 2009´de söylemiş
volkan kardeş güzel bi paylaşım hazırlamıssın eline sağlık. ben internet işinde yaniyim, bu konuları öğrenmek istiyorum. blog sayfası açtım kendime ve bu sayfayı geliştirmek istiyorum, fakat fazla bilgim yok nerden başlamalayım ne tavsiye edersin mail olarak geçersen çok sevinirim.
47
Serdar
17 Mart 2009´de söylemiş
Tebrikler çok yararlı bir video olmuş.. Sadece anlatımınızda biraz yavaşlık var lakin oda bunun ilk videonuz oluşundandır diye tahmin ediyorum.. Anlatımda hazırladığınız grafikler v.b çalışmalar çok büyük bir yarar sağlamış dinleyenler ve bilhassa benim gibi görsel olarak daha net anlayanlar için.. Emeğinize ve bilginize sağlık.. Başarılarınızın devamını dilerim..
48
yedincisenol
31 Mart 2009´de söylemiş
Sprite tekniğini senden öğrendim, bu şekil video yayınlarıyla öğrenmek daha kolay. Çok faydalı oldu artık bu tekniği kullanmaya özen göstericem.
Bi’de şu yorum yazma kısmını yorumlardan önceye alırsan , yorum yazmak isteyen kişi bi’sürü yorumu atlamakla uğraşmaz.
49
Guardian
02 Nisan 2009´de söylemiş
Video almak istediğim asıl konuya gelene kadar heyecandan canım çıktı
Sürükleyici ve güzel bir içerik olnuş, teşekkür ederim..
50
Hüseyin İskender
11 Temmuz 2009´de söylemiş
Bu Tekniği Öğrendiğim Gerçekten çok iyi oldu, bir web sitesine girdiğimde resimlerin birbiriyle orantısız yüklenme zamanları gözüme çarpan ilk şey olur ve can sıkar, bu yöntemle bu durumu aşmak çok iyi olmuş. Volkan bey, bu gibi her yerde anlatılmayan bilgileri paylaştığınız için çok teşekkür ederim.
51
namso-01
31 Ocak 2010´de söylemiş
gayet güzel bir anlatım olmuş ellerine sağlık
52
dizi
24 Şubat 2010´de söylemiş
cok güzel bir site tebrikler.Teknik süper gerçekten.Bu arada bu anlatım tekniğini hazırlama metodu konusunda yardımcı olabilir misiniz? Hangi programlarla bu tarz bir ders hazırlayabilirim?
53
Sercan Aksoy
30 Mart 2010´de söylemiş
Anlatım için teşekkür ederim, fakat bazı sayfalara ulaşmakta zorluklar yaşıyorum 404hatası nedeniyle diğer yazılarınıza da bakmak gerekir dimi
54
emre
17 Haziran 2010´de söylemiş
ya video çalışmıyor indiren varmı
Geri İzlemeler