CSS ile Geri Dönüşüm ve Simgeleri Animasyon
Çok uzak olmayan geçmişte, HTTP Spesifikasyonlarını ve KB'leri görüntü spritelarının kullanımı yoluyla kaydetmek için devrimci teknikler öğreniyorduk. Bu spritelar, daha sonra bir web sitesi boyunca çeşitli şekillerde eklenmiş ve sunulan bir görüntü dosyasında düzenlenen onlarca hatta yüzlerce ikondan oluşuyordu.
Tekniği iyi değerlendirdik ve ölçeklendirilebilirlik ile ilgili hemen hemen her site bunu kullanıyor.
CSS3'ün Transform ve Transition özelliklerinin ortaya çıkması sayesinde, bunu bir adım daha ileriye taşıyabiliriz ve birkaç özlü kod satırı kullanarak, temel simge şablonlarını gelecekteki kullanım için yeni ikonlara dönüştürebilir ve hatta ek bir bonus için karışıma animasyon ekleyebiliriz. !
Teknik, resim sprite gibi basit ve sezgiseldir ve görüntü spritelarını değiştirmek zorunda kalmadan yeni simgelerin hızla yerleştirilmesini sağlar.
CSS ile geri dönüşüm simgeler
JQuery UI kitaplığından alınan bu hareketli grafiğe bakın. Göz attığınızda, burada listelenen simgelerin çoğunun aslında temel şablonlardaki varyasyon olduğunu göreceksiniz. Tek bir simge bir düzine farklı şekillerde temsil edilebilir ve aynı dosyaya yerleştirilebilir. Birçok simge, ebeveynlerinin tam anlamıyla yeni sürümleridir. İyi haber, CSS'yi kullanırken, görüntüde yer alan değişkenleri içermeden aynı tekniği uygulayabiliyoruz.
Yukarıdaki örnekte, tek bir simge alabilir ve kendi amaçlarımız için yeniden oluşturabiliriz, ikinci satırdan basit bir chevron söyle. Dönüşüm özelliği ile, aynı şablondan birçok farklı form oluşturmak için, bu chevron 45deg, 90deg, 180deg, açık ve süresiz olarak döndürmek mümkün.
Temel şablon (yukarı ok):
Aşağıdaki kod, chevron'u görüntü hareketli grafiğinden yukarı doğru çekecek ve temel şablonumuz olarak hizmet edecektir.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Doğru arr ow oluştur
Okumuzu 90deg olarak değiştirmek, aşağıdaki şekilde gösterildiği gibi, oku sağa işaret eder:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Sağ üst ok oluştur
Sadece 45 derece döndür ve güzel bir sağ üst köşede oku:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Bu kadar basit. Bu yöntemi kullanarak, basit bir iki simge grafiği ile başlayabiliriz ve çok az çabayla, arayüzümüzde kullanmak için altı kat daha fazla simge oluşturabiliriz, ki bu elbette ne yapılabileceğinin sadece başlangıcıdır.
Birkaç dönüşüm, bazı fantezi konumlandırma ve simge ailemiz oldukça büyüdü!
Karışıma animasyon ekleme
Bir katil deneyimi için, karışıma animasyon ekleyebiliriz. Sadece simgeleri dönüştürmeyeceğiz, aynı zamanda dönüşümü kullanıcıya gösterecek şekilde değiştireceğiz. Yukarıda görülen artı işaretinden başlayarak başka bir örneğe bakalım.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Kolay bir 45 derece dönüş, artı simgemizi kullanışlı bir yakın simgeye dönüştürebilir.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Artık dönüşümümüz doğru şekilde çalışıyorsa, karışıma bir geçiş ekleyebiliriz. Mevcut sayfayı çeşitli sosyal ağlarda paylaşmak için sitenizde bir özellik olduğunu düşünün. Artı simgesine tıklamak, paylaşma seçeneklerinin listesini açacak ve liste açılırken, artı ince bir animasyonla yakın bir simgeye dönüşecektir. Bunun için bulduğum en iyi uygulama, FontBook'un iPad uygulamasında. Onların uygulanmasına göz atın:
Bu yıldız. Bu güzelliğin nasıl hayata geçtiğine bir göz atalım. Yukarıda oluşturulan artı simgemizi kullanarak başlayın. Bunu canlandırmak için geçiş özelliğini simgenize eklemeniz yeterlidir. Geçişimizde mülkiyeti (dönüşümü), süreyi (0.2s) ve neyi kullanmak istediğimizi (lineer) belirliyoruz.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Yine, bu kadar basit. Sadece CSS ile kütüphanemiz için yeni ikonlar yaratamaz, herhangi bir elemente can verebilir ve hayat verebiliriz!
Daha fazla çeşitlilik için opaklık kullanma
Simge geri dönüşümünün son parçası, opaklık özelliği biçiminde oynamaya gelir. Çekirdek simgelerinizi siyah beyaz için çoğaltmak, sitenizin veya uygulamanızın tamamında kullanmak için sonsuz sayıda gölgeler / varyantlar oluşturmanıza olanak tanır.
Yukarıdaki hareketli grafiğin dört görüntülü bir varyantı (aşağıda görüldüğü gibi) bir simge olarak düzinelerce zaman oluşturmak için kullanılabilir ve opaklığı artırarak veya azaltarak onları gerektiğinde yerleştirebilir ve hala harika görünebilir.
Yeşil gitme zamanı: CSS ile geri dönüşüm
CSS3 çekiş gücü kazandığından, Photoshop CS5'in kopyasım toz toplamaya ve iyi bir nedenden dolayı! Simgelerinizi geri dönüştürme tekni¤i, kaynak dosyalar ›n› açmak ve sürekli yay ›lan spritelara hantal ikonlar eklemeniz gerekmeden yeni versiyonlar› ve varyantlar ›sürekli olarak arayüzlerinize yay› nlaman ›za olanak sa¤lar.
Bakım zamanı azalır ve zamanınız 4 Saatlik İş Haftası gibi kitap okumaya devam eder! Hepsi altın.
Tabii ki, tüm bunlar için en bariz olumsuzluk, tarayıcı desteğidir, ancak, modern tarayıcıları herkesin kullanmaya başlamasıyla birlikte, yeni ve heyecan verici ilerici tekniklerden faydalanabileceğiz. Çekinmeyin bazı örneklere göz atın bu tekniğin
Web sitenizin varlığını geri dönüştürmenin başka yolları nelerdir?