Kodiranje Kung-fu 35 Grafika izgrađena čisto s CSS3
Pogledajte grafiku ispod, super Photoshop radi kako treba? Ne, napravili su ih CSS3. Da, oni su potpuno “nacrtan” by CSS3! Kada smo vidjeli dovoljno CSS3 animacija, mislili smo da sve to može učiniti kao potencijalni Flash ubojica, ali u krivu smo. Programeri možda ne zadovoljavaju zabavu animacije, pa opet, guraju granice CSS3 kako bi izazvale područje grafičkog urednika.
S ovim postom dolazi 35 pomno izrađenih CSS3 grafika koje uključuju i nešto što se ne bi povezalo s CSS3 Apple iPhone, lik iz crtića Doraemon, i još iznenađenja! Pakao, neki od njih čak dolaze s detaljnim tutorial koji vas naučiti kako to postići! Stoga ne propustite sjajnu priliku da naučite stvarati grafike pomoću CSS3 i malo HTML-a, hajde da budemo zločesti s CSS3!
Preporučujemo vam da ove demo prikaze pogledate pomoću najnovije verzije preglednika Google Chrome Safari ili Developer. Većina demo verzija podržava najnoviju verziju Firefoxa i Google Chromea.
Ikona RSS feeda
RSS Feed Icon izgrađen s CSS3, isključivo iz Hongkiata! Uz link dolazi tutorial koji zapravo možete naučiti “crtati” ikonu RSS Feed bez upotrebe niti jedne slike. Napravite čudo CSS3 vlastitim rukama!
Apple iMac
Da moje oči također ne mogu vjerovati, ali to je iMac “sklopljen” isključivo s CSS3.
Apple tipkovnica
To je Apple tipkovnica izgrađena s CSS3! Tipke tipkovnice mogu se čak i pritisnuti.
Apple iPhone
Još jedna stvar: iPhoneCSS3.
Cherry Blossom
Stvarna nevjerojatnost CSS3 je da se može koristiti za izgradnju bilo čega, uključujući biljke i životinje!
Šalica kave
Naporan dan? Uzmite kavu CSS3, najbolje posluženu uz Safari / Google Chrome.
Doraemon
Ovaj Doraemon je poznat po CSS3 testiranju kompatibilnosti. Isprobajte ga u pregledniku Internet Explorer 8 ili nižem i imajte lijep dan.
Meowww!
Sada gledate mačku koja je u potpunosti izgrađena s kodom! Šteta što CSS3 ne može generirati zvučne efekte, barem za sada.
Gljiva, Triforce, Poké ball, Kirby
“Budući da sam bio glupan, napravio sam neke izmišljene kreacije - Mario gljiva, Triforce, Pokéball i Kirby. Za one koji koriste preglednike dinosaura, postoji snimak zaslona o tome kako bi trebao izgledati.”
Nyan Mačka
“Sadrži 81 DOM elementa, 688 redaka čistog CSS-a i jednu JavaScript funkciju za petlje zvuka. Moj CSS ne uspije CSSLint test i ja sam stvarno ponosan na to.”
obrasci
CSS3 je toliko velik da se može koristiti i za izgradnju temeljne imovine za web dizajn, kao što su ovi uzorci.
Bonbona
BonBon su slatki CSS3 gumbi stvoreni s ciljem na umu: seksi izgleda, stvarno fleksibilni gumbi s najmanjim minimalističkim oznakama.
IOS ikone
Iznenađujuće? Da. Te ikone izrađuje zaobljeni kutovi, sjene, gradijenti, RGBA, pseudo-elementi, i transformira, uz pomoć određenih alata kao što su Westciv alati i Border Radius.
Ikone društvenih medija
To je nemoguće da web developer ne gradi ikone društvenih medija ako mogu izgraditi iPhone i Doraemon s CSS3. I te su ikone vrlo dobro izgradile.
Ikone društvenih medija
Još jedan skup simbola društvenih medija koji prikazuju mogućnosti CSS3 u stvaranju korisnih ikona.
Svojstven
“Svojstvo je besplatan paket ikona napravljen samo u CSS-u. Stvoren je za web-lokacije i web-aplikacije koje ovise o što je moguće manje HTTP zahtjeva ili ne trebaju bilo koju sliku.”
GUI ikone
84 jednostavne GUI ikone koje koriste samo CSS i semantički HTML. To se još uvijek smatra kao “neproizvodna spremna” ikone, ali izgledaju vrlo obećavajuće.
Steve Jobs
Steve Jobs nije samo ikona digitalnog doba, već i lider koji uvelike promiče HTML5.
Twitter Neuspjeh kitova
Twitter neće uspjeti iznenaditi, osim u Internet Exploreru 8 ili niže.
umbrUI
Elementi korisničkog sučelja omogućeni su pomoću CSS3, a izgledaju vrlo elegantno!
Logo Adobe Photoshop
Posveta Photoshopu bez korištenja Photoshopa.
Android Logo
Android je napravljen od prilično jednostavnih oblika, ali objašnjava prednost CSS3: možete napraviti jednostavne stvari i modificirati ih na bilo koji način pomoću samo koda, ali ne i Photoshopa.
Appleov logotip
Retro Apple logo predstavljen pomoću CSS3, još uvijek kao strašan kao i vrijeme kada je stvoren.
Atari Logo
Prije nekoliko godina, tko bi pomislio da će Atari biti ponovno stvoren pomoću CSS3.
BP Logo
Jednostavan logotip može se jednostavno izraditi pomoću CSS3. Najbolja stvar s nekim od ovih logotipa prikazanih ovdje su kodovi za vas da isprobate!
Dribbble logotip
Slavni web-site izlog tvrtke Dribbble s prikazom na CSS3.
Magento logotip
Magentov logotip nije pretežak za crtanje, ali ishod izgleda profesionalno.
McDonald Logo
Ja volim CSS3!
Twitter Ptica
Savršena proporcija, vrh šapa za kreatora.
Logotip sustava Windows
Logotip sustava Windows! Izgleda strašno i lako je stvoriti!
Logotip programa Internet Explorer
Stvarno sjajna kreacija! Radi u glavnim preglednicima osim Internet Explorera 8 ili niže.
Google Chrome logotip
Nisam siguran da vam se sviđa novi logotip Google Chrome ili ne, ali ovaj CSS3 logo Google Chrome izgleda sjajno!
Logo loga Opera
Sada praksa za vas: koje su razlike između CSS3 i stvarne ponude?
Logotip HTML5
HTML5 ne može svijetliti bez CSS3!
Volkswagen Logo
Osim sheme boja, ovaj CSS3 klon izgleda identično originalnom.
Odraz
Uz bum logotipa i grafike napravljenih od čistog CSS3 dolaze rasprave koje uvelike raspravljaju o upotrebljivosti grafike proizvedene u CSS3 u stvarnom svijetu produkcijskog okruženja..
Općenito CSS3 grafika je u redu, ali to možda će vam smetati pogotovo kada trebate promijeniti dizajn ili jednostavno promijeniti veličinu grafike, i najveća bol ovdje je tehnologija još uvijek nije u potpunosti podržan od strane određenih preglednika kao što je Internet Explorer.
Što misliš? Hoćete li upotrijebiti grafiku izrađenu pomoću CSS3 na svojoj web-lokaciji? Imate li rješenje za svoje trenutne nedostatke? Javite nam svoje misli i podijelite s nama ako ste upravo ispekli CSS3 grafiku!
Više
Jeste li spremni učiniti nešto s CSS3? Došli ste na pravo mjesto! Ispod su pisani vodiči i tutoriali koji će vam uvelike pomoći na putu do usvajanja CSS3.
- CSS3: Stvorite izbornik za navigaciju za kruh
- CSS3: Izradite logotip RSS feeda
- CSS3: Stvaranje okvira za pretraživanje
- CSS3: Vodič za početnike
- CSS3 / HTML5: Stvaranje web-stranica
- CSS3 / HTML5: Kreirajte kontaktni obrazac na temelju AJAX-a
