Tamamen HTML ve CSS ile Oluşturulan 10 Karakter Tasarımı

CSS ile ne kadar yapabileceğinize sürekli şaşırıyorum. Web geliştiricileri, CSS'nin bazı inanılmaz sayfa düzenleri ve özel animasyon efektleri oluşturmanıza izin verdiğini bilir.

Ama çok eğlenceli projeler için de kullanabilirsiniz. Örneğin, sadece CSS ile karakter tasarımları oluşturmak gibi. Kulağa tuhaf geliyor değil mi?

Kesinlikle öyle. Ve tamamı %100 saf HTML ve CSS kodundan yapılmış en tuhaf (ama en havalı) karakter tasarımlarından bazılarını topladım.

1. Kızgın Kuşlar

Angry Birds'ü kim sevmez ki? Bir oyun olarak başladılar ve pop kültürünü deldikten sonra bir şekilde kendi filmlerini yaptılar.

Rachel Bull'un bu kalemi, Angry Birds'ün CSS'ye bile girebileceğini kanıtlıyor.

İronik olarak, bu sayfada bir resim var ve özel türü en üste gömmek için kullanılıyor. Bu kuşların eğrilerinden özel gradyanlara kadar diğer her öğe saf CSS üzerinde çalışır.

Belki de en pratik kod parçası değil ama kesinlikle bir ilham kaynağı.

2. Frankenstein

Mary Shelley'nin Frankenstein'ı, yeniden canlandırılan yeşil tenli yaratık olarak bilinir. Teknik olarak Frankeinstein'ın canavarı olmasına rağmen, bu dilden pek iyi çıkmıyor.

Ve bu Frankenstein yaratığı biraz yanlış adlandırılmış olsa da, hala gördüğüm en iyi karakter tasarımlarından biri.

Sadece 40 satır HTML üzerinde çalışıyor ve geliştirici Victoria Ninni Bergquist, canavarın göz kırpmasına yardımcı olmak için biraz CSS bile ekledi. Oldukça temiz!

3. Oyuncak Hikayesi Uzaylı

Pixar'ın Oyuncak Hikayesi'nde pek çok unutulmaz karakter var ve bu tuhaf uzaylı adamlar kesinlikle bu kadronun bir parçası.

Sunyoung Park, bu kalemi CSS için bir demo olarak ve ön uç kodlamanın sınırlarını test etmek için yaptı. Tüm büyük tarayıcılarda ve hatta bazı eski tarayıcılarda düzgün şekilde oluşturulmalıdır. Her ne kadar biraz döndür() özelliğine güvense de.

Neyse ki bu, IE9+'a kadar uzanan tarayıcıları destekleyen CSS dönüştürme özelliğinin bir parçası olarak geliyor. Yani bu küçük yeşil uzaylı internete bağlı dünyanın çoğunu memnun edebilir.

4. Aku Aku

Bir PlayStation'ınız varsa, muhtemelen Crash Bandicoot'u biliyorsunuzdur. Aku Aku adındaki bu çılgın adam, maske… yaratık… olayının mükemmel bir kopyası.

Her elemanın, o özelliği tanımlayan ilgili bir sınıfla (yani göz, burun dudağı) kendi div'i vardır.

Tüm bu tasarımın en zor yanının kafasındaki tüy taç olduğunu söyleyebilirim. Ayrıca oyuncuları eski Crash oyunlarını almaya teşvik edebilecek harika animasyonlar.

5. Bebek Squirtle

İşte CSS karakter tasarımıyla karıştırılmış harika bir animasyon örneği.

Josh Bader, bu Squirtle karakterini saf CSS ve yalnızca 15 satır HTML kullanarak kodladı. Etkileyici!

Yürüme efektini elde etmek için Josh, yinelenen bir animasyonla her öğeye :after sözde sınıfını ekledi. Kaputun altına baktığınızda şaşırtıcı derecede basit bir başarı ve bunun gibi karakterler oluşturmak için bu kadar küçük kodun nasıl gerekli olduğu daha da şaşırtıcı.

