CodePen'de Gizli 20 Muhteşem Noel Projesi

CodePen, ufkunuzu genişletmek için her zaman harika projeler bulabileceğiniz ve diğer geliştiricilerin neler yaptığını görebileceğiniz, yetenekli ön uç geliştiriciler için çevrimiçi bir oyun alanıdır. Yılsonu tatilleri, sevdiklerinizi yaratıcı kişisel projelerle şaşırtmak veya tatilin neşesini artıracak bazı harika, son teknoloji tasarımlarla müşterilerinize teşekkür etmek için harika bir zaman..

Bu yazıda biz bir göz atacağız CodePen'de 20 harika Noel deneyi, kendi tasarımlarınızı oluşturmak için ilham kaynağı olarak kullanabilirsiniz..

1. aile yılbaşı şarkı kitabı

Bu sevimli Family Christmas Songbook uygulaması, SoundCloud'da barındırılan en sevdiğiniz Noel şarkılarını çalabilir. Stil kuralları LESS stil sayfası dilinde yazılmıştır ve müzik çalar işlevi, özel bir jQuery eklentisi tarafından sağlanmaktadır..

Arka plandaki kar tanesi ve Noel ağacı simgeleri tasarıma çarpıcı bir atmosfer verir ve kalemin üzerine gelindiğinde bazı ince CSS efektleri de bulabilirsiniz..

2. Dijital Noel Ağacı

Noel için Tasarım her zaman müteşekkir bir iştir, çünkü tipik görsel unsurları birçok yaratıcı şekilde inşa edilebilir. Bu kalem bunun için iyi bir örnek. İlk başta, yalnızca tatille ilgisiz görünen renkli üçgenleri görebilirsiniz, ancak Göster düğmesine tıkladığınızda, bir Noel ağacına yerleştirilirler. Bu sadece benzersiz bir çözüm değil, aynı zamanda daha basit bir oyunu hatırlatıyor.

3. Kar yağışı ile Noel Animasyon

Noel için havalı bir animasyon oluşturmak istiyorsanız, mutlaka JavaScript kullanmanıza gerek yoktur. Bu kalemde hem kar yağışı animasyonu hem de arka plan görüntüleri tamamen CSS'de oluşturulur. CSS3'ün inanılmaz yeteneklerini gösterdiğinden, kodu biraz incelemeye değer. Arka plan resmi gerçek bir SVG grafiği için bile hatalı olabilir.

4. Kaçak Santa!

Kaçak Noel Baba! phaser.js HTML5 oyun çerçevesini kullanarak tatiller için eğlenceli bir JavaScript oyunudur. Bu oyunda çok fazla kural yok: Noel Baba sonsuz çalışır ya da en azından düşene kadar. Bu kalem size JavaScript'te nasıl daha basit bir oyun yazacağınızı anlamanız için mükemmel bir fırsat sunar..

5. Gizli Santa Adı Seçici

Şapkadan bir isim seçmek, Secret Santas'ı seçmek için okullarda ve ofislerde popüler bir yol olmuştur - bu kalem, bu geleneğin sadece dijital bir versiyonudur. Yalnızca vanilya JavaScript kullandığından, kolayca kendi sitenize gömebilirsiniz. Sadece ver değişkeni içindeki adları değiştirin..

6. Saf CSS'de Noel Topları

Bu neşeli Noel topları, sınır yarıçapı kurallarından yararlanarak saf CSS dilinde yazılmıştır. Topların farklı kısımları kesin olarak hesaplanmış göreceli konumlar kullanılarak bir araya getirilir.

Bir web sayfasına hızlıca bir tatil atmosferi eklemek istiyorsanız, bu topların bazılarını sitenin genel tasarımına uygun bir renkte uygun yerlere yerleştirmeniz yeterlidir..

7. Hareketli Kar Taneleri

Bu kar taneleri, masaüstünde gezdirerek veya akıllı telefonunuzu yatırarak hareket ettirebilirsiniz. İşlevsellik, geliştirici tarafından özel bir Snowflake sınıfı oluşturmak için akıllıca kullanılan nesne yönelimli JavaScript tarafından sağlanır..

