İlan
CSS3 (HTML5'in gücü ile birlikte) hızla tüm büyük tarayıcılar tarafından desteklenmektedir (okuma - Internet Explorer dışında herhangi bir şey), bu yüzden ben şimdi tarayıcınızın gücünü ve küçük bir CSS kodunu kullanarak elde edebileceğimiz bazı harika CSS efektlerini görmek için iyi bir zaman olabilir. En son Chrome, Safari veya Firefox tarayıcısını kullanıyorsanız, bu makalede gösterilen tüm efektleri görebilmeniz gerekir.
İlk - CSS Nedir?
Bu makaleyi okuduğunuz için merak ediyor ancak CSS'nin ne anlama geldiğini bilmiyorsanız, hızlı bir şekilde açıklayayım. CSS, web sayfalarını süslemek için kullanılan kodlama dilidir. Anlamına gelir Cascading Style Sheet, ve temelde sadece bir siteye stil ve yetenek ekler. Web siteleri kesinlikle CSS'leri olmadan okunabilir, ancak tüm web siteleri 1995'te olduğu gibi iğrençtir. HTML dosyaları bir sayfanın yapısını ve metinsel içeriğini açıklarken, CSS onları tasarımcının şekilde görüntülemesini sağlar ve sayfa düzeninden, metin boyutundan ve renklerinden her şeyi belirleyin ve şimdi giriş ile bir dizi süslü efekt CSS3.
Geçmişte, bu makalede açıklananlarla aynı tür efektlere ulaşmak, büyük CSS veya daha büyük grafikler indirmek anlamına geliyordu. Şimdi, CSS tarayıcınıza sayfanın nasıl görünmesini istediğini açıklayabilir ve tarayıcı işlemeyi gerçekleştirir. Sanki tüm evi satmak yerine kendi evini inşa etme planlarını sana teslim etmem gibi - çok daha ucuz!
Yuvarlatılmış köşeler
İnternet yavaş yavaş 'daha yuvarlak' hale geliyor, ancak şimdi bu CSS3'te sağlamlaştırıldı. Bu paragrafı çevreleyen kutuya bir göz atın. Bu bir resim değil - görmek için sağ tıklamayı deneyin. Saf CSS!
Yuvarlatılmış köşelerin kodu gerçekten kolaydır:
.box_round {-moz-border-radius: 20 piksel; / * FF1 + * / -webkit-kenarlık yarıçapı: 20 piksel; / * Saf3-4, iOS 1+, Android 1.5+ * / kenarlık yarıçapı: 20 piksel; / * Opera 10.5, IE9, Saf5, Krom, FF4 * /}
Metin gölgesi
Metin bazen kendi başına gerçekten sert görünebilir, ancak basit bir küçük gölge gerçekten şeylere yardımcı olur. Bu paragrafa uyguladığım gölgeye göz atın.
İşte bazı metin gölgelerinin kodu:
.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Krom * / }
Renk Geçişleri
Artık düz renkler veya arka plan gradyan görüntüleri yok, artık yalnızca CSS kullanarak harika bir gradyan oluşturabilirsiniz. Ne yazık ki, tarayıcılar arasındaki mevcut uyumsuzluk sorunları nedeniyle birkaç satıra ihtiyacınız var, ancak bunları otomatik olarak oluşturmak için daha sonra açıklayacağım aracı kullanabilirsiniz.
İşte CSS gradyanlarının kodu:
.box_gradient {arka plan rengi: # 3f9fe3; arka plan resmi: -moz-doğrusal-gradyan (üst, # 3f9fe3, #beyaz); / * FF3.6 * / arka plan: -moz-doğrusal-gradyan (üst, # 1E5799% 0, # 207cca% 26, # 2989D8% 39, #FFFFFF% 100); / * firefox * / arka plan resmi: -ms-doğrusal-gradyan (üst, # 3f9fe3, #beyaz); / * IE10 * / arka plan resmi: -o-doğrusal-gradyan (üst, # 3f9fe3, #beyaz); / * Opera 11.10+ * / arka plan resmi: -webkit-gradyanı (doğrusal, sol üst, sol alt, (# 3f9fe3), (#beyaz)); / * Saf4 +, Chrome * / arka plan resmi: -webkit-linear-gradient (üst, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / arka plan resmi: doğrusal gradyan (üst, # 3f9fe3, #white); filtre: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# beyaz'); / * IE6 – IE9 * / }
rotasyon
Bunun metin olarak kullanıldığını hayal etmek zordur, ancak resimleri kullanırken bazı güzel tasarım öğeleri ekleyebilir. Yine, bu paragraf döndürülmüş olsa bile, normal metin olarak kaldığı için yine de seçip etkileşim kurabileceğinizi unutmayın.
İşte bir şeyi döndürmek için kod:
.box_rotate {-moz-transform: döndür (7.5 derece); / * FF3.5 + * / -o-dönüşümü: döndürme (7.5 derece); / * Opera 10.5 * / -webkit-transform: döndür (7.5 derece); / * Saf3.1 +, Chrome * / -ms-transform: döndürme (7.5 derece); / * IE9 * / dönüşüm: döndürme (7.5 derece); filtre: progid: DXImageTransform. Microsoft. Matris (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'otomatik genişlet'); zoom: 1; }
Animasyon
Ah evet, en iyisini sakladım. CSS3, açıklanan herhangi bir sayıda serin CSS efekti için çeşitli animasyon formları sunar. Bu paragrafta, geçiş özelliğini aşağıda listelendiği gibi ve üzerine geldiğinizde basit bir arka plan rengi ve döndürme tanımladım. Henüz yapmadıysanız, efekti çalışırken görmek için imlecinizi bu metin paragrafının üzerine getirin. Hemen hemen her şeyi canlandırabilirsiniz!
Değiştirmek istediğiniz herhangi bir öğeye bunun gibi geçiş koduna ihtiyacınız olacaktır. Ayrıca bazı sahte CSS sınıfları kullanmanız gerekir (örneğin: canlandırmak istediğiniz renk, boyut veya döndürme gibi özellikleri değiştirmek için fareyle üzerine gelin)
.box_transition {-moz-transition: 0,5 saniyelerin tümü; / * FF4 + * / -o-geçiş: 0,5 saniyelerin tümü; / * Opera 10.5+ * / -webkit-geçişi: 0,5 saniyelerin tümü; / * Saf3.2 +, Chrome * / -ms-geçiş: 0,5 saniyelerin tümü; / * IE10? * / geçiş: tüm 0.5s kolaylığı; }
Çapraz Tarayıcı Uyumsuzlukları
Çoğu modern tarayıcı tüm CSS3'ü bazı şekillerde desteklese de, bazıları standardın kendi özel uygulamalarıyla çalışabilmesi için biraz farklı kod veya hack'lere ihtiyaç duyar. Örneğin yukarıdaki kodda, Mozilla tabanlı veya Webkit tabanlı tarayıcılarla ilgili olan bazı CSS özelliklerinden önce -moz- veya -webkit- örneklerinin çoğunu görürsünüz. Bu ekstra satırları yazmak bir acı olabilir, bu yüzden css3 jeneratör onları sizin için yazmak için.
Sonuç
Web, yeni CSS3 ve HTML5 uzantılarıyla çok daha heyecan verici olacak. Kabul edersek, yanıp sönen metnin başka bir hamlesini ve gerçek içeriğe yüksek bir whiz-bang oranını göreceğiz (tıpkı animasyonlu GIF'ler ilk olarak "keşfedildi"), ancak uzun vadede CSS3'ün araçlarını daha ilginç web yapmak için nasıl kullanacağımızı öğreneceğiz arabirimleri. Ve hey, hepsini her zaman kapatabilirsin!
Kendiniz bir tasarımcı veya web geliştiricisiyseniz, CSS3'ün asla tek seçenek olmaması gerektiğini unutmayın. Siteniz CSS3 olmadan çalışmazsa, siteyi doğru kullanmamışsınız demektir. CSS, program işlevselliğini değil, deneyimi geliştirmek için kullanılmalıdır.
James Yapay Zeka alanında lisans derecesine sahiptir ve CompTIA A + ve Network + sertifikalıdır. MakeUseOf'un baş geliştiricisi ve boş zamanlarını VR paintball ve boardgames oynayarak geçiriyor. Çocukluğundan beri bilgisayar yapıyor.
