5 Cool CSS3 Efektinden Daha Fazlasını Göreceksiniz

CSS3 (HTML5’in gücü ile birlikte) tüm büyük tarayıcılar tarafından hızla destekleniyor (Internet Explorer hariç herhangi bir şey okundu), bu yüzden şimdi gücü kullanarak elde edebileceğimiz harika CSS efektlerini görmek için iyi bir zaman olacağını düşündüm. tarayıcınızın ve küçük bir CSS kodunun 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 meraklısınız ancak CSS'nin ne anlama geldiğini bilmiyorsanız, hızlıca açıklayayım. CSS, web sayfalarını süslemek için kullanılan kodlama dilidir. İçin duruyor Cascading Style Sheet ve temelde sadece bir siteye stil ve yetenek katıyor. 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 metin içeriğini tanımlarken, CSS onları tasarımcının tasarladığı şekilde göstermesini ve her şeyi belirlemesini sağlar. sayfa mizanpajı, metin boyutu ve renkler ve şimdi CSS3'ün tanıtımıyla bir dizi fantezi efekt.

Geçmişte, bu makalede anlatılanlarla aynı tür etkilerin elde edilmesi, büyük hacimli CSS veya daha büyük grafiklerin indirilmesi anlamına gelirdi. Şimdi, CSS tarayıcınıza sayfanın nasıl görünmesini istediğini açıklayabilir ve tarayıcı işlemeyi gerçekleştirecektir. Size bütün evi satmak yerine kendi evinizi inşa etme planlarını size teslim etmek gibi - bu çok daha ucuz!

Yuvarlatılmış köşeler

İnternet kademeli olarak “yönlendirici” oluyor, ancak şimdi bu CSS3'te katılaşmış durumda. Bu paragrafı çevreleyen kutuya bir göz atın. Bu bir resim değil - görmek için üzerine sağ tıklamayı deneyin. Saf CSS!

Yuvarlatılmış köşeler için kod gerçekten kolaydır:

.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / kenarlık yarıçapı: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Metin gölgesi

Metin bazen kendi başına gerçekten sert görünebilir, ancak basit küçük bir gölge gerçekten yardımcı olur. Bu paragrafa uyguladığım gölgeye göz atın.

İşte bazı metin gölgelerinin kodları:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

Renk Geçişleri

Artık düz renkler veya arka plan degrade görüntüleri yok, artık yalnızca CSS kullanarak hoş bir degrade oluşturabilirsiniz. Maalesef, tarayıcılar arasındaki 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 degradelerinin kodu:

.box_gradient background-color: # 3f9fe3; background-image: -moz-linear-gradyan (üst, # 3f9fe3, #white); / * FF3.6 * / arkaplan: -moz-lineer-gradyan (üst, # 1E5799% 0, # 207cca% 26, # 2989D8% 39, #FFFFFF% 100); / * firefox * / background-image: -ms-linear-gradyanı (üst, # 3f9fe3, #white); / * IE10 * / background-image: -o-doğrusal-gradyan (üst, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (doğrusal, sol üst, sol alt, (# 3f9fe3) 'den (#white)' ye); / * Saf4 +, Chrome * / arka plan görüntüsü: -webkit-linear-gradient (üst, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: doğrusal degrade (üst, # 3f9fe3, #white); filtre: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# beyaz"); / * IE6-IE9 * /

rotasyon

Metin olarak bunun için bir kullanım hayal etmek zor, ancak örneğin resimler kullanırken bazı güzel tasarım öğeleri ekleyebilir. Yine, bu paragrafın döndürülmüş olmasına rağmen, normal metin olduğu için hala seçip etkileşime geçebileceğinizi unutmayın.

İşte bir şey döndürmek için kod:

 .box_rotate -moz-transform: döndürme (7.5deg); / * FF3.5 + * / -o-dönüşümü: döndürme (7.5 derece); / * Opera 10.5 * / -webkit-dönüşümü: döndürme (7.5deg); / * Saf3.1 +, Chrome * / -ms-dönüşümü: döndürme (7.5deg); / * IE9 * / dönüşümü: döndürme (7.5deg); süzgeç: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.99144486137M = = 10305267384157d05; yakınlaştırma: 1;  

Animasyon

Oh evet, en iyisini kurtardım. CSS3, açıklanan serin CSS efektlerinin herhangi bir sayısı için çeşitli animasyon formları sunar. Bu paragrafta, geçiş özelliğini aşağıdaki gibi tanımladım, ayrıca üzerine getirdiğinizde basit arka plan rengini ve döndürmeyi de tanımladım. Henüz yapmadıysanız, etkiyi görmek için şimdi bu metin paragrafının üzerine gelin. Hemen hemen her şeyi canlandırabilirsiniz!

Değiştirmek istediğiniz herhangi bir öğeye bunun gibi geçiş koduna ihtiyacınız olacak. Ayrıca bazı sözde CSS sınıfları kullanmanız gerekir (örneğin: canlandırmak istediğiniz herhangi bir özelliği (renk, boyut veya döndürme gibi değiştirmek için üzerine gelin)

 .box_transition -moz-geçişi: tüm 0.5'ler kolay; / * FF4 + * / -o-geçişi: tümü 0,5'lik kolaylık; / * Opera 10.5+ * / -webkit-geçiş: 0,5'lerin tümü kolaylıkla çıkar; / * Saf3.2 +, Chrome * / -ms-geçişi: tümü 0.5'lik kolaylık; / * IE10? * / geçiş: tüm 0.5s kolaylık;  

Çapraz Tarayıcı Uyumsuzlukları

Çoğu modern tarayıcı CSS3'ün tamamını bazı şekillerde desteklese de, bazıları standardın kendi özel uygulamalarıyla çalışmasını sağlamak için yine de biraz farklı kodlar veya kesmeler gerektirir. Örneğin, yukarıdaki kodda, Mozilla veya Webkit tabanlı tarayıcılarla ilgili CSS özelliklerinden bazılarının önüne geçen -moz- veya -webkit- birçok örneği göreceksiniz. Bu fazladan satırları yazmak acı verici olabilir, bu yüzden sizin için yazmak için css3 jeneratörünü kontrol edin..

Sonuç

Web, yeni CSS3 ve HTML5 uzantılarıyla daha da heyecanlanacak. Verilmiş, yanıp sönen metnin bir başka hamlesini ve gerçek içeriğe whiz-bang oranının yüksek olduğunu göreceğiz (animasyonlu GIF'ler ilk olduğunda olduğu gibi) “keşfedilen”) fakat uzun vadede CSS3'ün araçlarını daha ilginç web arayüzleri yapmak için nasıl kullanacağımızı öğreneceğiz. Ve hey, her zaman hepsini kapatabilirsin!

Bir tasarımcı veya web geliştiricisiyseniz, CSS3'ün asla tek seçenek olmaması gerektiğini unutmayın. Siteniz CSS3 olmadan çalışmayacaksa, doğru kullanmadınız. Program işlevselliğini değil, deneyimi geliştirmek için CSS kullanılmalıdır.