Kar taneleri kendileri CSS3'te inşa edilmiştir ve arka plan degradeleri kullanır - bu kalemde hiç görüntü yok.

8. Tatil Akordeon Deneyi

Bu tatil akordeon sadece güzel. Bir sekmenin üzerine gelirseniz, biraz genişleterek odaklanır ve üzerine tıkladığınızda aniden açılır ve tüm sayfayı kaplar. Bu kalemin CSS ile stillendirilmiş Ölçeklenebilir Vektör Grafikleri (SVG) kullandığını not etmek ilginçtir..

SVG'ler ilk bakışta göründüğünden daha güçlüdür, akıllıca konumlandırılabilir ve normal HTML öğeleriyle kullandığımız stil kurallarıyla tasarlanabilir.

9. Düz Saf CSS Kardan Adam

Kim düz tasarımın sıkıcı olması gerektiğini söyledi? Bu sevimli kardan adam kolayca herhangi bir tasarıma Noel ruhu ekleyebilirsiniz. Kardan adam için kullanılan resim yok, tamamen CSS ile yazılmış. CSS koduna biraz göz atmaya ve geliştiricinin aşağıdakileri nasıl kullandığına bakın: amaçlanan sonucu elde etmek için önce ve: sözde seçicilerden sonra.

10. CSS3 Kar Tanesi

Gelişmiş ön uç geliştirme araçlarını kullanarak, yalnızca CSS3 görüntülerinin oluşturulmasını kolaylaştırabilirsiniz; Bu iyi tasarlanmış CSS3 kar tanesi bunun için mükemmel bir örnek. Geliştirici, bu çarpıcı kar taneciği tasarımını uygulamak için HTML'yi derleyen Jade tempating dilini ve Sass CSS ön işlemcisini kullandı..

11. Noel Düğmesi

Akıllı tasarımlar, tıpkı bu kalemdeki karlı Noel Düğme gibi, ince çözümleri tercih ediyor. Koyu kırmızı renkli bir Noel tasarımı için mükemmel bir seçimdir; sonuçta her şeyin yeşil olması gerekmez.

Renkler, gradyanlar, yazı tipi ve hover etkisi, bu düğmeyi çok zarif ve şık yapar. Noel zamanı için bir siteyi hızla dekore etmek için bunlardan yalnızca birkaçına ihtiyacınız var..

12. Paralaks Mutlu Tatil

Paralaks kaydırmayı seviyorsanız neden tatil tasarımlarınız için kullanmıyorsunuz? Bu kalemin geliştiricisi akıllıca etkiyi denemiş ve Parallax.js jQuery eklentisini daha az yaygın bir şekilde kullanmıştır, kaydırma efekti her zamanki gibi dikey değil, yataydır. Noel atmosferi etkileyici bir kar yağışı ile yoğunlaşıyor

Bu kalemin herhangi bir kusurunu seçmek zorunda olsaydım, renk seçimi olurdu: kısmen beyaz zemin üzerine beyaz harfler tasarımın erişilebilirliğini önemli ölçüde zayıflatır..

13. CSS Noel Ambalaj Kağıdı

CSS3'ün yardımıyla tamamen benzersiz bir Noel ambalaj kağıdı oluşturabilirsiniz. Bu kalemin geliştiricisi sadece bir tane değil, bunun için altı çeşit gösterir. Güzel desenler, CSS gradyanlarının ve arka plan harmanlama modu özelliğinin akıllıca kullanılmasıyla elde edilir.

Geliştiricinin kendi web sitesinde daha güzel örnekler ve ayrıntılı bir açıklama bulabilirsiniz..

14. Kutu İçinde Kutu

