Abonelik
Son Başlıklar
Popüler Başlıklar
Gelecek Ders Anlatımları
Bağlantılar
CSS Sprite Tekniği [Video]
Google Caffeine’in gelmesiyle birlikte bütün web sitelerinin kendisine çeki düzen verdiğini gördük. Yeni Caffeine algoritmasında hızlı sitelerin önemi büyük. Burda ise iş; grafik, js, html, css dosyalarını sıkıştırmaya düşüyor. Ayrıca yapabileceğimiz bir diğer grafik optimizasyonu ise css sprite.
CSS Sprite nedir?
CSS Sprite, web sitesi yüklenirken içerisinde barındırdığı bütün resimlerin tek tek yüklenmesi yerine tek bir resim üzerinden yüklenmesidir. Bu açılıştaki yüklenen görsellerin megabyteları bulması yerine kilobytelara indirilmesi ve neredeyse çok fazla grafiği olan siteler için %200 hız demek. Örnekler için Facebook’a ve Hepsiburada gibi büyük sitelere bakabilirsiniz. [Facebook, Hepsiburada]
CSS Sprite Öğrenelim [Basit Menü Yapımı]
Bu video giriş seviyesinde CSS ve Photoshop bildiğiniz varsayılarak hazırlandı.
Toplam Boyut: 9.14 MB
Çözünürlük: 1280 x 720
Kullandığımız Site: CSS Sprite Generator
Online İzle: CSS Sprite Tekniği Videolu Anlatımı
Videoyu İndir
Ufak tefek telaffuz hatalarından dolayı özür dilerim. İyi seyirler.
Çok güzel anlatım yapmışsın sadece ve öğretici teşekkürler.
emeğinize sağlık. bende sitemde css sprite uygulamaya çalışıyorum. kodları çıkardaım css ekledim. ama html kısmını yapamıyorum.:)
Anlatım çok iyi teşekkürler dostum.
Ellerinize sağlık hoş bir video olmuş, gelecek videolar kısmında Cufon anlatımını gördüm onun tahmini çıkış süresi ne zaman olacak acaba :)
Önümüzdeki 1-2 hafta içerisinde halletmeyi planlıyorum. Aslında videoyu çektim fakat aşırı gürültüden dolayı anlaşılır gibi değil. Yeniden çekilmesi gerekiyor.
Merhaba burak, video ile ilgili birkaç birşeyde ben söylemek isterim. Emeğine sağlık güzel bir anlatım hazırlamışsın. Fakat kodlarda biraz karmaşalık gözüme çarptı. Sürekli kullandığın özellikleri tek bir seferde tanımlamak daha doğru olabilir gibi. Birde ek olarak background’u çağırdıktan sonra hover’da da tekrar background’u çağırmak zorunda değilsin. Gördüğüm kadarıyla öyle yapmışsın. Ama dediğim gibi kısa yollar bazen hayat kurtarabilir :) Kolay gelsin.
Evet farkındayım fakat daha sonradan düzeltme şansım olmadı. Video hazırlıksız olduğu için bu şekilde ortaya çıktı. Yorum için teşekkürler :)
Hem hız hem de trafik tasarrufu açısından dikkat edilmesi gereken hususlardan bir tanesi. Yeni tema çalışmalarında kullanmayı düşünüyorum. Baya emek sarfedilen video çekimi için teşekkürler :)
Seni Gazi’ye seminere çağıracağım hocam :P :)
Ahaha, tabi Emre her zaman :D
Ellerine sağlık Burak. Çok faydalı bir ders hazırlamışsın.
Kodları yazdığın programların adı nedir?
NetBeans IDE.
Ellerine sağlık harika olmuş takip etmeye devam edeceğim devamını bekliyorum.
Eline sağlık gerçekten eğitici bir video olmuş. Böyle videoların devamını bekleriz burak, kolay gelsin..
Güzel yorumunuz için teşekkür ederim. Elimden geldiği kadar devamını getireceğim.