CSS sprite - ne oldukları ve nasıl kullanılacağı. CSS sprite'ları oluşturun. Örnekler sprite png indir

Beğendi:
27

Beğenmedikleri: 4

Mevcut çeviri yok.

sprite

önce veya sonra"önce""sonra""sonra"

kızgın kuş angry.png. index.html

UTF-8 index.html windows-1251 style.css kızgın kuş

http://spritecow.com

angry.png,

kızgın kuşstil dosyası style.css imgs /.Şöyle çıktı:

Mevcut çeviri yok.

CSS sprite, web siteniz için tek bir grafik dosyasında birleştirilmiş grafiklerdir. "Neden bir dosya?" - sen sor. Gerçek şu ki, görüntüleri depolamaya yönelik bu yaklaşım, web sayfalarının performansını artırabilir ve grafik görüntüleri daha düzenli bir şekilde depolayabilir. Sprite kullanmak için en iyi uygulamalardan bazılarına bir göz atalım. Sprite'ların adı size oyun sprite'larını, retro oyun konsollarını ve hatta günümüzde çok popüler olan tarayıcı oyunlarını hatırlatabilir:

Yani Web Tasarımına uygulanabilir, sprite siteniz için birkaç görüntü içeren tek bir büyük dosyadır, bu da dosyayı indirmek ve ağ üzerinden aktarmak için zaman kazandırır. Örneğin bir hareketli grafik 20-30 görüntü içerdiğinde, bu, sunucudaki yükü önemli ölçüde kolaylaştırabilir, çünkü bu görüntüler ayrı olarak depolanırsa, sunucunun bu tür her bir görüntüyü elde etmek için sırasıyla 20-30 ayrı istekte bulunması gerekir. Sprite sayesinde, sunucuya yalnızca bir HTTP isteği yapılır - tek bir görüntü almak için. Bir sprite görsel olarak tam olarak "okunabilir" görünmeyebilir, çünkü asıl görevi tasarımınızın farklı "parçalarını" bir araya getirmektir. Örneğin, bir hareketli grafik şöyle görünebilir:

Çoğu modern site sprite kullanır ve iyi bilinen VKontakte bir istisna değildir. Örneğin, arayüzün "parçalarını" tek bir dosyada, yani tanıdık simgeler:

CSS sprite kullanmanın temel noktası, sunucunun yalnızca tüm resimlerinizi içeren tek bir grafik dosyası göndermesi gerektiğidir ve çok sayıda tekil görüntüyü değil - ve CSS aracılığıyla bu grafik dosyasındaki herhangi bir küçük bölümü bir öğe için arka plan olarak görüntüleyebilirsiniz. Bazı insanlar tek tek görüntülerin daha hızlı yüklendiğini düşünür, ancak değildir. Çok sayıda resim içeren bir grafik dosyası yükleyerek, sunucuya yalnızca bir istek gönderiyoruz ve çok sayıda resim yüklerken, sunucuya daha fazla istek gönderiyoruz. Görüntüleri tek bir dosyada birleştirmek, yalnızca HTTP isteklerinin sayısını önemli ölçüde azaltmakla kalmaz,ve görüntünün genel dosya boyutunu küçültün.

İşte bir sprite için başka bir örnek. Batılı tanınmış bir web sitesinde grafik öğeleri şu şekilde depolar:

Bir sprite hazırlamak için en iyi zaman ne zaman sorabilirsin? Bunun için iki farklı yaklaşım var.

Farklı yaklaşımlar - web sitesi oluşturmadan önce ve sonra bir hareketli grafik oluşturma

Model sayfası oluştururken iki yaygın yaklaşım vardır:önce veya sonraweb sitenizi oluşturmak. Siteyi oluşturmadan önce tüm görüntüleri hareketli grafik sayfasına yerleştirebilirsiniz. Yaklaşım dediğimiz şey bu"önce"... Ek olarak, tüm görüntüleri ayrı dosyalar olarak oluşturabilir, bu da düzenlemeyi kolaylaştırır. Site oluşturulduktan ve tüm resimler hazırlandıktan sonra, manuel olarak veya birkaç araçtan birini kullanarak hızlı ve kolay bir şekilde hareketli grafik sayfası oluşturabilirsiniz. Buna yaklaşım diyeceğiz"sonra"... Hareketli grafik sayfaları sizin için yeniyse veya Web tasarımında yeniyseniz, yaklaşım sizin için daha uygundur"sonra"... Sprite oluşturmanıza yardımcı olacak, çoğu ücretsiz olarak dağıtılan ve sunulan birçok yardımcı program, hizmet ve program vardır.

