Kodning Kung-fu 35 Grafik byggd rent med CSS3

Titta på grafiken nedan fungerar awesome Photoshop rätt? Nah, de är skapade av CSS3. Ja, det är de fullständigt “dragen” av CSS3! När vi har sett tillräckligt CSS3-animationer trodde vi att alla CSS3 kan göra som en potentiell Flash-mördare, men vi har fel. Utvecklare uppfyller kanske inte med animeringens kul, så igen, de trycker gränserna för CSS3 för att utmana grafikredaktörens rike.

Med detta inlägg kommer 35 noggrant utformad CSS3-grafik som även innehåller något du inte skulle relatera till CSS3 som Apple iPhone, seriefigur Doraemon, och mer överraskningar! Heck, några av dem kommer även med detaljerad handledning som lär dig hur du uppnår det! Så missa inte den stora chansen att lära sig att skapa grafik med hjälp av CSS3 och lite HTML, låt oss bli otrevlig med CSS3!

Du rekommenderas starkt att visa dessa demos med den senaste versionen av Safari eller utvecklarversionen av Google Chrome. De flesta demos stöder dock den senaste versionen av Firefox och Google Chrome.

RSS Feed Icon

RSS-flöde Ikon byggd med CSS3, uteslutande från Hongkiat! Tillsammans med länken kommer en handledning som du faktiskt kan lära dig “dra” RSS-ikonen utan att använda en enda bild. Skapa CSS3-miraklet med egna händer!

Apple iMac

Ja, mina ögon kan inte tro det, men det är iMac “sammansatta” rent med CSS3.

Apple Keyboard

Det är Apple Keyboard byggt med CSS3! Heck, tangentbordsknapparna kan till och med pressas.

Apple iPhone

Åh, en sak: iPhoneCSS3.

körsbärsblom

Den verkliga awesomeness CSS3 är att den kan användas för att bygga allt inklusive växter och djur!

Kaffekopp

En tröttsam dag? Låt oss få ett CSS3-kaffe, bäst serverat med Safari / Google Chrome.

Doraemon

Denna Doraemon är känd för CSS3 kompatibilitetstestning. Prova det i Internet Explorer 8 eller senare och ha en bra dag.

Meowww!

Nu tittar du på en katt som är helt byggd med kod! Okej kan CSS3 inte generera ljudeffekter, åtminstone för nu.

Svamp, Triforce, Pokéboll, Kirby

“Jag är en nörd, jag har gjort några nördiga skapelser - en Mario-svamp, Triforce, en Pokéball och Kirby. För dem som använder dinosaurfönstrar finns det en skärmdump av vad den ska se ut.”

Nyan katt

“Den innehåller 81 DOM-element, 688 linjer ren CSS och en JavaScript-funktion för looping ljud. Min CSS misslyckas CSSLint-testet och jag är verkligen stolt över det här.”

Mönster

CSS3 är så stor att den också kan användas för att bygga grundläggande tillgång till webbdesign, som dessa mönster.

BonBon

BonBon är söta CSS3-knappar skapade med ett mål i åtanke: Sexiga utseende, riktigt flexibla knappar med den mest minimalistiska markeringen som möjligt.

IOS-ikoner

Fantastiskt? Ja. Dessa ikoner är byggda av rundade hörn, skuggor, gradienter, RGBA, pseudo-element, och transformer, med hjälp av vissa verktyg som Westcivs verktyg och Border Radius.

Sociala medier ikoner

Det är omöjligt för webbutvecklare att inte bygga sociala medierikoner om de kan bygga iPhone och Doraemon med CSS3. Och de byggde dessa ikoner riktigt bra.

Sociala medier ikoner

En annan uppsättning sociala medierikoner som visar CSS3: s möjligheter att skapa användbara ikoner.

Egendomlig

“Särskilt är ett gratis ikonpaket som endast tillverkas i CSS. Det skapades för webbplatser och webbapplikationer som beror på färre HTTP-förfrågningar som möjligt eller behöver inte använda någon bild alls.”

GUI-ikoner

84 enkla GUI-ikoner med bara CSS och semantisk HTML. Detta betraktas fortfarande som “icke-produktionsklar” ikoner, men de ser väldigt lovande ut.

Steve Jobs

Steve Jobs är inte bara ikonen för den digitala tiden, utan också ledaren som främjar HTML5.

Twitter misslyckas med val

Twitter-falkvalen kommer inte att överraska dig, förutom i Internet Explorer 8 eller senare.

umbrUI

Användargränssnitt som möjliggjorts med CSS3, och det ser väldigt snygg ut!

Adobe Photoshop Logo

En hyllning till Photoshop utan att använda Photoshop.

Android-logotypen

Android är tillverkad av ganska enkla former, men det förklarar fördelen med CSS3: du kan göra enkla saker och ändra det på något sätt du vill ha med bara kod men inte Photoshop.

Apple Logo

Retro Apple-logotypen presenteras med CSS3, fortfarande lika fantastisk som den tid den skapades.

Atari-logotypen

Åren innan, vem skulle ha trott att Atari-logotypen kommer att skapas igen med hjälp av CSS3.

BP-logotypen

Enkel logotyp kan enkelt göras med CSS3. Det bästa med några av dessa logotyper som visas här är att det finns kod som du kan prova!

Dribbble Logo

Berömd användardriven utställningsplats Dribbble logotyp utställd med CSS3.

Magento Logo

Magento logotyp är inte svårt att rita men resultatet ser professionellt ut.

McDonald Logo

Jag är lovin 'CSS3!

Twitter Bird

Perfekt proportion, hatt tips till skaparen.

Windows-logotyp

Windows-logotypen! Ser verkligen fantastisk ut, och det är lätt att skapa!

Internet Explorer Logo

Riktigt bra skapande! Den fungerar i större webbläsare utom Internet Explorer 8 eller senare.

Google Chrome-logotypen

Jag är inte säker på att du älskar den nya logotypen till Google Chrome eller inte, men den här CSS3 Google Chrome-logotypen är fantastisk!

Opera Logo

Nu en övning för dig: Vad är skillnaderna mellan detta CSS3-stycke och den verkliga affären?

HTML5-logotyp

HTML5 kan inte lysa utan CSS3!

Volkswagen Logo

Förutom färgschemat ser den här CSS3-klonen ut som den ursprungliga.

Reflexion

Med logotypen och grafiken som gjorts av ren CSS3 kommer diskussionerna som väsentligt debatterar om användbarheten hos CSS3-producerad grafik i den verkliga världens produktionsmiljö.

Generellt är CSS3-grafiken bra, men det kan bli irriterande, särskilt när du behöver ändra designen eller helt enkelt ändra storlek på grafiken, även den största smärtan här är tekniken ännu inte helt stöds av vissa webbläsare som Internet Explorer.

Vad tror du? Kommer du använda grafiken som gjorts med CSS3 på din webbplats? Har du någon lösning för dess nuvarande nackdelar? Låt oss veta din tanke och dela med oss ​​om du bara bakat en CSS3-grafik!

Mer

Vill du verkligen göra något med CSS3? Du har kommit till rätt ställe! Nedan följer guider och handledning som hjälper dig mycket på din väg att behärska CSS3.

• CSS3: Skapa en Breadcrumb Navigationsmeny
• CSS3: Skapa en RSS Feed Logo
• CSS3: Skapa en sökruta
• CSS3: Nybörjarhandbok
• CSS3 / HTML5: Skapa webbsidor
• CSS3 / HTML5: Skapa en AJAX-baserad kontaktformulär