10 projektów postaci stworzonych w całości za pomocą HTML i CSS

Ciągle jestem zaskoczony, jak wiele możesz zrobić z CSS. Twórcy stron internetowych wiedzą, że CSS pozwala tworzyć niesamowite układy stron i niestandardowe efekty animacji.

Ale możesz go również używać do wielu zabawnych projektów. Jak na przykład budowanie projektów postaci za pomocą samego CSS. Brzmi dziwnie, prawda?

Cóż, zdecydowanie jest. Zebrałem kilka najdziwniejszych (choć najfajniejszych) projektów postaci, wszystkie wykonane w 100% z czystego kodu HTML i CSS.

1. Angry Birds

Kto nie kocha Angry Birds? Zaczęli jako gra i jakoś dostali swój własny film po przebiciu popkultury.

A to pióro Rachel Bull udowadnia, że ​​Angry Birds mogą nawet znaleźć drogę do CSS.

Jak na ironię, na tej stronie znajduje się jeden obraz, który służy do osadzenia niestandardowego typu na samej górze. Każdy inny element, od krzywych tych ptaków po niestandardowe gradienty, działa na czystym CSS.

Może nie najbardziej praktyczny fragment kodu, ale z pewnością inspiracja.

2. Frankenstein

Frankenstein Mary Shelley jest powszechnie znany jako wskrzeszone stworzenie o zielonej skórze. Chociaż technicznie jest to potwór Frankeinsteina, nie schodzi tak dobrze z języka.

I chociaż ten stwór Frankensteina może być nieco niewłaściwie zatytułowany, nadal jest jednym z najlepszych projektów postaci, jakie widziałem.

Działa na zaledwie 40 wierszach kodu HTML, a programista Victoria Ninni Bergquist dodała nawet trochę CSS, aby pomóc potworowi mrugnąć. Całkiem schludnie!

3. Toy Story Alien

Toy Story Pixara ma tak wiele niezapomnianych postaci, a ci zwariowani kosmici z pewnością są częścią tej obsady.

Sunyoung Park zbudował to pióro jako demonstrację CSS i przetestowanie granic frontendowego kodowania. Powinien renderować się poprawnie we wszystkich głównych przeglądarkach, a nawet w niektórych starszych przeglądarkach. Chociaż w dużym stopniu opiera się na właściwości rotate() .

Na szczęście jest to część funkcji przekształceń CSS, która obsługuje przeglądarki sięgające wstecz do IE9+. Tak więc ten mały zielony kosmita może zachwycić większość świata połączonego z Internetem.

4. Aku Aku

Jeśli miałeś PlayStation, to prawdopodobnie wiesz o Crash Bandicoot. Cóż, ten szalony facet o imieniu Aku Aku jest idealną repliką maski… stworzenia… czegoś.

Każdy element ma swój własny div z odpowiednią klasą definiującą tę cechę (np. oko, warga nosowa).

Powiedziałbym, że najtrudniejszą częścią tego całego projektu jest korona z piór na jego głowie. Plus fajne animacje, które mogą zachęcić graczy do skorzystania z ich starych gier Crash.

5. Dziecko Squirtle

Oto kolejny świetny przykład animacji zmieszanej z projektowaniem postaci CSS.

Josh Bader zakodował tę postać Squirtle'a za pomocą czystego CSS i tylko 15 linii kodu HTML. Imponujący!

Aby uzyskać efekt chodzenia, Josh dodał pseudoklasę :after do każdego elementu z powtarzającą się animacją. Zaskakująco prosty wyczyn, gdy zajrzysz pod maskę, a jeszcze bardziej zaskakujące jest to, jak taki mały kod jest potrzebny do zbudowania takich postaci.

6. Rick bez Morty

W tym długopisie znajdziesz zwariowaną pracę programisty Jamesa Gilmore'a, który stworzył Rick'a z chibi w czystym CSS.

Projekt faktycznie wykorzystuje kilka fajnych cieni CSS, aby stworzyć głębię i nadać tej postaci trochę życia. Nie wspominając o powtarzającej się animacji, która również ładnie komponuje się z projektem.

Zauważ, że działa to również na Sass i jeśli chcesz przy nim majstrować, w kodzie znajdują się niestandardowe zmienne. Jest bardzo dobrze sformatowany, więc byłby to świetny fragment do nauki do nauki Sassa.

7. Brian Griffin

Oto kolejny projekt postaci autorstwa Rachel Bull, ten z Brianem Griffinem z Family Guy.

Zaskakujące jest, jak wiele szczegółów można uzyskać za pomocą czystego CSS. Cały styl Briana pasuje do stylu artystycznego serialu i wykorzystuje cienie, które są niewiarygodnie realistyczne.

Chociaż ten jest dość techniczny z ponad 150 liniami CSS i używa biblioteki Compass do rozruchu.

8. Emmet

Z filmu Lego to Emmet w całej okazałości. Rachel po raz kolejny zbudowała ten fragment od zera, używając CSS i Hamla, uproszczonego sposobu pisania współczesnego HTML.

Kilka z tych elementów jest naprawdę imponujących, jeśli chodzi o uruchamianie tylko w CSS. Warto zauważyć, że wiry włosów naprawdę wyglądają jak plastikowe kawałki Lego. Szalone, że jest to w ogóle możliwe!

W CSS jest dużo świetnej logiki Sassa, a jeśli jesteś deweloperem nerdem, spodoba ci się grzebanie w tym piórze. Zarówno kod, jak i wynik są wspaniałe.

9. CSS Eevee

Zbudowany wokół fenomenu Pokemon Go to czysty CSS Eevee stworzony przez Davida Khourshida.

Wykorzystuje podobny styl tła i strony jak aplikacja, odtwarzając cały Pokemon w czystym CSS. Z odrobiną teksturowania i kilkoma inteligentnymi warstwami, David sprawił, że ten Eevee rzeczywiście wyglądał 3D!

Animacje są również miłym akcentem i sprawiają, że całość wydaje się bardziej realistyczna. Niezależnie od tego, czy jesteś fanem Pokemonów, czy nigdy nie dotykałeś gry, musisz przyznać, że to dobra robota.

10. Myszka Miki

Chociaż ta głowa Myszki Miki jest nieco prostsza, jest to również nie lada wyczyn. Można by pomyśleć, że będzie łatwiej zarządzać, ponieważ jest statyczny, jednak pióro przesuwa ponad 450+ linii Sassa.

Najbardziej techniczną częścią jest uporządkowanie wszystkich kształtów i ponowne ułożenie elementów, aby odpowiednio wyrównać jeden na drugim.

Jednak wynik jest fantastyczny i widać podobieństwo do wczesnych kreskówek Mickey.

11. Księżniczka Zelda

Najlepsze zachowałem na koniec dzięki temu projektowi postaci Zelda. Ma trochę krótkie nogi, ale ogólnie styl jest dokładny.

Programista Charlie Marcotte używa Sassa i niestandardowych przekształceń CSS, aby rozmieścić wszystkie elementy. Dodatkowo surowy HTML jest nieco uproszczony dzięki preprocesorowi Pug.

Jeśli próbujesz przekraczać granice swojej wiedzy na temat CSS, dlaczego nie podjąć się podobnego projektu? To świetny sposób na sprawdzenie swoich umiejętności i zawsze możesz podzielić się tym, co zbudujesz w komentarzach poniżej.