Resimleri bir sprite içinde organize bir şekilde düzenleme

Photoshop'ta bir hareketli grafik oluştururken, tüm görüntüleri hemen organize bir şekilde ve sizin tarafınızdan seçilen belirli bir sırayla yerleştirmeniz önerilir, böylece daha sonra onlarla çalışmak kolay ve basit olur. Her bir hareketli grafik görüntüsü için boşluğu her zaman en yakın 10 piksele yuvarlamaya çalışın veya hepsi aynı boyuttaysa etraflarında daha fazla boşluk bırakın. Bir CSS stili yazmaya gelince, koordinat ölçülerini yazmak zorunda kalmazsınız ve istediğiniz görüntülerin koordinatlarını unutmanız daha az olasıdır. Farklı görüntülerin tek bir hareketli grafikte iyi bir şekilde yerleştirilmesine ilişkin bir örnek:

Teoriden pratiğe! Sprite Kullanarak Animasyonlu Angry Birds Kuşu Nasıl Oluşturulur

Böylece, Web Tasarımında bir sprite kavramıyla tanıştık, ancak pratik olmadan teori hiçbir şey değildir. Bu nedenle, şimdi sizinle ilk sprite'ımızı oluşturacağız ve bir HTML sayfasında basit bir animasyon yapmayı öğreneceğiz. Örneğimiz Angry Birds oyunundaki komik kırmızı kuş karakterine dayanacak. Öncelikle, 4 aşamalı kuş animasyonu içeren bir .PNG sprite görüntüsü hazırlayalım:

Diskte bir yerde bir dizin oluşturun kızgın kuş- oraya örneğimizin dosyalarını koyacağız. Sprite'ı kuşlarla bu dizine kaydedin ve dosyayı adlandırın angry.png. Bir sonraki adım, aynı dizinde adıyla bir dosya oluşturmaktır. index.html- bu bizim animasyon test sayfamız olacak. Ardından, bu dosyayı bir düzenleyicide açalım ve aşağıdaki kodu oraya koyalım:

Şimdi ne yaptığımızı biraz açıklayayım. İlk olarak, HTML belgemiz için kodlamayı ayarlıyoruz UTF-8bu, bizim tutmamız gerektiği anlamına gelir index.htmlbu kodlamada. Başka bir tane ayarlayabilirsiniz, örneğin, windows-1251, - görevimiz için önemli değil. Ardından, stil dosyasını belgeye bağladık style.css (henüz kataloğumuzda değil kızgın kuş, biraz sonra oluşturacağız). Ayrıca harici bir komut dosyasına bir bağlantı oluşturduk ve jQuery kitaplığını bağladık - jQuery kullanarak kuşumuzun resimlerini dinamik olarak değiştireceğiz ve "aşamalarını" hareketli grafikten değiştireceğiz. Ayrıca kuşu canlandırmak için kodu yerleştireceğimiz dahili bir JavaScript bloğu hazırladık. Son olarak, belgenin ana gövdesi, içinde bir DIV bloğu bulunan tek bir köprü içerir ve kimliği birdImage olarak ayarlanır ve varsayılan sınıf kuş uykusudur. Bu, kuşumuzun sayfayı açarken "uyuyacağı" anlamına gelir - bu, hareketli grafiğin içinde gözlerinin kapalı olduğu sol alt resme karşılık gelir. Şimdi sprite'ımızı "kesme" zamanı, yani ondan tek tek görüntüleri seçin.

SpriteCow.Com hizmetini kullanarak bir hareketli grafiği dilimleme

