Kódování Kung-fu 35 Grafika postavená čistě s CSS3

Podívejte se na grafiku níže, úžasné Photoshop funguje správně? Ne, jsou vytvořeny pomocí CSS3. Ano, jsou zcela “nakreslené” CSS3! Když jsme viděli dost CSS3 animací, mysleli jsme si, že jsou to všechny CSS3, které mohou udělat jako potenciální Flash vrah, ale mýlíme se. Vývojáři možná neuspokojují zábavu z animace, takže opět posouvají hranice CSS3, aby zpochybnili realitu grafického editoru..

S tímto příspěvkem přichází 35 pečlivě vytvořených CSS3 grafik, které dokonce obsahují něco, co byste s CSS3 neměli Apple iPhone, kreslená postavička Doraemon, a další překvapení! Sakra, někteří z nich dokonce přicházejí s podrobným návodem, který vás naučí, jak toho dosáhnout! Takže nenechte si ujít velkou šanci naučit se vytvářet grafiku pomocí CSS3 a trochu HTML, pojďme se zlobit s CSS3!

Důrazně doporučujeme tyto ukázky zobrazit pomocí nejnovější verze prohlížeče Google Chrome ve verzi Safari nebo Developer. Většina dema však podporuje nejnovější verzi Firefoxu a Google Chrome.

Ikona kanálu RSS

RSS Feed ikona postavená s CSS3, výhradně z Hongkiat! Spolu s odkazem přichází tutoriál, na který se můžete naučit “kreslit” Ikona RSS Feed bez použití jediného snímku. Vytvořte zázrak CSS3 vlastníma rukama!

Apple iMac

Jo, moje oči tomu také nemohou uvěřit, ale je to iMac “sestaven” čistě s CSS3.

Klávesnice Apple

Je to Apple klávesnice postavená s CSS3! Sakra, tlačítka klávesnice mohou být dokonce stisknuta.

Apple iPhone

Ještě jedna věc: iPhoneCSS3.

Třešňový květ

Skutečná úžasnost CSS3 spočívá v tom, že může být použita k vybudování všeho, včetně rostlin a zvířat!

Kávový šálek

Unavující den? Pojďme si dát kávu CSS3, nejlépe podávanou se Safari / Google Chrome.

Doraemon

Tento Doraemon je známý pro testování kompatibility CSS3. Vyzkoušejte to v aplikaci Internet Explorer 8 nebo nižší a máte hezký den.

Meowww!

Nyní se díváte na kočku postavenou kompletně s kódem! Škoda, že CSS3 nemůže generovat zvukové efekty, alespoň prozatím.

Houba, Triforce, Poké míč, Kirby

“Být blbeček, udělal jsem nějaké nerdy výtvory - houby Mario, Triforce, Pokéball a Kirby. Pro ty, kteří používají prohlížeče dinosaurů, je tu screenshot toho, co by mělo vypadat.”

Nyan Cat

“Obsahuje 81 prvků DOM, 688 řádků čistého CSS a jednu funkci JavaScript pro smyčkování zvuku. Moje CSS selže v testu CSSLint a jsem na to opravdu pyšný.”

Vzory

CSS3 je tak velký, že může být také použit k vybudování základního majetku pro web design, jako jsou tyto vzory.

Bonbón

BonBon jsou sladká tlačítka CSS3 vytvořená s ohledem na cíl: sexy vypadající, velmi flexibilní tlačítka s co nejmenším minimalistickým značením.

Ikony iOS

Úžasný? Ano. Tyto ikony jsou postaveny zaoblené rohy, stíny, přechody, rgba, pseudo-elementy, a transformuje, za pomoci určitých nástrojů, jako jsou nástroje Westciv a Border Radius.

Sociální media ikony

To je nemožné, aby webový vývojář nevytvářel sociální media ikony, pokud mohou postavit iPhone a Doraemon s CSS3. A tyto ikony postavili opravdu dobře.

Sociální media ikony

Další sada ikon sociálních médií, které ukazují možnosti CSS3 při vytváření použitelných ikon.

Podivný

