Kung-fu 35 kodeerimine ainult CSS3 abil
Vaata allolevaid graafikaid, fantastiline Photoshop töötab? Nah, nad on loodud CSS3 poolt. Jah, nad on täielikult “tõmmatud” CSS3 poolt! Kui oleme näinud piisavalt CSS3-animatsioone, arvasime, et need kõik on CSS3, mida saab teha potentsiaalse Flash-tapjana, kuid me eksime. Arendajad ei pruugi animatsiooni lõbususega rahuldada, nii et nad taas tõukavad CSS3 piire graafilise redaktori reaalsuse vaidlustamiseks.
Selle postitusega kaasneb 35 hoolikalt valmistatud CSS3 graafika, mis sisaldab isegi midagi, mida te ei soovi CSS3-ga Apple iPhone, multifilmi tegelane Doraemon, ja rohkem üllatusi! Heck, mõned neist isegi koos üksikasjaliku juhendaja, mis õpetab, kuidas seda saavutada! Nii et ära jäta suurt võimalust õppida graafika loomist CSS3 ja natuke HTML-i abil, olgem CSS3-ga üleannetu!
Soovitatav on vaadata neid demosid Google Chrome'i Safari või Arendaja versiooni uusima versiooni abil. Enamik demosid toetavad siiski Firefoxi ja Google Chrome'i viimast versiooni.
RSS-voo ikoon
RSS Feed Icon ehitatud CSS3, ainult Hongkiat! Lingiga kaasneb juhendaja, mida saate tegelikult õppida “joonistama” RSS-kanali ikoon ilma ühtegi pilti kasutamata. Looge oma kätega CSS3 ime!
Apple iMac
Jah, mu silmad ei suuda seda uskuda, aga see on iMac “kokku” ainult CSS3-ga.
Apple'i klaviatuur
See on Apple'i klaviatuur, mis on ehitatud CSS3-ga! Heck, klaviatuuri nuppe saab isegi vajutada.
Apple iPhone
Veel üks asi: iPhoneCSS3.
kirsiõis
CSS3 tõeline awesomeness on, et seda saab kasutada, et ehitada midagi, sealhulgas taimi ja loomi!
Kohvitass
Väsitav päev? Meil on CSS3 kohv, mida pakutakse kõige paremini Safari / Google Chrome'iga.
Doraemon
See Doraemon on tuntud CSS3 ühilduvuse testimise kohta. Proovige seda Internet Exploreris 8 või allpool ja nautige kena päeva.
Meowww!
Nüüd vaatate kassiga, mis on täielikult koodiga ehitatud! Liiga halb, et CSS3 ei saa vähemalt praegu luua heliefekte.
Seen, Triforce, Poké pall, Kirby
“Nerdi olles olen teinud mõningaid närvilisi loominguid - Mario seeni, Triforce, Pokéball ja Kirby. Neile, kes kasutavad dinosauruse brausereid, on olemas pilt, mida see peaks välja nägema.”
Nyan Cat
“See sisaldab 81 DOM elementi, 688 rida puhast CSS-i ja üks JavaScript-funktsioon heli sünkroonimiseks. Minu CSS ebaõnnestub CSSLint testiga ja ma olen selle üle väga uhke.”
Mustrid
CSS3 on nii suur, et seda saab kasutada ka veebidisaini põhivara loomiseks, näiteks need mustrid.
BonBon
BonBon on magus CSS3 nupp, mis on loodud eesmärgiga silmas pidada: seksikas välimusega, tõeliselt paindlikud nupud, millel on võimalikult minimalistlik märgistus.
iOS ikoonid
Hämmastav? Jah. Need ikoonid on ehitatud ümardatud nurkadega, varjud, kalded, rgba, pseudoelemendid, ja teisendab, teatud vahendite, näiteks westcivi tööriistade ja Border Radius abil.
Sotsiaalse meedia ikoonid
See on võimatu veebi arendaja mitte ehitada sotsiaalse meedia ikoone, kui nad saavad ehitada iPhone ja Doraemon koos CSS3. Ja nad ehitasid need ikoonid väga hästi.
Sotsiaalse meedia ikoonid
Teine sotsiaalmeedia ikoonide komplekt, mis näitab CSS3 võimalusi kasutatavate ikoonide loomisel.
Omapärane
“Omapärane on tasuta ikoonipakett, mis on tehtud ainult CSS-is. See loodi saitidele ja veebirakendustele, mis sõltuvad vähem HTTP-päringutest või ei pea üldse mingit pilti kasutama.”
GUI ikoonid
84 lihtsat GUI ikooni, mis kasutavad ainult CSS-i ja semantilist HTML-i. Seda peetakse ikka veel “mittetootmine valmis” ikoonid, kuid nad näevad väga paljutõotavaid.
Steve Jobs
Steve Jobs ei ole ainult digitaalajastu ikoon, vaid ka juht, kes suuresti HTML5-d edendab.
Twitter Fail Whale
Twitteri ebaõnnestunud vaal ei üllata sind, välja arvatud Internet Explorer 8 või allpool.
umbrUI
CSS3-ga võimaldatud kasutajaliidese elemendid ja see näeb välja tõesti klanitud!
Adobe Photoshopi logo
Photoshopi austamine Photoshopi kasutamata.
Androidi logo
Android on valmistatud üsna lihtsatest kujudest, kuid see selgitab CSS3 eeliseid: saate lihtsalt lihtsaid asju teha ja muuta lihtsalt soovitud koodi abil, kuid mitte Photoshopiga.
Apple'i logo
Retro Apple'i logo, mis esitati CSS3 abil, on endiselt sama fantastiline kui selle loomise aeg.
Atari logo
Aastaid varem, kes oleks pidanud Atari logo looma CSS3 abil uuesti.
BP logo
Lihtne logo on lihtne teha CSS3-ga. Mõned neist siin näidatud logodest on parimad, kui teil on olemas kood, mida saate proovida!
Dribbble Logo
Kuulus kasutaja poolt juhitav presentatsioonisait Dribbble'i logo, mis on esitatud CSS3 abil.
Magento logo
Magento logo ei ole liiga raske joonistada, kuid tulemus tundub professionaalne.
McDonaldi logo
Ma armastan CSS3!
Twitter Bird
Täiuslik proportsioon, müts otsikule.
Windowsi logo
Windowsi logo! Tundub tõesti fantastiline ja seda on lihtne luua!
Internet Exploreri logo
Tõesti suur looming! See töötab suuremates brauserites, välja arvatud Internet Explorer 8 või alla selle.
Google Chrome'i logo
Ma ei ole kindel, et sa armastad uut Google Chrome'i logo või mitte, kuid see CSS3 Google Chrome'i logo näeb välja fantastiline!
Opera logo
Nüüd praktika teile: millised on erinevused selle CSS3 ja reaalse tehingu vahel?
HTML5 logo
HTML5 ei saa ilma CSS3-ga särada!
Volkswagen Logo
Välja arvatud värviskeem, tundub see CSS3 kloon algsest identne.
Peegeldus
Puhtast CSS3-st tehtud logode ja graafika buumiga on tulnud arutelud, mis arutlevad suuresti CSS3-toodetud graafika kasutatavuse üle reaalses maailmas..
Üldiselt on CSS3 graafika hea, aga see on võib tekkida tüütu, eriti kui teil on vaja muuta disaini või lihtsalt muuta selle suurust, ka siin suurim valu on see, et teatud brauserid nagu Internet Explorer ei toeta seda tehnoloogiat veel täielikult.
Mida sa arvad? Kas kasutate oma saidil CSS3-ga tehtud graafikat? Kas teil on lahendusi oma praeguste puuduste suhtes? Anna meile teada oma mõte ja jagada meiega, kui sa just küpsetasid CSS3 graafikat!
Veel
Kas soovid tegelikult midagi CSS3-ga teha? Sa oled jõudnud õigesse kohta! Allpool on juhendid ja õpetused, mis on kirjutatud selleks, et aidata teil suuresti CSS3 omandamisel.
- CSS3: Breadcrumb Navigation Menu loomine
- CSS3: RSS-voo logo loomine
- CSS3: otsingukasti loomine
- CSS3: algaja juhend
- CSS3 / HTML5: veebilehtede loomine
- CSS3 / HTML5: AJAX-põhise kontaktvormi loomine