Bir hareketli grafiği "dilimleme" görevi oldukça zaman alıcıdır - hareketli grafikteki her bir görüntüyü tanımlayan koordinatlarla karıştırılmaması için özen gerektirir. Neyse ki, bugün bu baş ağrısını tasarımcıdan ve düzen tasarımcısından tamamen ortadan kaldıran hizmetler var. Ben dilimleme için kullanıyorum ve size http://spritecow.com hizmetini tavsiye ediyorum. Hizmetin özü basit ve çok kullanışlıdır - her kuş resmini fareyle seçiyoruz ve SpriteCow bize koordinatlı hazır bir CSS kodu veriyor. Tek yapmamız gereken, her kuş aşaması için sadece 4 stil belirlemek! Siteye girdikten sonra 2 düğme görüyoruz - "Resmi Aç" ve "Örnek Göster". İlk düğmeye ihtiyacımız var, tıklayın:

Açılan iletişim kutusunda - sprite dosyamızı seçin angry.png,daha sonra sprite'ımızın siteye nasıl yüklendiğini görüyoruz. Ardından, arka plan rengini tanımlamamız gerekir, bunun için "Arka Plan Seç" araç çubuğunu tıklayın ve hareketli grafiğimizin beyaz alanını işaret edin - bu, kuşun her aşamasını doğru şekilde kesmemize olanak tanır:

İlk resmi seçin ve bunun için otomatik olarak CSS kodunu alın:

Şimdi dizinimizde yaratma zamanı kızgın kuşstil dosyası style.css... Orada, oluşturulmuş 4 CSS kodu parçası ekleyeceğiz, ancak SpriteCow tarafından bize sunulan standard.sprite sınıfı yerine stillerimizi daha net bir şekilde adlandıralım. Ayrıca, hareketli grafik görüntüsü doğrudan dizinin kökünde depolandığından, gereksiz yol öğesini arka plan özelliğinden kaldıracağız - imgs /.Şöyle çıktı:

/ * "normal" kuş. Bir sprite * / .bird-normal (arka plan: url ("kızgın.png") no-tekrar -12px -16px; genişlik: 97px; yükseklik: 94px;) / * "Mutlu" kuş içinde sol üst resim. Sprite * / .bird-happy (arkaplan: url ("angry.png") no-again -118px -17px; genişlik: 97px; yükseklik: 94px;) / * "Uyuyan" kuşta sağ üst resim. Sprite * / .bird-sleeping (arka plan: url ("angry.png") no-again -12px -120px; genişlik: 97px; yükseklik: 94px;) / * "Kızgın" kuşta sol alt resim. Bir sprite * / .bird-angry içinde sağ alt resim (arka plan: url ("angry.png") no-tekrar -118px -120px; genişlik: 97px; yükseklik: 94px;)

Son adım, animasyonu oluşturmak için jQuery kodunu yazmaktır.

Artık hareketli grafiği başarıyla dilimlediğimize ve dosyamızdaki her görüntü için 4 stil yerleştirdik. style.cssköprümüzün üzerine geldiğimizde ve bağlantıya tıkladığımızda animasyon ekleyecek jQuery kodunu yazmamız yeterlidir. Hatırladığımız gibi, varsayılan olarak kuş uyuma sınıfımız var, yani. kırmızı kuşumuz bir belgeyi açarken "uyuyacak" :)

Tüm animasyon 3 jQuery yöntemine dayalı olacaktır:

• hover, imleci bir bağlantının üzerine getirmek ve imleci bağlantıdan "bırakmak" için kullanılan bir işleyicidir. İmlecin üzerine geldiğimizde, kuş "uyanacak" - yani. sınıf normalleşecek
• mousedown - bir bağlantıdaki sol fare düğmesine tıklamak için kullanılan işleyici. Bu durumda kuş "mutlu" olacak - yani. DIV bloğuna kuştan mutlu sınıf atanacaktır
• mouseup - sol fare düğmesini serbest bırakmak için kullanılan işleyici. Serbest bırakıldığında, kuş "kızacak" - yani. DIV bloğu classbird-angry olarak atanmıştır

