Kodiranje Kung-fu 35 Grafika je zgrajena samo s CSS3
Poglejte grafike spodaj, super Photoshop deluje prav? Ne, ustvaril jih je CSS3. Ja, oni so popolnoma “sestavljen” z CSS3! Ko smo videli dovolj CSS3 animacij, smo mislili, da je vse to CSS3 kot potencialni morilec Flash, vendar smo narobe. Razvijalci morda ne zadovoljijo z zabavo animacije, zato zopet potiskajo meje CSS3, da bi izpodbijali področje grafičnega urejevalnika..
S to objavo je prišlo 35 skrbno oblikovanih CSS3 grafik, ki vključujejo tudi nekaj, kar ne bi povezali s CSS3 Apple iPhone, risani junak Doraemon, in še več presenečenj! Heck, nekateri od njih celo prihajajo s podrobnimi tutorski, ki vas naučijo, kako to doseči! Torej ne zamudite odlične možnosti, da se naučite ustvarjati grafiko s pomočjo CSS3 in malo HTML-ja, da se bomo poredni z CSS3!
Priporočamo vam, da si ogledate te predstavitve z najnovejšo različico brskalnika Google Chrome Safari ali različico za razvijalce. Večina demonov podpira najnovejšo različico Firefoxa in Google Chroma.
Ikona vira RSS
RSS Feed Icon zgrajena s CSS3, izključno iz Hongkiata! Skupaj s povezavo pride vaje, ki jih lahko dejansko naučite “risanje” ikono RSS Feed brez uporabe niti ene slike. Ustvarite čudež CSS3 s svojimi rokami!
Apple iMac
Ja tudi moje oči ne morejo verjeti, toda to je iMac “sestavljen” zgolj s CSS3.
Apple tipkovnica
To je Apple tipkovnica zgrajena s CSS3! Heck, tipke na tipkovnici se lahko celo pritisnejo.
Apple iPhone
Oh, še ena stvar: iPhoneCSS3.
češnjev cvet
Prava resničnost CSS3 je, da se lahko uporablja za gradnjo ničesar, vključno z rastlinami in živalmi!
Kavna skodelica
Naporen dan? Naredimo kavo CSS3, ki jo najbolje uporabljamo v brskalniku Safari / Google Chrome.
Doraemon
Ta Doraemon je znan po CSS3 testiranju združljivosti. Preizkusite ga v Internet Explorerju 8 ali novejšem in uživajte v lepem dnevu.
Meowww!
Zdaj gledate mačko, zgrajeno popolnoma s kodo! Škoda, da CSS3 ne more ustvariti zvočnih učinkov, vsaj za zdaj.
Mushroom, Triforce, Poké ball, Kirby
“Ker sem nerd, sem naredil nekaj smrdljivih kreacij - mario Mario, Triforce, Pokéball in Kirby. Za tiste, ki uporabljajo brskalnike dinozavrov, je posnetek zaslona tega, kako naj bi izgledal.”
Nyan Cat
“Vsebuje 81 elementov DOM, 688 vrstic čistega CSS-ja in eno funkcijo JavaScript za zvok zvoka. Moj CSS ne uspe preizkusiti CSSLint in res sem ponosen na to.”
Vzorci
CSS3 je tako velik, da ga je mogoče uporabiti tudi za gradnjo temeljnega sredstva za spletno oblikovanje, kot so ti vzorci.
BonBon
BonBon so sladki gumbi CSS3, ustvarjeni s ciljem v mislih: seksi, resnično prilagodljivi gumbi z najbolj minimalistično oznako.
IOS ikone
Neverjetno? Da. Te ikone gradijo zaobljeni vogali, sence, nakloni, rgba, psevdoelementi, in transformacije, s pomočjo določenih orodij, kot so orodja westciv in Border Radius.
Ikone za družabne medije
To je nemogoče, da spletni razvijalec ne gradi ikon socialnih medijev, če lahko gradi iPhone in Doraemon s CSS3. Te ikone so zelo dobro zgradili.
Ikone za družabne medije
Še ena vrsta ikon socialnih medijev, ki prikazujejo možnosti CSS3 pri ustvarjanju uporabnih ikon.
Posebno
“Posebnost je brezplačna ikona, ki je narejena samo v CSS. Ustvarjen je za spletna mesta in spletne aplikacije, ki so odvisne od manj zahtev HTTP ali pa jim sploh ni treba uporabiti nobene slike.”
Ikone GUI
84 preprostih ikon GUI, ki uporabljajo samo CSS in semantični HTML. To se še vedno šteje kot “neproizvodna pripravljenost” ikone, vendar so videti zelo obetavne.
Steve Jobs
Steve Jobs ni samo ikona digitalne dobe, ampak tudi vodja, ki močno spodbuja HTML5.
Twitter Neuspeli kit
Twitter ne bo uspel presenetiti, razen v Internet Explorerju 8 ali nižjem.
umbrUI
Elementi uporabniškega vmesnika omogočajo CSS3 in izgleda zelo elegantno!
Logotip Adobe Photoshop
Poklon Photoshopu brez uporabe Photoshopa.
Android Logotip
Android je narejen iz precej preprostih oblik, vendar pojasnjuje prednosti CSS3: lahko naredite preproste stvari in jih spremenite na način, ki ga želite, z uporabo samo kode, ne pa tudi Photoshopa..
Logotip Apple
Logotip Retro Apple, predstavljen z uporabo CSS3, je še vedno tako čudovit kot čas, ko je bil ustvarjen.
Logo Atari
Leta prej, kdo bi si mislil, da bo Atarijev logotip ponovno ustvarjen z uporabo CSS3.
BP Logo
Enostavno logotip lahko preprosto izdelate s CSS3. Najboljša stvar pri nekaterih od teh logotipov, prikazanih tukaj, so kode, ki ste jih preizkusili!
Logotip Dribbble
Znani predstavitveni spletni strani z logotipom Dribbble, ki ga poganja uporabnik z uporabo CSS3.
Logotip Magento
Logotip podjetja Magento ni preveč težak, vendar je rezultat videti profesionalen.
Logotip McDonald
Ljubim CSS3!
Twitter Bird
Popolno razmerje, konica klobuka ustvarjalcu.
Logotip Windows
Logotip Windows! Izgleda res super in enostavno je ustvariti!
Logotip Internet Explorerja
Res odlična kreacija! Deluje v večjih brskalnikih, razen v Internet Explorerju 8 ali manj.
Logotip Google Chrome
Nisem prepričan, da vam je všeč novi logotip Google Chrome ali ne, toda ta logotip Google Chrome CSS3 izgleda super!
Logotip Opera
Zdaj praksa za vas: kakšne so razlike med tem kosom CSS3 in pravim poslom?
Logotip HTML5
HTML5 ne more zasvetiti brez CSS3!
Volkswagen Logo
Razen barvne sheme, ta CSS3 klon izgleda enako kot prvotni.
Razmišljanje
Z razcvetom logotipov in grafike iz čistega CSS3 prihajajo razprave, ki močno razpravljajo o uporabnosti CSS3 grafike v realnem svetovnem produkcijskem okolju..
Na splošno CSS3 grafika je v redu, vendar je lahko postanejo nadležno, še posebej, če morate spremeniti obliko ali preprosto spremeniti velikost grafike, tudi največja bolečina je, da tehnologija še ni v celoti podprta z nekaterimi brskalniki, kot je Internet Explorer.
Kaj misliš? Ali boste na svojem spletnem mestu uporabljali grafiko, ustvarjeno s CSS3? Imate kakšno rešitev za trenutne slabosti? Sporočite nam svoje misli in delite z nami, če ste pravkar naredili grafiko CSS3!
Več
Ste pripravljeni dejansko narediti nekaj s CSS3? Prišli ste na pravo mesto! Spodaj so napisana navodila in vadnice, ki vam bodo v veliko pomoč na poti do obvladovanja CSS3.
- CSS3: Ustvarite meni krmarja za krmarjenje
- CSS3: Ustvarite logotip vira RSS
- CSS3: Ustvarite iskalno polje
- CSS3: Vodnik za začetnike
- CSS3 / HTML5: Ustvarite spletne strani
- CSS3 / HTML5: Ustvarite kontaktni obrazec na osnovi AJAX
