CSS Sprite Tekniği
Yazar: Volkan Görgülü | Yayın Tarihi:
02 Temmuz 2008 | Yorumlar:
33 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.
Geri İzlemeler