Öyleyse aşağıdaki kodu, sayfada bulunan iç JavaScript bloğunda hazırladığımız yere yapıştıralım:

$ (document) .ready (function () (// $ ("# birdImage") canlandırmak için jQuery kodu buraya tıklayın. hover (function () ($ (this) .removeClass ("bird-sleeping"); $ (this) .removeClass ("kuş-kızgın"); $ (this) .removeClass ("bird-happy"); $ (this) .addClass ("bird-normal");), function () ($ (this ) .removeClass ("normal kuş"); $ (this) .removeClass ("kuş-kızgın"); $ (this) .removeClass ("kuş-mutlu"); $ (this) .addClass ("kuş uyuyan ");)); $ (" # birdImage "). mousedown (function () ($ (this) .removeClass (" bird-sleep "); $ (this) .removeClass (" bird-normal "); $ ( this) .removeClass ("kuş-kızgın"); $ (this) .addClass ("kuş-mutlu");)). mouseup (function () ($ (this) .removeClass ("kuş-uyuyan"); $ (this) .removeClass ("bird-normal"); $ (this) .removeClass ("bird-happy"); $ (this) .addClass ("bird-angry");));));

Bitti! Animasyonu test etme

Bu kadar! Kuşumuz hazır ve animasyonu ile sayfaya hayat verdi! :) Demoyu izleyebilirsiniz. Makalenin en altında örnek içeren bir arşiv indirin.

Sprite'lar oldukça ilginç ve basit bir teknolojidir. Şimdi size bundan biraz daha bahsedeceğim.

CSS sprite nedir?

Kısacası, CSS sprite tek bir dosyada birkaç görüntüdür. Yalnızca bir dosya var ve içinde birkaç resim var. Aynı zamanda ziyaretçiye tamamen görünmezdir. Siteyi gören herkes, birkaç ayrı resim gördüğünü düşünür.

Bu neden gerekli? Sprite'lar, kullanıcıdan gelen sayfa isteklerinin sayısını azaltır ve resimlerin genel boyutunu azaltır. Sonuç olarak, ziyaretçi siteyi daha hızlı görecektir.

Nasıl yapılır? Normal bir resmin genişliği ve yüksekliği artar, yani birkaç resim normal bir resmin üzerine yan yana yerleştirilir. Daha sonra bu setteki her bir görüntü, diğer tüm görüntülerin görülememesi için belirli bir genişlik veya yüksekliğe sahip gerekli bloğa yerleştirilir. Tüm set kırpılır ve yalnızca bir resim kalır. Bir sprite. Diğer tüm resimler belirli bloğun dışında kalır.

Daha açık hale getirmek için bir benzetme yapacağım. Bir anahtar deliğinden baktığınızı hayal edin. Kapının diğer tarafında odanın yalnızca ayrı bir parçasını görüyorsunuz. Biraz yana doğru hareket edip oyuğa farklı bir açıdan bakarsanız, aynı odanın başka bir parçasını göreceksiniz.

Terminoloji

Kafanızın karışmaması için terimleri hemen tanımlayalım:
Sprite bir dosyadan birkaç görüntü içeren bir resimdir.
Sprite seti birden çok görüntü içeren dosyanın kendisidir.

Sprite kullanmanın özellikleri

Sprite'ı ne zaman kullanmalısınız? Genel olarak cevap birdir - sayfanızda çok sayıda küçük resim varsa sprite kullanılmalıdır. Ne tür görüntüler oldukları önemli değil. Aynı düzenlemeye sahip birçok degradeniz varsa, birçok düğme, birçok simge vb. Belirli bir sayfada çok sayıda küçük resim varsa, sprite kullanmayı düşünebilirsiniz.

Kural olarak, sayfada üç tür resim vardır - jpg, png ve gif. Tüm bu formatların iki indirme modu vardır - düzenli ve aşamalı indirme.

Jpg formatı normal (temel) ve aşamalı (aşamalı) olabilir. Normal modda, resim yüklenirken ve hemen iyi kalitede satır satır görüntülenmeye başlar. Aşamalı modda, jpg görüntüsünün tamamı bir kerede yüklenir, ancak kalitesizdir ve yüklendikçe kalite artar.

Gif ve png aynı davranışa sahiptir. GIF normal veya taramalı olabilir. PNG normal veya taramalı olabilir. Taramalı gifler ve pngs, aşamalı jpg'ye benzer şekilde davranır. Bu davranış, dosya boyutunu biraz artırır.

Toplam. Görüntü sayfada hemen görünebilir veya gecikmeli olarak görünebilir. Sprite hakkında bilgi sahibi olmak önemlidir. Sprite'ların taramalı veya aşamalı hale getirilmesi arzu edilir. Kullanıcı, düşük kalitede de olsa resimleri olabildiğince çabuk görmelidir.

Fakat! Tüm sprite'ları içeren son dosya çok büyükse, tüm ilerlemelere ve taramalara rağmen, ziyaretçinin dosyanın kısmen indirilmesini bile beklemesi gerekecektir. Bu nedenle, büyük hareketli grafik kümelerinin kullanılmasını önermiyorum. Dosya büyükse, sprite'ın tüm noktası tamamen kaybolur - siteyi hızlandırmak için. Büyük sprite setlerinde, kullanıcının normal bölünmüş görüntülerde olduğu gibi, daha fazla olmasa da beklemesi gerekecektir.

30 kilobayttan fazla dosyalar bana büyük görünüyor. Bu özneldir. Dosyanın boyutu hakkında bazı fikirleriniz olabilir. 30 kilobaytlık bir dosya 56.6 kbps'lik bir internet hızında yaklaşık 7 saniyede indirilecektir.

Sprite kullanma örnekleri

Simgeli Sprite

Bir imgede şunlar için simgelerim olacak:

1. Liste kutusu - bir simge
2. Bağlantılar - üç simge
3. Arama Formları - Bir Simge

Yani, ilk sprite setim beş resim içerecek. Tüm resimlerim aynı boyutta olacak - 16x16 piksel. Sprite ile farklı çözünürlüklerde görseller yapabilirsiniz, tüm görsellerin çözünürlüğünün aynı olmasına gerek yoktur. Resimlerin farklı çözünürlüklerinde bu resimleri tek bir dosyada birleştirmek biraz daha zor hale geliyor.

Sonuç olarak, ilk örnek şöyle görünecektir:

Beş simge buldum. Sonra hepsini tek bir dosyada birleştirdim. İşte bulduğum dosya:

Dikkatinizi çekmek. Bu durumda, simgeler yakın yerleştirilmez, aralarında küçük girintiler vardır. Bu girintileri nasıl buluyorsunuz? Elbette, her şeyi piksellere göre hesaplayabilirsiniz, ancak durumumuz oldukça basittir, bu nedenle burada, resimde bu kenar boşluklarını deneysel olarak seçmek en iyisidir. Önce görüntüleri sadece gözle birleştiriyoruz, sonra en üstteki görüntüyü alıp doğru yere koyuyoruz. Resim yerinde ise, ancak aynı zamanda başka bir görüntünün bir parçası bir yerden dışarı çıkıyorsa, girintinin artırılması gerekir.

Bir nokta daha. Listenin son simgesi yeşil oktur. Neden sonuncusu o? Resimde kalan simgelerin yeri umurumuzda değil, ancak listedeki herhangi bir öğe birkaç satır alabilir ve yeşil ok ortada bir yerdeyse, diğer resimler sonraki satırlarda görünecektir. Neden bahsettiğimi görmek için yukarıdaki listenin resmine bir göz atın.

Yani. Beş simge buldum, bunları tek bir dosyada birleştirdim. Sonra ne yapıyoruz? Elbette kodu yazıyoruz:

• Liste öğesi
• Listedeki başka bir öğe
• Liste öğesi
• Listedeki başka bir öğe,
  ama iki satırda
• Liste öğesi
• Listedeki başka bir öğe

Bu, listenin html kodudur. Şimdi sprite'ımızı ona uygulayalım:

Ul li (dolgu: 0 0 0 21px; arkaplan: url ("sprites.png") 0 -94px no-tekrar;)

Burada ne yaptık? Her birinin girintisini artır