Kodowanie Kung-fu 35 Grafika zbudowana czysto z CSS3

Spójrz na poniższe grafiki, awesome Photoshop działa dobrze? Nie, są tworzone przez CSS3. Tak oni są całkowicie “pociągnięty” przez CSS3! Kiedy widzieliśmy już wystarczająco dużo animacji CSS3, myśleliśmy, że to wszystko CSS3 może zrobić jako potencjalny zabójca Flasha, ale się mylimy. Deweloperzy mogą nie zadowalać się zabawą animacji, więc znowu przesuwają granice CSS3, aby rzucić wyzwanie twórcom graficznym.

W tym poście pojawia się 35 starannie opracowanych grafik CSS3, które zawierają nawet coś, czego nie można by powiązać z CSS3 Apple iPhone, postać z kreskówki Doraemon, i więcej niespodzianek! Heck, niektóre z nich zawierają nawet szczegółowy poradnik, który uczy, jak to osiągnąć! Więc nie przegap wielkiej szansy, aby nauczyć się tworzyć grafikę za pomocą CSS3 i trochę HTML, zdobądź niegrzeczny z CSS3!

Zdecydowanie zaleca się przeglądanie tych wersji demonstracyjnych przy użyciu najnowszej wersji przeglądarki Google Chrome w wersji Safari lub Developer. Większość wersji demonstracyjnych obsługuje jednak najnowszą wersję Firefoksa i Google Chrome.

Ikona kanału RSS

RSS Feed Icon zbudowany z CSS3, wyłącznie z Hongkiat! Wraz z linkiem pojawia się samouczek, którego można się nauczyć “rysować” ikona kanału RSS bez użycia nawet pojedynczego obrazu. Stwórz cud CSS3 własnymi rękami!

Apple iMac

Tak, moje oczy też nie mogą w to uwierzyć, ale to iMac “zmontowane” wyłącznie z CSS3.

Klawiatura Apple

To klawiatura Apple zbudowana z CSS3! Heck, przyciski klawiatury można nawet naciskać.

Apple iPhone

Och, jeszcze jedno: iPhoneCSS3.

Kwiat Wiśni

Prawdziwą gracją CSS3 jest to, że można go wykorzystać do budowania wszystkiego, w tym roślin i zwierząt!

Filiżanka kawy

Męczący dzień? Przygotujmy kawę CSS3, najlepiej obsługiwaną przez Safari / Google Chrome.

Doraemon

Ten Doraemon słynie z testów zgodności CSS3. Wypróbuj go w Internet Explorerze 8 lub niższym i miłego dnia.

Meowww!

Teraz patrzysz na kota zbudowanego całkowicie z kodem! Szkoda, że CSS3 nie może generować efektów dźwiękowych, przynajmniej na razie.

Grzyb, Triforce, Poké ball, Kirby

“Będąc frajerem, stworzyłem kilka dziwacznych kreacji - grzyba Mario, Triforce, Pokéball i Kirby. Dla tych, którzy używają przeglądarek dinozaurów, znajduje się zrzut ekranu z tym, jak powinien wyglądać.”

Nyan Cat

“Zawiera 81 elementów DOM, 688 linii czystego CSS i jedną funkcję JavaScript do zapętlania dźwięku. Mój CSS nie przejdzie testu CSSLint i jestem z tego bardzo dumny.”

Wzory

CSS3 jest tak wielki, że może być również wykorzystywany do budowania fundamentalnych zasobów dla projektowania stron internetowych, takich jak te wzorce.

Cukierek

BonBon to słodkie przyciski CSS3 stworzone z myślą o celu: seksownie wyglądające, naprawdę elastyczne przyciski z najbardziej minimalistycznym znacznikiem, jak to możliwe.

Ikony iOS

Niesamowity? Tak. Te ikony są tworzone przez zaokrąglone rogi, cienie, gradienty, rgba, pseudoelementy, i przekształca się, za pomocą pewnych narzędzi, takich jak narzędzia westciv i Border Radius.

Ikony mediów społecznościowych

To niemożliwe, aby programista nie budował ikon mediów społecznościowych, jeśli może zbudować iPhone'a i Doraemona za pomocą CSS3. I zbudowali te ikony naprawdę dobrze.

Ikony mediów społecznościowych

Kolejny zestaw ikon mediów społecznościowych, które pokazują możliwości CSS3 w tworzeniu użytecznych ikon.

