Daha İyi Tasarımlar için 50+ Başar CSS3 Teknikleri
CSS3 standardın henüz sonuçlandırılmamış olmasına rağmen, ivme kazanıyor.
Orada tasarımcılara nasıl kullanılacağını öğretmek için yüzlerce öğretici var, ama ne yazık ki birçoğu aynı alanı kaplıyor.
Ve öğreticilerin bazıları tasarımcıları, yararlı olabileceğini düşünmeyecekleri şeyler yapmalarını öğretiyor, ancak teknikler genellikle bir projeye mükemmel şekilde uyacak şekilde uyarlanabilir.
Aşağıda elliden müthiş CSS3 öğreticisi bulunmaktadır. Birçoğu CSS ve HTML tabanlı, diğerleri ise JavaScript'i içeriyor.
Aşağıda yer almayan bir favori tekniğiniz veya öğreticiniz varsa, lütfen yorumlarda paylaşın!
Imageless Çizim için CSS3 Kullanma
CSS3'teki çeşitli yeni yöntemler, saf CSS kullanarak ve görüntü yokken çok karmaşık grafiklerin oluşturulmasına izin verir. İşte orada en iyi örneklerden bir avuç.
Saf CSS iPhone İllüstrasyon
İPhone'un hareketli bir görüntüsünü oluşturmak için kenarlıklar, dönüşümler ve degradeler karışımı.
CSS3'te Opera Tarayıcı Logosu Oluşturma
CSS3 tekniklerini kullanarak Opera logosunun temiz bir resmi.
CSS3 ile Güneş Sistemimiz
Animasyon efektleri ile güneş sisteminin kaygan görünümlü bir yorumu ..
Analog Saat Efekti
Sadece CSS3 ve jquery kullanarak serin bir analog saat oluşturun.
Gölge Denemeleri
Bu derste, CSS gölgelerinin, Ay grafiğinin Karanlık Tarafı, gölgeli bir periyodik tablo ve hatta bir psychedelic “aşk iksiri” dahil olmak üzere çeşitli efektler oluşturmak için nasıl kullanılacağı gösterilmektedir.
Sadece CSS ile Polaroid Stili Görüntüleri Oluşturma
Bu eğitici, Polaroid stilini basit bir resim listesine eklemek için hem CSS2 hem de CSS3 efektlerini kullanır.
CSS3 Metin, Düzen ve Renk Efektleri
CSS3, çok sayıda farklı fantezi animasyonları ve grafikleri için kullanılabilir, ancak daha önce Photoshop için başvurmuş olabileceğiniz düzen, metin ve renk efektleri için de harikadır.
CSS3 Sütunları Kullanımı
Temiz çoklu kolon CSS3 modülünün kodlanması.
Genel CSS3 Uygulaması
CSS3'ün faydalarına genel bakış.
CSS3 ile Şekillendirici Bağlantılar
CSS3 ile farklı bağlantı türlerini şekillendirmenin dört farklı yolu
CSS3 Dikey Akordeon
Degradeler ve geçişler, eski tarayıcılarda sıralı bir listeye indirgenen bu akordeon menüsünü yapar.
Süper Başar CSS3 Düğmeleri
Açık veya koyu arka plan üzerinde çalışan ve görüntü gerektirmeyen gölgeli renkli, degrade düğmeler!
CSS3 ile Photoshop Stili Düğmeleri
Resimler olmadan ve Photoshop ile CSS3 düğmelerinin nasıl oluşturulacağının yan yana karşılaştırması.
Css Gradient Metin Efekti
Metne doku haritası uygulayarak benzersiz bir metin efekti oluşturma talimatları. Metin yazmayı gerçekten yapmak için degradeleri veya desenleri kullanabilirsiniz.
JavaScript Efektlerine Bazı CSS3 Alternatifleri
Sitenizi geleceğe hazır hale getirmek için yaygın olarak kullanılan JavaScript efektlerini CSS3 ile değiştirmenin 7 yolu.
Kabartmalı CSS3 Metin Efekti
Photoshop tarayıcısı olmadan kabartmalı bir metin efekti oluşturma.
CSS3 Renk Değerlerini Anlama
CSS3 ile mevcut yeni renk seçenekleri hakkında.
CSS3 ile Zengin Efektler Oluşturma
CSS Geçişleri ve Dönüşümler çeşitli efektler oluşturmak için birleştirilebilir.
CSS3 Bokeh Etkisi Yapmak
Gradyanları ve saydamlığı CSS3 ile kullanma yeteneği, bu klasik etkiyi mümkün kılar.
CSS3 Sütunları
Düzeni için CSS3 sütunları kullanarak kavramı hakkında iyi bir video eğitimi.
CSS3 ile Fantezi Listeleri
Fantezi onay işaretlerini yapmak için CSS3 kullanarak havaleli liste tarzı.
CSS3 ile Çok Slick Imageless Bilgi Kutuları
CSS3 ile mümkün kılan teknikler, bu kutuları gerçekten pop'liyor.
Konuşma baloncuğu
Sınır yarıçapı ve dönüştürücü sözde elemanlar bu şekilleri mümkün kılar.
Flash-Style Görüntü Geçiş Etkileri
CSS animasyon efektini kullanmanın akıllıca bir yolu.
TSS'nin CSS3 ile Güncellenme Ekranını Yeniden Oluşturma
Eski tarayıcılar için iyi bir şekilde ayrışan bir CSS3 tasarım efekti.
Yemin Edeceğiniz İnce CSS3 Tipografi, Photoshop'ta Yapıldı
Bu 13 dakikalık video eğitici, CSS3 ile tamamen güzel ve ince bir 3D tipografik efektin nasıl oluşturulacağını gösterecek.
CSS ile Metin Dönüşü
Burada, dikey bir eksenle hizalanacak şekilde döndürülmüş çapraz tarayıcı uyumlu metinlerin nasıl oluşturulacağını gösteren biraz eski bir teknik var.
CSS Metin-Shadow ile bir Letterpress Etkisi Oluşturun
Bu Line25 öğreticisi, web sitenizin metninde letterpress stili efekt oluşturmak için metin gölgelerini nasıl kullanacağınızı gösterecektir.
JQuery ile Başar CSS3 Lightbox Galeri
Bu kod, sürükle ve bırak paylaşım seçeneğine sahip Polaroid tarzı bir resim galerisi oluşturur.
Harika Yerleşimler
Zurb'nin bu öğreticisi, CSS3 kenarlık özelliklerini kullanarak görüntü bindirmelerinin nasıl oluşturulacağını gösterir. Bu, daha sonra üzerine gelindiğinde bir resim hakkında ek bilgi görüntülemek için kullanılabilir.
Harika Satır İçi Form Etiketleri
Bu eğitici, ziyaretçilerinizin yazmaya başladığında ortadan kaybolmayan satır içi etiketlerin nasıl oluşturulacağını gösterir.
CSS3 3D Efektleri
Hareketli CSS3 Cube
CSS ile stillenmiş 3D dönüşümleri kullanan benzersiz bir 3D animasyonlu küp. Küp, her yüzünde görüntülenen bilgileri göstermek için ok tuşlarını kullanarak döndürülebilir.
CSS3 3D Kurdelaları
Bu kolay CSS3 CD şeritlerini kullanarak tasarımınıza biraz derinlik katın.
Hareketli 3D Poster Scroller
CSS3'te şaşırtıcı 3D perspektif efekti kullanarak altyazı içeren film posterleri görüntüleme.
3D CSS3 Coke Can
Bir kaydırma çubuğunu sürüklemek, bu sanal Coke’in ileri ve geri hareket etmesini sağlar.
CSS Gölgeler
Öğeleri parçalara ayırarak gölgeleri yaratıcı bir şekilde şekillendirin.
CSS3 Animasyonu
CSS3 ile Twitter'ın Başarısız Balinalarının Animasyonlu Bir Yorumu
CSS3'ün oldukça şık bir kullanıcısı, eski tarayıcılarda şaşırtıcı derecede küçük düşürücüdür.
Paralaks Starfield Arkaplan
Yıldızlar, bu klasik uzay yolculuğu görünümü ile içeriğinizin solundan sağa doğru hareket eder.
CSS3 ile İçeriği Gösterme ve Gizleme
Javascript olmadan tepsileri ve menü ağaçlarını genişletmek ve küçültmek.
CSS3 ile Yüzen Bir İzleme Sekmesi
Bu kullanışlı yöntemle navigasyon veya iletişim simgelerinize kolayca ulaşın.
CSS3 Bırakma Modal Pencereleri
CSS3 efektleri kullanılarak birtakım ortak modal pencereler oluşturulur ve dönüştürülür.
Sadece CSS3 kullanan iplikçiler
Sadece CSS3'ü kullanarak ve animasyonlu gifleri kullanarak yükleme animasyonları yaratın!
CSS3 Kullanarak Sosyal Simgeleri Görüntüleme
Sosyal simgelerinizi saf CSS3 kullanarak görüntülemek için serin bir solma efekti.
CSS3 Çizgi Film Animasyonu
Sadece CSS3 ve jquery kullanarak bir flash tarzı animasyonun tamamını oluşturmak.
CSS3 Kullanan Hareketli Bir Manzara
Dağların, bulutların ve suyun hepsi CSS3 ile canlandırıldı.
Güzel Animasyonlu Kaydırma Resim Başlıkları
CSS3 Transitions, metin başlıklarıyla bazı şaşırtıcı şeyler yapmanızı sağlar. İşte bir örnek.
Elastik Küçük Resim Menüsü
Üzerine geldiğinde genişleyen ve geri çeken bir dizi resim.
Yığılmış, Dinamik Dizin Kartları
Bir dizi tasarımda uygulanabilecek fantastik bir animasyon efekti.
CSS ve jQuery ile renkli bir saat
Bu eğitim, saat, dakika ve saniye gösteren üç ayrı yükleme stili çevreden oluşan CSS ve jQuery kullanarak gerçekten harika bir renkli saatin nasıl oluşturulacağını gösterir.
Saf CSS3 At-At Yürüteç
Bu, Star Wars'dan bir animasyonlu At-At Walker oluşturmak için CSS3 (JavaScript yok, Flash yok) kullanan etkileyici bir örnektir. Tek dezavantajı şu anda sadece Webkit tarayıcılarında (Safari ve Chrome) görüntülenebilir olmasıdır.
Saf CSS Kullanarak jQuery İçerik Kaydırıcı Oluşturma
Bu eğitici ile tamamen CSS jQuery stili kaydırıcıyı oluşturmayı öğrenin.
CSS3 açılır menüsü
WebDesignerWall uygulamasındaki bu eğitici, aynı zamanda CSS3'ü desteklemeyen tarayıcılarda (sınırlı stilde olsa da) çalışan tarayıcılar arası uyumlu bir CSS3 açılır menüsünün nasıl oluşturulacağını gösterir.
Sadece WDD için yazılmış Cameron Chapman .
Yukarıda ele alınmayan ve paylaşmak istediğiniz diğer yüksek kaliteli CSS3 eğitimlerini biliyorsanız, lütfen yorumlarda bunu yapın!