Kodavimas Kung-fu 35 Grafika sukurta tik su CSS3
Pažvelkite į žemiau pateiktas grafikas, nuostabus Photoshop veikia teisingai? Nah, juos sukūrė CSS3. Taip, jie visiškai “nupieštas” CSS3! Kai matėme pakankamai CSS3 animacijų, mes manėme, kad visi CSS3 gali padaryti kaip galimą „Flash“ žudiką, bet mes neteisingai. Gali būti, kad kūrėjai netenkina animacijos įdomumo, taigi, jie vėl stumia CSS3 ribas, kad užginčytų grafinio redaktoriaus sritį.
Su šiuo paštu ateina 35 kruopščiai sukurta CSS3 grafika, kuri netgi apima kažką, su kuria nesusiję su CSS3 „Apple iPhone“, animacinio filmo herojus Doraemon, ir daugiau netikėtumų! Heck, kai kurie iš jų netgi ateina su išsamia pamoka, kad išmokyti jus, kaip tai pasiekti! Taigi nepraleiskite puikios progos išmokti kurti grafiką, naudodami CSS3 ir šiek tiek HTML, nuskambėkime su CSS3!
Labai rekomenduojama peržiūrėti šiuos demonstravimus naudodami naujausią „Google Chrome“ „Safari“ arba „Developer“ versiją. Dauguma demo palaiko naujausią „Firefox“ ir „Google Chrome“ versiją.
RSS kanalo piktograma
RSS Feed Icon pastatytas su CSS3, išimtinai iš Hongkiat! Kartu su nuoroda pateikiama pamoka, kurią galite iš tikrųjų išmokti “piešti” RSS kanalo piktogramą nenaudojant net vieno vaizdo. Sukurkite CSS3 stebuklą savo rankomis!
„Apple iMac“
Taip, mano akys taip pat negali patikėti, bet tai yra „iMac“ “surinkti” tik CSS3.
„Apple“ klaviatūra
Tai Apple klaviatūra, pastatyta su CSS3! Įsitikinkite, kad klaviatūros mygtukai netgi gali būti paspausti.
„Apple iPhone“
O dar vienas dalykas: iPhoneCSS3.
vyšnių žiedas
Tikrasis CSS3 nuostabumas yra tai, kad jis gali būti naudojamas statyti viską, įskaitant augalus ir gyvūnus!
Kavos puodelis
Nerimanti diena? Turėkime CSS3 kavą, geriausia aptarnauti „Safari“ / „Google Chrome“.
Doraemon
Šis „Doraemon“ garsėja CSS3 suderinamumo testavimu. Išbandykite jį „Internet Explorer 8“ ar žemesnėje versijoje ir mėgaukitės gera diena.
Meowww!
Dabar žiūrite į katę, visiškai sukurtą su kodu! Per blogai CSS3 negali generuoti garso efektų, bent jau dabar.
Grybai, Triforce, Poké kamuolys, Kirby
“Būdamas nerdas, padariau keletą nerdyčių kūrinių - Mario grybų, Triforce, Pokeball ir Kirby. Tiems, kurie naudojasi dinozaurų naršyklėmis, yra ekrano nuotrauka, kuri turėtų atrodyti.”
Nyan Cat
“Jame yra 81 DOM elementai, 688 eilutės gryno CSS ir viena „JavaScript“ funkcija, skirta garsui perduoti. Mano CSS nepavyksta CSSLint testo ir aš tai didžiuojuosi.”
Raštai
CSS3 yra toks didelis, kad jis taip pat gali būti naudojamas pagrindiniam interneto dizaino turtui, pvz., Šiems modeliams.
BonBon
„BonBon“ yra saldūs CSS3 mygtukai, sukurti atsižvelgiant į tikslą: seksualiai atrodantys, tikrai lankstūs mygtukai su kuo minimalistiniu žymėjimu.
„iOS“ piktogramos
Nuostabi? Taip. Šios piktogramos sukurtos apvalūs kampai, šešėliai, nuolydžiai, rgba, pseudo elementai, ir transformuoja, naudojant tam tikras priemones, pvz., „Westciv“ priemones ir „Border Radius“.
Socialinės žiniasklaidos piktogramos
Tai neįmanoma interneto kūrėjas negali kurti socialinės žiniasklaidos piktogramas, jei jie gali sukurti iPhone ir Doraemon su CSS3. Ir jie puikiai pastatė šias piktogramas.
Socialinės žiniasklaidos piktogramos
Kitas socialinės žiniasklaidos piktogramų rinkinys, rodantis CSS3 galimybes kurti tinkamas piktogramas.
Savitas
“Savotiškas yra nemokamas piktogramų paketas, sukurtas tik CSS. Jis buvo sukurtas svetainėms ir žiniatinklio programoms, kurios priklauso nuo mažiau HTTP užklausų, ar nereikia naudoti jokio vaizdo.”
GUI piktogramos
84 paprastos GUI piktogramos, naudojant tik CSS ir semantinį HTML. Tai vis dar laikoma “pasirengę ne gamybai” piktogramos, tačiau jos atrodo labai perspektyvios.
Styvas Džobsas
Steve Jobs yra ne tik skaitmeninio amžiaus piktograma, bet ir lyderis, kuris labai skatina HTML5.
„Twitter Fail Whale“
„Twitter“ nepavyksta nustebinti, išskyrus „Internet Explorer 8“ ar žemiau.
umbrUI
Vartotojo sąsajos elementai, kuriuos galima atlikti su CSS3, atrodo tikrai aptakus!
„Adobe Photoshop“ logotipas
„Photoshop“ duoklė nenaudojant „Photoshop“.
„Android“ logotipas
„Android“ yra pagamintas iš gana paprastų formų, tačiau paaiškinamas CSS3 privalumas: galite padaryti paprastus daiktus ir modifikuoti bet kokiu būdu, naudodami tik kodą, bet ne „Photoshop“.
„Apple“ logotipas
„Retro Apple“ logotipas, pristatytas naudojant CSS3, vis dar toks pat nuostabus, kaip ir jo sukūrimo laikas.
Atari logotipas
Prieš metus, kurie būtų manę, kad „Atari“ logotipas bus iš naujo sukurtas naudojant CSS3.
BP logotipas
Paprastą logotipą galima lengvai sujungti su CSS3. Geriausias dalykas, kai kai kurie iš čia pateiktų logotipų yra, yra kodas, kurį galite išbandyti!
Dribbble logotipas
Įžymios vartotojo valdomos vitrinos svetainės „Dribbble“ logotipas demonstruojamas naudojant CSS3.
Magento logotipas
„Magento“ logotipas nėra pernelyg sudėtingas, bet rezultatas atrodo profesionalus.
„McDonald“ logotipas
Aš myliu CSS3!
„Twitter“ paukštis
Puiki proporcija, kepurė galo kūrėjui.
„Windows“ logotipas
Windows logotipas! Atrodo tikrai nuostabus ir jį lengva sukurti!
„Internet Explorer“ logotipas
Tikrai puiki kūryba! Jis veikia pagrindinėse naršyklėse, išskyrus „Internet Explorer 8“ ar žemesnę.
„Google Chrome“ logotipas
Nesu tikras, kad jums patinka naujas „Google Chrome“ logotipas, tačiau šis „CSS3“ „Google Chrome“ logotipas atrodo nuostabus!
Operos logotipas
Dabar praktika jums: kokie yra skirtumai tarp šio CSS3 ir tikro sandorio?
HTML5 logotipas
HTML5 negali spindėti be CSS3!
Volkswagen logotipas
Išskyrus spalvų schemą, šis CSS3 klonas atrodo identiškas pradiniam.
Atspindys
Su gryno CSS3 logotipų ir grafikos bumu atėjo diskusijos, kurios labai diskutuoja apie CSS3 pagamintos grafikos panaudojimą realioje pasaulio gamybos aplinkoje.
Paprastai CSS3 grafika yra gerai, bet ji gali būti erzina, ypač kai reikia pakeisti dizainą arba tiesiog pakeisti grafikos dydį, taip pat didžiausias skausmas yra tai, kad kai kurios naršyklės, pvz., „Internet Explorer“, dar nėra visiškai palaikomos technologijos.
Ką tu manai? Ar naudosite grafiką, padarytą su CSS3 svetainėje? Ar turite kokių nors sprendimų dėl dabartinių trūkumų? Praneškite mums savo mintis ir pasidalykite su mumis, jei ką tik iškeptas CSS3 grafikas!
Daugiau
Norite iš tikrųjų kažką daryti su CSS3? Jūs atėjote į tinkamą vietą! Žemiau yra vadovėliai ir pamokos, parašytos padėti jums labai gerai pažinti CSS3.
- CSS3: sukurkite „Breadcrumb“ navigacijos meniu
- CSS3: sukurti RSS srauto logotipą
- CSS3: sukurkite paieškos laukelį
- CSS3: Pradedančiųjų vadovas
- CSS3 / HTML5: kurti tinklalapius
- CSS3 / HTML5: sukurkite AJAX pagrindu veikiančią kontaktinę formą