Bu yaratıcı tasarım, geleneksel Rus bebeklerinden (bir bebeğin içindeki bir bebek) esinlenmiştir. Dış kutuyu tıklatarak açarsanız, başka bir iç kutunun dış kutusunun da bulunduğu bir iç kutu ortaya çıkar. İşlevsellik jQuery ile yazılmıştır ve kutuların kesin yerleri CSS dosyasındaki mutlak ve göreceli konum kuralları yardımıyla belirlenir..

15. Kağıt Soyma Etkili Hediye Kutusu

Şeridi, bu hediyeden uzağa doğru sürükleyerek çıkarmayı başarırsanız, hediyenin iç içeriğini ortaya çıkaran supercool kağıt kabuğu etkisine bakabilirsiniz. Öğreticinin web sitesinde öğreticinin tamamını okuyabilirsiniz, kesinlikle öğrenmeye değer bir numaradır. Sadece kodu kullanmak istiyorsanız, GitHub'dan da kopyalayabilirsiniz..

16. Tatil Ruhu Hareketli Kanvas

Noel, yeni şeyler denemek için harika bir zaman olabilir, tıpkı geliştiricinin bu kaleme HTML5 tuvalini animasyonlu bir arka plan olarak kullanarak yaptığı gibi. Tuval, HTML dosyasındaki içeriğin (Happy Holidays!) Önüne gelir ve akıllı CSS konumlandırma yardımı ile arka plan olarak ayarlanır.

Kalem ayrıca, ayrı bir JavaScript dosyası olarak dahil edilmiş bir arka plan animasyon komut dosyası kullanır.

17. Hediye Kartı Kullanıcı Arayüzü

Bu göz alıcı hediye kartı sadece Noel için değil, web sitenizde bir hediye ile kullanıcılarınızı şaşırtmak istediğinizde istediğiniz zaman kullanılabilir. Tamamen Sass stil sayfası dilinde yazılmış olduğu için JavaScript'e dayanmaz..

Tasarım, geliştiricilerin tüm alanını göstermek yerine yalnızca bir öğenin belirli bir bölgesini görüntülemesine olanak sağlayan klip yolu CSS3 özelliğini kullanır..

18. saf css neşeli yılbaşı kartı

Bu sonsuz gülen Noel Baba - yalnızca HTML ve CSS3 kullanarak - ana kare animasyon sözdiziminin pratikte nasıl kullanılabileceğini anlama fırsatı verebilir. CSS3'te bir animasyonun kurallarını belirtmek için @keyframes kuralını kullanabilir ve daha sonra animasyonu CSS3 özelliğini kullanarak bu belirtilen animasyonu belirli bir öğeye bağlayabilirsiniz..

Ana karenin adını animasyon özelliğinin ilk değeri olarak eklemeniz gerekir, tıpkı geliştiricinin bunu bodyLaugh, beardLaugh, headLaugh ve mouthLaugh adlı özel anahtar kareleriyle yaptığı gibi.

19. Noel Cracker

Bu etkileyici Xmas Cracker'ın üzerine gelirseniz, ziyaretçilerinize Mutlu Noeller dilemek için harika bir yol olan benzersiz bir Noel mesajı verir. HTML, HAML, HTML Soyutlama Biçimlendirme Dili olarak yazılmıştır, stil kuralları ise Sass'ın Sözdizimsel Olarak Müthiş Styesheets dilinin gücünden yararlanır.

Sonuç gerçekten akıllı ve muhteşem. Biraz daha fazla JavaScript ekleyerek, kullanıcılara özel teklifler veya mesajlar sunmak için bile kullanılabilir.

20. Yanıp Sönen Noel Işıkları

Bu yanıp sönen Noel ışıkları hızlı bir şekilde herhangi bir web sitesine benzersiz bir atmosfer verebilir. Ön kod, HTML’de derleyen HAML, CSS’de derlenen Sass ve jQuery ile yazılmıştır..

Animasyonlu parlayan efekti, yukarıda belirtilen CSS3 tarafından sağlanan @ anahtar kare kuralı ile sağlanır. LED'lerin renkleri, HSL renk skalası kullanılarak önceki ledin Ton değerine 50 derece eklenerek jQuery dosyasında ayarlanır.