“Zvláštní je bezplatný balíček ikon vyrobený pouze v CSS. Byl vytvořen pro weby a webové aplikace, které závisí na menším počtu požadavků HTTP nebo nemusejí vůbec používat žádný obrázek.”

Ikony GUI

84 jednoduchých grafických ikon pomocí CSS a sémantického HTML. Toto je stále považováno za “non-produkční připraven” ikony, ale vypadají velmi nadějně.

Steve Jobs

Steve Jobs není jen ikonou digitálního věku, ale také vůdcem, který výrazně podporuje HTML5.

Twitter Selhání velryby

Velryba se nezdaří překvapit, s výjimkou aplikace Internet Explorer 8 nebo nižší.

umbrUI

Prvky uživatelského rozhraní umožněné pomocí CSS3 a vypadají opravdu elegantně!

Logo Adobe Photoshop

Pocta Photoshopu bez použití Photoshopu.

Logo Android

Android je vyroben z poměrně jednoduchých tvarů, ale vysvětluje výhodu CSS3: můžete dělat jednoduché věci a upravovat je jakýmkoliv způsobem pomocí kódu, ale ne Photoshopu.

Logo Apple

Retro logo Apple prezentovány pomocí CSS3, stále stejně úžasné jako v době, kdy byl vytvořen.

Logo Atari

Roky předtím, kdo by si myslel, že logo Atari bude znovu vytvořeno pomocí CSS3.

Logo BP

Jednoduché logo lze snadno vytvořit pomocí CSS3. Nejlepší věc, s některými z těchto loga showcased zde jsou tam kód pro vás vyzkoušet!

Dribbble Logo

Slavný uživatel-poháněl vitrínu Dribbble logo showcased pomocí CSS3.

Logo Magento

Logo společnosti Magento není příliš těžké na to, aby kreslil, ale výsledek vypadá profesionálně.

Logo společnosti McDonald

Jsem lovin 'CSS3!

Twitter Pták

Perfektní proporce, klobouk tip na tvůrce.

Logo systému Windows

Logo Windows! Vypadá to opravdu úžasně a je snadné jej vytvořit!

Logo aplikace Internet Explorer

Opravdu skvělé stvoření! Pracuje v hlavních prohlížečích s výjimkou aplikace Internet Explorer 8 nebo nižší.

Logo Google Chrome

Nejsem si jistý, zda máte rádi nové logo Google Chrome, nebo ne, ale toto logo CSS3 Google Chrome vypadá úžasně!

Logo Opery

Nyní praxe pro vás: jaké jsou rozdíly mezi tímto kusem CSS3 a skutečnou dohodu?

Logo HTML5

HTML5 nemůže svítit bez CSS3!

Logo Volkswagen

Kromě barevného schématu tento klon CSS3 vypadá stejně jako původní.

Odraz

S rozmachem log a grafik z čistého CSS3 přicházejí diskuse, které velmi diskutují o použitelnosti grafiky vyrobené v CSS3 v reálném prostředí produkčního prostředí.

Obecně je grafika CSS3 v pořádku, ale to může být nepříjemné, zejména když potřebujete změnit design nebo jednoduše změnit velikost grafiky, Největší bolest zde má také technologie, která není dosud plně podporována některými prohlížeči, jako je Internet Explorer.

Co myslíš? Použijete na svých stránkách grafiku vytvořenou pomocí CSS3? Máte nějaké řešení pro jeho současné nevýhody? Dejte nám vědět svou myšlenku a dělejte s námi, pokud jste právě zapálili grafiku CSS3!

Více

Ochotně něco udělat s CSS3? Přišli jste na správné místo! Níže jsou uvedeny návody a návody, které vám pomohou na vaší cestě k zvládnutí CSS3.

CSS3: Vytvoření navigační nabídky pro Drobečková navigace
CSS3: Vytvořit logo RSS kanálu
CSS3: Vytvořit vyhledávací pole
CSS3: Příručka pro začátečníky
CSS3 / HTML5: Vytváření webových stránek
CSS3 / HTML5: Vytvoření kontaktního formuláře na bázi AJAX