Sadece CSS ve bir web tarayıcısı ile yapabileceğiniz çok şey var. Harika geliştiriciler, zarfı itmeyi ve ne kadar mümkün olduğunu göstermeyi severler.
Deneysel projeler üretim alanlarında her zaman faydalı olmasa da, inanılmaz derecede ilham verici ve eğitici.
CSS'nin gerçek gücünü gösteren bir avuç CSS projesi düzenledik. Bunların hepsi CodePen'de barındırılıyor, böylece nasıl çalıştığını görmek için kaynak kodunu okuyabilir ve klonlayabilirsiniz.
Bu Sass yükleme sayfası Yinelenen bir yükleme efekti oluşturmak için canlandırılmış geçişleri ve yeniden boyutlandırılabilir öğeleri kullanır.
Çoğu kullanıcı, bu dikey yükleyicinin daha küçük bir sürümünü kullanan Facebook'tan bu yükleme animasyonunu tanımalıdır. Ancak çoğu web yükleyici, resimler tüm tarayıcılarla daha uyumlu olduğu için animasyonlu GIF'ler kullanır.
Bu CSS3 yükleme çubuğu, bazı yaratıcı düşünce ile istediğiniz hemen hemen tüm animasyon stillerini yeniden oluşturabileceğini kanıtlıyor.
Kalemi görmek Yükleme çubukları MaxStalker tarafından ( @MaxStalker ) CodePen .
İşte çevrimiçi bulabildiğim en karmaşık CSS projelerinden biri. Bu dinamik güneş sistemi tasarımı tarafından Malik Dellidj herhangi bir görüntü olmadan saf CSS üzerinde çalışır.
Her gezegen, dönüş hızları dahil CSS'de oluşturulur. Bu projenin güneş sisteminin doğru bir modeli olması amaçlanmış ve hatta önyükleme yapmak için gerçekçi bir yıldız arka plana sahip.
Bunun sadece gezegen simgelerini yapmak için ne kadar sürdüğünü hayal bile edemiyorum, animasyon hızlarını doğru bir şekilde elde edelim. Ama bir irade olduğunda bir yol var.
Kalemi görmek Güneş Sistemi animasyonu - Saf CSS Malik Dellidj tarafından ( @kowlor ) CodePen .
Klasik Windows mayın tarlasının oynanabileceği günü görmeyi hiç düşünmemiştim. saf CSS kullanarak . Yine de o gün geliştirici Bali Balo'ya teşekkürler.
Bu, skoru düzgün bir şekilde tutmaması nedeniyle geleneksel Minesweeper'la tam olarak aynı şekilde çalışmaz. Ancak zamanı doğru bir şekilde izler ve bir JavaScript kullanmaz.
Hatta bir şekilde bile arayüz orijinal Minesweeper UI'ye şaşırtıcı derecede yakın görünüyor ve hepsi CSS'de çalışıyor. Mükemmel bir çoğaltma olmasa da, beni birkaç tur oynamaya çekecek kadar yakın.
Kalemi görmek Saf CSS mayın tarama gemisi by Bali Balo ( @bali_balo ) CodePen .
Yüzeyin üzerinde bu geçiş anahtarı oldukça basit görünebilir. Bu gerçekten bir etkileyici bölüm olmasa da, bir onay kutusu girişi ile çalışır ve arka uç üzerine veri aktarır.
Bu geçiş, onu en iyi ön açma / kapama düğmelerinden biri haline getiren birkaç özelliğe sahiptir:
Her nasılsa bu açma / kapama düğmesi her kullanıcıyı tıklar ve bu olayı gündüz / gece geçiş alanını canlandıracak şekilde kullanır. Güneş ve ay simgesi tasarımları da CSS'den başka bir şey üzerinde çalıştıklarında güzelce stilize edilir.
Kalemi görmek Saf Css “gündüz ve gece” geçiş ile Benjamin Réthoré ( @bnthor ) CodePen .
Geleneksel fare takibi, kullanıcının X / Y koordinatlarını sayfada rapor eden JavaScript'in çalışmasıdır.
Teknik olarak bu koordinatları toplamak ve bunlarla ilgili yararlı şeyler yapmak için JavaScript'e ihtiyacınız var. Fakat bu snippet Kullanıcının her hareketini takip eden saf bir CSS fare izleme özelliği tasarlayabileceğinizi gösterir.
Gerçekten bunun için pratik bir kullanım düşünemiyorum ama bir şaka sitesinde eğlenceli olabilir.
Kalemi görmek Deneysel saf CSS fare takibi Momcilo Popov tarafından ( @Momciloo ) CodePen .
Hepimiz vektör ikonlar ve illüstrasyonlar gördük web için tasarlandı . Peki ham CSS ve SVG koduyla tasarlanmış tam sayfa vektör çizimler ne olacak?
Bu eğlence parkı tasarımı sadece SVG destekli tarayıcılarda çalışan bir deney projesidir. Yine de bu modern tarayıcılarda kusursuz bir şekilde işleniyor ve her öğenin sayfada çok gerçekçi bir yerleşimi var.
Animasyonlar kesinlikle etkileyici ama dikkatimi çeken SVG elemanlarının doğruluğu . Birkaç yıl içinde, sadece görüntü kodları olmaksızın sadece kodda çalışan web üzerinde bu tür illüstrasyonlar bulabiliriz.
Kalemi görmek Düz tasarım eğlence parkı svg Lina (CSS tarafından desteklenmektedir animasyon) Vladimir Gashenko tarafından ( @gxash ) CodePen .
Tekrar eden bir CSS animasyonu gibi tasarlama Möbius şeridi kavramı oldukça zor. Ama bazı 3D elemanlar ve değişken gradyanları ekleyin? Şimdi gerçek bir meydan okuma var.
Bu pasaj, ne kadar düzgün göründüğüne ve ne kadar küçük bir kodun kullanıldığına (yalnızca 90 satırlık CSS) bakıldığında oldukça etkileyici. Haml ile tüm konsepti oluşturmak için sadece 6 satırlık bir kod gerekir.
Bunun gerçek bir web sitesinde çok yararlı olmayacağını itiraf edeceğim, ancak birkaç düzine HTML ve CSS satırı ile ne kadar yapabileceğinize dair bir kanıt.
Kalemi görmek Möbius 6hedrons (saf CSS) Ana Tudor tarafından ( @thebabydino ) CodePen .
Bu webapp'ı birkaç saniye kullandıktan sonra JavaScript üzerinde çalıştığından emin olabilirsiniz. 3D rotasyon ve arazi yerleşimi gibi dinamik davranışlar, tatlı bir JS webapp'unun işaretleridir.
Fakat bu harita oluşturan kullanıcı arayüzü Vincent Durand aslında% 100 saf CSS'dir. Döndürme okları, döndürme efektinin kendisi ve tüm tıklama yeri özellikleri CSS'de çalışır.
Bu kavramın 3D küpler kullanılarak nasıl oluşturulduğundan bahsetmeye değer. Blokların kendisi 3B eleman olarak çalışır ve sadece gezdirerek küpleri döndürebilirsiniz.
Hiç şüphesiz uzun zamandır gördüğüm CSS için en çılgın kullanımlar.
Kalemi görmek Tam CSS Harita yaratıcısı ile Vincent Durand ( @onediv ) CodePen .
Bu proje biraz daha az etkileşimli ama yine de nefes kesici. Geliştirici Peter Schmiz tüm ana filmi yeniden yarattı iOS 7 uygulama simgeleri saf HTML ve CSS kullanarak.
Bu simgelerin hiçbiri herhangi bir SVG veya görüntü dosyası kullanmaz. Her ikondaki her eleman, bir span / div öğesiyle HTML'ye kodlanmış, daha sonra CSS kullanılarak biçimlendirilmiştir. En çılgın kısmı, bunların ne kadar doğru olduğunu!
Tam sette 22 ikon var ve hepsi oldukça güzel. Haritalar ve Hava Durumu gibi simgeler için detaylara gösterilen ilgiden çok etkilendim. Yeterli zaman ve sabırla CSS'de hemen hemen her şeyi tasarlayabileceğinizi kanıtlayın.
Kalemi görmek Saf CSS ile iOS 7 simgeleri Peter Schmiz ( @peterschmiz ) CodePen .
Slack yükleme animasyonunu CSS3 ile yeniden oluşturmak kesinlikle etkileyici. Fakat bu snippet Slack yükleyiciyi sayfadaki tek bir eleman ile yeniden oluşturur. Ben buna özveri derim.
Bu snippet'in toplam CSS sayısı, Slack logo renklerini ve animasyon efektlerini içeren 100'den fazla satırdır.
Bu düşüncenin diğer markalı yükleme simgeleri için işe yarayıp yaramayacağını söyleyemem ama bu konuda kesinlikle etkilendim.
Kalemi görmek Tek elemanlı Slack yükleyici CrocoDillon tarafından ( @CrocoDillon ) CodePen .
CodePen'de kendi animasyonlarıyla düzinelerce özel 3D çubuk tasarımı bulacaksınız. Fakat bu 3D çubuklar Rafael González tarafından diğer tüm modern CSS çubuk grafikler için öne çıkıyor.
Bu grafiklerin her biri flexbox'ta koşmak kaplar için, kaç tane çubuk eklediğinize ve kapsayıcının ne kadar büyük olduğuna bağlı olarak otomatik boyutta olurlar. Ayrıca, her çubuk grafik görünümüne kayarken hareket eder, bunların tümü tamamen CSS ile kontrol edilir.
Ayrıca, her çubuğun boyutu em'lerde çalıştığı için, her bir çubuğu, tarayıcı yazı tipi boyutlarına göre doğal olarak ölçeklendirebilirsiniz. Modern CSS'nin eskisinden çok daha esnek olduğunu kanıtlayan şık bir örnek.
Kalemi görmek Saf CSS Çubukları hazırlayan Rafael González ( @rgg ) CodePen .