Kódovanie Kung-fu 35 Grafika postavená čisto s CSS3
Pozrite sa na grafiku nižšie, úžasné Photoshop funguje správne? Nah, sú vytvorené pomocou CSS3. Áno, sú úplne “ťahané” CSS3! Keď sme videli dostatok animácií CSS3, mysleli sme si, že to všetko môže CSS3 urobiť ako potenciálny bleskový zabijak, ale mýlim sa. Vývojári snáď nemusia uspokojiť zábavu animácie, takže znova tlačia hranice CSS3 na výzvu oblasti grafického editora.
S týmto príspevkom prichádza 35 starostlivo vytvorených grafov CSS3, ktoré obsahujú aj niečo, čo by ste nemali súvisieť s CSS3 Apple iPhone, Kreslená postavička Doraemon, a viac prekvapení! Sakra, niektorí dokonca prichádzajú s podrobným tutoriálom, ktorý vás naučí, ako to dosiahnuť! Takže nenechajte si ujsť veľkú šancu naučiť sa vytvárať grafiku pomocou CSS3 a trochu HTML, poďme sa zlobit s CSS3!
Dôrazne odporúčame zobraziť tieto ukážky pomocou najnovšej verzie prehliadača Google Chrome pre program Safari alebo pre vývojárov. Väčšina ukážok podporuje najnovšiu verziu prehliadača Firefox a prehliadača Google Chrome.
Ikona RSS Feed
RSS Feed Ikona postavená s CSS3, výlučne z Hongkiat! Spolu s odkazom prichádza tutoriál, ktorý sa naozaj môžete naučiť “kresliť” ikonu RSS kanálu bez použitia ani jedného obrázka. Vytvorte zázrak CSS3 vlastnými rukami!
Apple iMac
Áno moje oči tiež nemôžu tomu veriť, ale je to iMac “zmontovaný” čisto s CSS3.
Klávesnica Apple
Je to klávesnica Apple postavená s CSS3! Heck, tlačidlá na klávesnici môžu byť stlačené.
Apple iPhone
Ešte jedna vec: iPhoneCSS3.
Čerešňový kvet
Skutočnou úžasnosťou CSS3 je to, že sa dá použiť na stavbu čokoľvek vrátane rastlín a zvierat!
Šálka kávy
Unavený deň? Nechajme si kávu CSS3, najlepšie s programom Safari / Google Chrome.
Doraemon
Tento Doraemon je známy pre testovanie kompatibility CSS3. Vyskúšajte to v programe Internet Explorer 8 alebo nižšej a máte pekný deň.
Meowww!
Teraz sa pozeráte na mačku postavenú úplne s kódom! Škoda, že CSS3 nemôže generovať zvukové efekty, aspoň zatiaľ.
Húb, Triforce, Poké loptu, Kirby
“Ako robot, robím nejaké hlúpe výtvory - hubu Mario, Triforce, Pokéball a Kirby. Pre tých, ktorí používajú prehliadače dinosaura, je tu snímka obrazovky o tom, ako to má vyzerať.”
Nyan Cat
“Obsahuje 81 prvkov DOM, 688 riadkov čistého CSS a jednu funkciu JavaScript pre slučkové audio. Môj CSS zlyhá test CSSLint a som na to naozaj hrdý.”
vzory
CSS3 je taký skvelý, že môže byť tiež použitý na vytvorenie základného prínosu pre web dizajn, ako sú tieto vzory.
BonBon
BonBon sú sladké tlačidlá CSS3 vytvorené s ohľadom na cieľ: sexy vyzerajúce, naozaj flexibilné tlačidlá s čo najviac minimalistickým označením.
iOS ikony
Úžasný? Áno. Tieto ikony sú postavené zaoblené rohy, tiene, prechody, RGBA, pseudo-elementy, a transformácia, pomocou niektorých nástrojov, ako sú nástroje Westciv a hraničný polomer.
Ikony sociálnych médií
To je nemožné pre webový vývojár, aby nevytvorili ikony sociálnych médií, ak môžu stavať iPhone a Doraemon s CSS3. A tieto ikony postavili naozaj dobre.
Ikony sociálnych médií
Ďalšia sada ikon sociálnych médií, ktoré zobrazujú možnosti CSS3 pri vytváraní použiteľných ikon.
zvláštny
“Osobitosť je bezplatný balík ikon vytvorený iba v CSS. Bola vytvorená pre webové stránky a webové aplikácie, ktoré sú závislé od menšieho počtu požiadaviek HTTP, alebo nemusia používať akýkoľvek obrázok vôbec.”
GUI ikony
84 jednoduchých grafických ikon pomocou iba CSS a sémantického HTML. Toto sa stále považuje za “nevýrobné hotové” ikony, ale vyzerajú veľmi sľubne.
Steve Jobs
Steve Jobs nie je len ikonou digitálneho veku, ale aj vodcom, ktorý veľmi propaguje HTML5.
Twitter Fail Whale
Twitter nebude úspešný veľryba vás prekvapí, s výnimkou aplikácie Internet Explorer 8 alebo nižšej.
umbrUI
Prvky používateľského rozhrania umožnené pomocou CSS3 a vyzerajú veľmi elegantne!
Logo Adobe Photoshop
Obdiv k Photoshopu bez použitia programu Photoshop.
Logo Android
Android je vyrobený z pomerne jednoduchých tvarov, ale vysvetľuje výhodu CSS3: môžete robiť jednoduché veci a upravovať ho ľubovoľným spôsobom pomocou kódu, ale nie Photoshopu.
Apple Logo
Retro Apple logo prezentované pomocou CSS3, stále rovnako úžasné ako čas, kedy bol vytvorený.
Logo Atari
Roky skôr, kto by si myslel, že logo Atari bude znovu vytvorené pomocou CSS3.
Logo spoločnosti BP
Jednoduché logo možno jednoducho vytvoriť pomocou CSS3. Najlepšia vec, v ktorej sú niektoré z týchto logov zobrazené tu, sú tu kódy, ktoré môžete vyskúšať!
Dribbble Logo
Slávne webové stránky prezentácie Dribbble, ktoré sú prezentované používateľmi a ktoré sa zobrazujú pomocou CSS3.
Logo Magento
Logo Magento nie je príliš ťažké kresliť, ale výsledok vyzerá profesionálne.
McDonald Logo
Milujem CSS3!
Twitter Bird
Perfektný pomer, klobúk na tvorcovi.
Logo Windows
Logo systému Windows! Vyzerá to naozaj úžasné a je ľahké ho vytvoriť!
Logo Internet Explorer
Skutočne skvelá tvorba! Funguje v hlavných prehľadávačoch okrem programu Internet Explorer 8 alebo nižšie.
Logo Google Chrome
Nie som si istý, že milujete nové logo prehliadača Google Chrome alebo nie, ale toto logo Google Chrome pre CSS3 vyzerá úžasne!
Logo opery
Teraz je pre vás prax: aké sú rozdiely medzi týmto kusom CSS3 a skutočnou dohodou?
Logo HTML5
HTML5 nemôže svietiť bez CSS3!
Volkswagen Logo
Okrem farebnej schémy tento klon CSS3 vyzerá rovnako ako pôvodný.
odraz
S rozmachom log a grafiky z čistého CSS3 prichádzajú diskusie, ktoré veľmi diskutujú o použiteľnosti grafiky produkovanej CSS3 v reálnom svetovom produkčnom prostredí.
Všeobecne platí, že grafika CSS3 je v poriadku, ale to je môže byť obťažujúce najmä vtedy, keď potrebujete meniť dizajn alebo jednoducho zmeniť veľkosť grafiky, aj tou najväčšou bolesťou je, že technológia ešte nie je plne podporovaná niektorými prehliadačmi, ako je Internet Explorer.
Co si myslis? Použijete na svojich stránkach grafiku vytvorenú pomocou CSS3? Máte nejaké riešenie pre svoje súčasné nevýhody? Dajte nám vedieť svoju myšlienku a podeľte sa s nami, ak ste práve zapečali grafiku CSS3!
viac
Ochotný vlastne niečo urobiť s CSS3? Prišiel si na správne miesto! Nižšie sú napísané sprievodcovia a návody, ktoré vám veľmi pomôžu na ceste k zvládnutiu CSS3.
- CSS3: Vytvorte navigačnú ponuku Breadcrumb
- CSS3: Vytvoriť RSS Feed Logo
- CSS3: Vytvorenie vyhľadávacieho poľa
- CSS3: Príručka pre začiatočníkov
- CSS3 / HTML5: Vytvorenie webových stránok
- CSS3 / HTML5: Vytvorte kontaktný formulár založený na AJAX
