Kodēšana Kung-fu 35 Grafika veidota tikai ar CSS3
Paskaties zemāk redzamajā grafikā, labi darbojas Photoshop? Nah, viņi ir radījuši CSS3. Jā, viņi pilnībā “zīmēts” CSS3! Kad mēs esam redzējuši pietiekami daudz CSS3 animācijas, mēs domājām, ka visas CSS3 var darīt kā potenciālu Flash slepkavu, bet mēs esam nepareizi. Izstrādātāji varbūt neapmierina animācijas jautrības, tāpēc viņi vēlreiz nospiež CSS3 robežas, lai apstrīdētu grafiskā redaktora sfēru.
Ar šo ziņu nāk 35 rūpīgi izstrādāts CSS3 grafikas, kas pat ietver kaut ko, ko jūs nesaistītu ar CSS3 Apple iPhone, multfilmas tēls Doraemon, un vairāk pārsteigumu! Heck, daži no tiem pat nāk ar detalizētu pamācību, kas māca jums, kā to sasniegt! Tātad, nepalaidiet garām lielisku iespēju iemācīties veidot grafiku, izmantojot CSS3 un mazliet HTML, nonākam nerātns ar CSS3!
Ir ļoti ieteicams apskatīt šos demonstrējumus, izmantojot jaunāko Safari vai izstrādātāja Google Chrome versiju. Lielākā daļa demo atbalsta jaunāko Firefox un Google Chrome versiju.
RSS plūsmas ikona
RSS plūsmas ikona, kas būvēta ar CSS3, tikai no Hongkiat! Kopā ar saiti nāk apmācība, ko jūs faktiski varat iemācīties “izdarīt” RSS plūsmas ikona, neizmantojot pat vienu attēlu. Izveidojiet CSS3 brīnumu ar savām rokām!
Apple iMac
Jā, manas acis arī nevar noticēt, bet tas ir iMac “samontēti” tikai ar CSS3.
Apple tastatūra
Tas ir Apple tastatūra, kas būvēta ar CSS3! Heck, tastatūras pogas var pat nospiest.
Apple iPhone
Ak, vēl viena lieta: iPhoneCSS3.
ķiršu ziedi
CSS3 patiesais awesomeness ir tas, ka to var izmantot, lai veidotu kaut ko, ieskaitot augus un dzīvniekus!
Kafijas krūzīte
Nopietna diena? Pieņemsim CSS3 kafiju, vislabāk pasniedzot ar Safari / Google Chrome.
Doraemon
Šis Doraemon ir slavens ar CSS3 saderības testēšanu. Izmēģiniet to Internet Explorer 8 vai zemāk un baudiet jauku dienu.
Meowww!
Tagad jūs meklējat kaķi, kas pilnībā būvēts ar kodu! Pārāk slikti CSS3 nevar radīt skaņas efektus, vismaz tagad.
Sēne, Triforce, Poké bumba, Kirby
“Būdams nerd, es esmu gatavojis dažus nerdy darbus - Mario sēņu, Triforce, Pokeball un Kirby. Tiem, kas izmanto dinozauru pārlūkprogrammas, ir redzams, kā tas izskatās.”
Nyan Cat
“Tajā ir 81 DOM elementi, 688 līnijas tīra CSS un viena JavaScript funkcija skaņas cilpošanai. Mans CSS neiztur CSSLint testu, un es esmu par to ļoti lepns.”
Raksti
CSS3 ir tik liels, ka to var izmantot arī, lai izveidotu web dizaina pamatlīdzekļus, piemēram, šos modeļus.
BonBon
BonBon ir saldas CSS3 pogas, kas izveidotas ar mērķi, proti, seksīgi meklējamas, ļoti elastīgas pogas ar iespējami minimālāko atzīmi.
iOS ikonas
Pārsteidzošs? Jā. Šīs ikonas ir veidojušas noapaļoti stūri, ēnas, slīpumi, rgba, pseidoelementi, un pārveido, izmantojot dažus instrumentus, piemēram, Westciv rīkus un Border Radius.
Sociālo mediju ikonas
Tas ir neiespējami, lai web izstrādātājs nevar veidot sociālo mediju ikonas, ja viņi var veidot iPhone un Doraemon ar CSS3. Un tās šīs ikonas ļoti labi uzcēla.
Sociālo mediju ikonas
Vēl viens sociālo mediju ikonas, kas parāda CSS3 iespējas izveidot izmantojamas ikonas.
Savdabīgs
“Savdabīgs ir bezmaksas ikonas pakete, kas tiek veikta tikai CSS. Tas tika izveidots vietnēm un tīmekļa lietojumprogrammām, kas ir atkarīgas no mazāk HTTP pieprasījumiem, kā arī nav nepieciešams izmantot kādu attēlu.”
GUI ikonas
84 vienkāršas GUI ikonas, izmantojot tikai CSS un semantisko HTML. To joprojām uzskata par “gatavs gatavs ražošanai” ikonas, bet tās izskatās ļoti daudzsološas.
Stīvs Džobss
Steve Jobs ir ne tikai digitālā laikmeta ikona, bet arī līderis, kurš ļoti sekmē HTML5.
Twitter Fail Whale
Čivināt neizdosies vaļu nebūs pārsteigt, izņemot Internet Explorer 8 vai zemāk.
umbrUI
Lietotāja interfeisa elementi, kas ir pieejami ar CSS3, un tas izskatās patiešām gluds!
Adobe Photoshop logotips
Ievietojums Photoshop, neizmantojot Photoshop.
Android logotips
Android ir veidota no diezgan vienkāršām formām, bet tā izskaidro CSS3 priekšrocības: jūs varat veikt vienkāršas lietas un mainīt to, kā vēlaties, izmantojot tikai kodu, bet ne Photoshop..
Apple logotips
Retro Apple logotips, kas prezentēts, izmantojot CSS3, joprojām ir tikpat awesome kā laiks, kad tas tika izveidots.
Atari logo
Pirms gadiem, kuri būtu domājuši, ka Atari logo tiks radīts, izmantojot CSS3.
BP logotips
Vienkāršu logotipu var viegli izveidot ar CSS3. Vislabāk ar dažiem šeit redzamajiem logotipiem ir kods, kas paredzēts, lai jūs varētu izmēģināt!
Dribbble logotips
Slavenais lietotāja darbināms vitrīna Dribbble logotips, kas demonstrēts, izmantojot CSS3.
Magento logotips
Magento logotips nav pārāk grūti izdarāms, bet rezultāts izskatās profesionāls.
McDonald Logo
Es esmu mīlestība CSS3!
Twitter putns
Ideāla proporcija, cepures gals radītājam.
Windows logotips
Windows logotips! Izskatās ļoti laba, un to ir viegli izveidot!
Internet Explorer logotips
Tiešām liels radījums! Tas darbojas lielākās pārlūkprogrammās, izņemot Internet Explorer 8 vai zemāku.
Google Chrome logotips
Es neesmu pārliecināts, ka jums patīk jaunais Google Chrome logotips, bet šis CSS3 Google Chrome logotips izskatās awesome!
Operas logotips
Tagad prakse jums: kādas ir atšķirības starp šo CSS3 gabalu un reālo darījumu?
HTML5 logotips
HTML5 nevar spīdēt bez CSS3!
Volkswagen logotips
Izņemot krāsu shēmu, šis CSS3 klons izskatās identisks sākotnējam.
Pārdomas
Ar tīru CSS3 izgatavoto logotipu un grafikas uzplaukumu nāk diskusijas, kas lielā mērā diskutē par CSS3 ražotās grafikas lietojamību reālajā pasaulē..
Parasti CSS3 grafiks ir labi, bet tas ir varētu būt kaitinošas, jo īpaši, ja jums ir nepieciešams mainīt dizainu vai vienkārši mainīt attēla izmērus, arī lielākās sāpes šeit ir tehnoloģijas, kuras vēl nav pilnībā atbalstījušas dažas pārlūkprogrammas, piemēram, Internet Explorer.
Ko tu domā? Vai jūs izmantojat grafiku, kas izveidots ar CSS3 jūsu vietnē? Vai jums ir kāds risinājums tās pašreizējiem trūkumiem? Ļaujiet mums uzzināt savu domu un dalīties ar mums, ja tikko cepat CSS3 grafiku!
Vairāk
Vēlaties patiešām kaut ko darīt ar CSS3? Jūs esat pienācis īstajā vietā! Zemāk ir norādījumi un konsultācijas, kas rakstīts, lai palīdzētu jums lielā mērā ceļā uz CSS3 apgūšanu.
- CSS3: Izveidojiet Breadcrumb navigācijas izvēlni
- CSS3: izveidot RSS plūsmas logotipu
- CSS3: Izveidojiet meklēšanas lodziņu
- CSS3: iesācēju ceļvedis
- CSS3 / HTML5: izveidojiet tīmekļa lapas
- CSS3 / HTML5: izveidojiet AJAX balstītu kontaktformu