Szczególny

“Peculiar to darmowy pakiet ikon tylko w CSS. Został stworzony dla witryn i aplikacji internetowych, które zależą od mniejszej liczby żądań HTTP lub nie muszą w ogóle używać żadnego obrazu.”

Ikony GUI

84 proste ikony GUI przy użyciu tylko CSS i semantycznego HTML. Jest to nadal uważane za “gotowy do produkcji” ikony, ale wyglądają bardzo obiecująco.

Steve Jobs

Steve Jobs to nie tylko ikona ery cyfrowej, ale także lider, który bardzo promuje HTML5.

Whale Fail Twitter

Wieloryb, który zawiódł na Twitterze, nie zawiedzie Cię, z wyjątkiem Internet Explorera 8 lub niższego.

umbrUI

Elementy interfejsu użytkownika możliwe dzięki CSS3 i wyglądają naprawdę elegancko!

Logo Adobe Photoshop

Hołd dla Photoshopa bez użycia Photoshopa.

Logo Android

Android składa się z dość prostych kształtów, ale wyjaśnia zaletę CSS3: możesz tworzyć proste rzeczy i modyfikować je w dowolny sposób, używając tylko kodu, ale nie Photoshopa.

Logo Apple

Retro logo Apple prezentowane za pomocą CSS3, wciąż tak samo niesamowite, jak w czasie jego tworzenia.

Logo Atari

Przed laty, kto by pomyślał, że logo Atari zostanie ponownie utworzone przy użyciu CSS3.

Logo BP

Proste logo można łatwo utworzyć za pomocą CSS3. Najlepsze z niektórych prezentowanych tutaj logo są kody, które można wypróbować!

Logo Dribbble

Znana witryna prezentowana przez użytkowników Logo Dribbble prezentowane za pomocą CSS3.

Logo Magento

Logo Magento nie jest zbyt trudne do rysowania, ale wynik wygląda profesjonalnie.

McDonald Logo

Uwielbiam CSS3!

Twitter Ptak

Idealna proporcja, czapka dla twórcy.

Logo Windows

Logo Windows! Wygląda naprawdę niesamowicie i łatwo go stworzyć!

Logo Internet Explorer

Naprawdę wspaniałe stworzenie! Działa w głównych przeglądarkach z wyjątkiem przeglądarki Internet Explorer 8 lub nowszej.

Logo Google Chrome

Nie jestem pewien, czy podoba Ci się nowe logo Google Chrome, ale to logo CSS3 Google Chrome wygląda niesamowicie!

Logo Opery

Teraz praktyka dla ciebie: jakie są różnice między tym kawałkiem CSS3 a prawdziwą transakcją?

Logo HTML5

HTML5 nie może świecić bez CSS3!

Logo Volkswagena

Oprócz schematu kolorów ten klon CSS3 wygląda identycznie jak oryginalny.

Odbicie

Wraz z boomem na loga i grafikę wykonaną z czystego CSS3 pojawiają się dyskusje, które bardzo dyskutują o użyteczności grafiki CSS3 w rzeczywistym środowisku produkcyjnym.

Ogólnie grafika CSS3 jest w porządku, ale to może być denerwujące, zwłaszcza gdy trzeba zmienić projekt lub po prostu zmienić rozmiar grafiki, Największym problemem jest również to, że technologia nie jest jeszcze w pełni obsługiwana przez niektóre przeglądarki, takie jak Internet Explorer.

Co myślisz? Czy użyjesz grafiki stworzonej za pomocą CSS3 na swojej stronie? Czy masz jakieś rozwiązanie dla jego obecnych wad? Daj nam znać swoją myśl i podziel się z nami, jeśli właśnie upiekłeś grafikę CSS3!

Więcej

Czy chcesz coś zrobić z CSS3? Jesteś we właściwym miejscu! Poniżej znajdują się poradniki i samouczki napisane, aby pomóc Ci znacznie na drodze do opanowania CSS3.

CSS3: Utwórz menu nawigacyjne nawigacyjne
CSS3: Utwórz logo kanału RSS
CSS3: Utwórz pole wyszukiwania
CSS3: Przewodnik dla początkujących
CSS3 / HTML5: Utwórz strony internetowe
CSS3 / HTML5: Utwórz formularz kontaktowy oparty na AJAX