6. Morty Olmadan Rick

Bu kalemde, saf CSS'de chibi-fied Rick yaratan geliştirici James Gilmore'un tuhaf çalışmasını bulacaksınız.

Tasarım aslında derinlik yaratmak ve bu karaktere biraz hayat vermek için bazı güzel CSS alt gölgeleri kullanıyor. Tasarımla güzel bir şekilde uyum sağlayan yinelenen animasyondan bahsetmiyorum bile.

Bunun Sass üzerinde de çalıştığını ve onunla uğraşmak istiyorsanız kodda özel değişkenler olduğunu unutmayın. Çok iyi biçimlendirilmiş, bu yüzden bu, Sass öğrenmek için çalışmak için harika bir snippet olurdu.

7. Brian Griffin

İşte, Family Guy'dan Brian Griffin'in yer aldığı Rachel Bull'un başka bir karakter tasarımı.

Sadece saf CSS ile ne kadar ayrıntı alabileceğiniz şaşırtıcı. Brian'ın tüm stili, gösterinin sanat stiliyle yakından eşleşiyor ve inanılmaz derecede gerçekçi hissettiren alt gölgeler kullanıyor.

Bu, 150'den fazla CSS satırı ile oldukça teknik olmasına rağmen, önyükleme yapmak için Pusula kitaplığını kullanıyor.

8. Emmet

Lego Filminden tüm ihtişamıyla Emmet. Rachel, modern HTML yazmanın basitleştirilmiş yolu olan CSS ve Haml kullanarak bu pasajı bir kez daha sıfırdan oluşturdu.

Bu öğelerden birkaçı, yalnızca CSS üzerinde çalışmak için gerçekten oldukça etkileyicidir. Özellikle, saç kıvrımları gerçekten plastik Lego parçalarına benziyor. Bunun mümkün olması bile çılgınca!

CSS'de bir sürü harika Sass mantığı var ve eğer bir geliştirici iseniz, bu kalemi kurcalamaktan keyif alacaksınız. Hem kod hem de sonuç muhteşem.

9. CSS Eevee

Pokemon Go fenomeni etrafında inşa edilen bu saf CSS Eevee, David Khourshid tarafından yapılmıştır.

Pokemon'un tamamını saf CSS'de yeniden oluştururken uygulama ile benzer bir arka plan ve sayfa stili kullanır. Biraz dokulama ve biraz akıllı katmanlama ile David, bu Eevee'yi gerçekten 3D olarak gösterdi!

Animasyonlar da hoş bir dokunuş ve her şeyi daha gerçekçi hissettiriyorlar. İster bir Pokemon hayranı olun, ister oyuna hiç dokunmamış olun, bunun iyi bir iş olduğunu kabul etmelisiniz.

10. Miki Fare

Bu Mickey Mouse kafası biraz daha basit olsa da, aynı zamanda oldukça başarılı. Statik olduğu için yönetmenin daha kolay olacağını düşünebilirsiniz, ancak kalem 450'den fazla Sass satırını zorlar.

En teknik kısım, tüm şekilleri sırayla almak ve elemanları üst üste düzgün hizalanacak şekilde yeniden düzenlemek.

Yine de sonuç harika ve erken dönem Mickey çizgi filmlerine benzerliği görebilirsiniz.

11. Prenses Zelda

Bu Zelda karakter tasarımıyla en iyisini sona sakladım. Bacakları biraz kısa ama genel olarak tarzı doğru.

Geliştirici Charlie Marcotte, tüm öğeleri düzenlemek için Sass ve özel CSS dönüşümlerini kullanır. Ayrıca, Pug ön işlemcisi sayesinde ham HTML oldukça basitleştirilmiştir.

CSS bilginizin sınırlarını zorlamaya çalışıyorsanız, neden benzer bir projeye katılmıyorsunuz? Becerilerinizi test etmenin harika bir yolu ve aşağıdaki yorumlarda oluşturduğunuz her şeyi her zaman paylaşabilirsiniz.