Kodning Kung-fu 35 Grafik bygget rent med CSS3

Se på grafikken nedenfor, virker awesome Photoshop rigtigt? Nah, de er skabt af CSS3. Ja, det er de fuldstændig “trukket” af CSS3! Når vi har set nok CSS3 animationer, troede vi, at alle CSS3 kan gøre som en potentiel Flash-morder, men vi tager fejl. Udviklere opfylder måske ikke med sjov animation, så igen skubber de grænserne for CSS3 for at udfordre grafikredaktørens rige.

Med dette indlæg kommer 35 omhyggeligt udformet CSS3 grafik, som endda indeholder noget, du ikke ville relatere til med CSS3 Apple iPhone, tegneseriefigur Doraemon, og flere overraskelser! Heck, nogle af dem kommer endda med detaljeret vejledning, der lærer dig, hvordan man opnår det! Så gå ikke glip af den store chance for at lære at lave grafik ved hjælp af CSS3 og lidt HTML, lad os blive frække med CSS3!

Du anbefales kraftigt at se disse demoer ved hjælp af den nyeste version af Safari eller Developer-versionen af ​​Google Chrome. De fleste demoer understøtter dog den nyeste version af Firefox og Google Chrome.

RSS Feed Icon

RSS Feed Ikon bygget med CSS3, udelukkende fra Hongkiat! Sammen med linket kommer en selvstudium, som du rent faktisk kan lære at “tegne” RSS Feed-ikonet uden at bruge et enkelt billede. Opret CSS3 miraklet med dine egne hænder!

Apple iMac

Ja mine øjne kan heller ikke tro det, men det er iMac “samles” udelukkende med CSS3.

Apple tastatur

Det er Apple Keyboard bygget med CSS3! Heck, tastatur knapperne kan endda blive presset.

Apple iPhone

Åh, en ting mere: iPhoneCSS3.

Cherry Blossom

Den reelle awesomeness af CSS3 er, at den kan bruges til at bygge alt inklusive planter og dyr!

Kaffekop

En trættende dag? Lad os få en CSS3-kaffe, bedst serveret med Safari / Google Chrome.

Doraemon

Denne Doraemon er berømt for CSS3 kompatibilitetstestning. Prøv det i Internet Explorer 8 eller under og få en god dag.

Meowww!

Nu kigger du på en kat bygget helt med kode! Svært, CSS3 kan ikke generere lydeffekter, i det mindste for nu.

Svampe, Triforce, Pokébold, Kirby

“Jeg er en nerd, jeg har lavet nogle nerdy kreationer - en maribos champignon, Triforce, en Pokéball og Kirby. For dem, der bruger dinosaur browsere, er der et skærmbillede af, hvad det skal se ud.”

Nyan kat

“Den indeholder 81 DOM elementer, 688 linjer ren CSS og en JavaScript-funktion til looping lyd. Min CSS fejler CSSLint-testen, og jeg er virkelig stolt af det her.”

Mønstre

CSS3 er så stor, at den også kan bruges til at opbygge fundamentalt aktiv til webdesign, såsom disse mønstre.

BonBon

BonBon er søde CSS3 knapper skabt med et mål i tankerne: Sexet udseende, rigtig fleksible knapper med den mest minimalistiske markering som muligt.

iOS ikoner

Fantastiske? Ja. Disse ikoner er bygget af afrundede hjørner, skygger, gradienter, RGBA, pseudo-elementer, og transformationer, ved hjælp af visse værktøjer som Westcivs værktøjer og Border Radius.

Social Media Ikoner

Det er umuligt for webudvikleren at ikke opbygge sociale medierikoner, hvis de kan opbygge iPhone og Doraemon med CSS3. Og de bygget disse ikoner rigtig godt.

Social Media Ikoner

Et andet sæt af sociale medier ikoner, der viser mulighederne for CSS3 i at skabe brugbare ikoner.

Ejendommelige

“Særlig er en gratis ikonpakke, der kun er lavet i CSS. Det blev oprettet til websteder og webapplikationer, som er afhængige af færre HTTP-anmodninger som muligt, eller det er ikke nødvendigt at bruge et billede overhovedet.”

GUI-ikoner

84 simple GUI ikoner bruger kun CSS og semantisk HTML. Dette betragtes stadig som “Ikke-produktion klar” ikoner, men de ser meget lovende ud.

Steve Jobs

Steve Jobs er ikke kun ikonet for den digitale tidsalder, men også lederen, som i høj grad fremmer HTML5.

Twitter mislykkes hval

The Twitter fail whale vil ikke undlade at overraske dig, undtagen i Internet Explorer 8 eller derunder.

umbrUI

Brugergrænsefladeelementer muliggjort med CSS3, og det ser rigtig flot ud!

Adobe Photoshop Logo

En hyldest til Photoshop uden at bruge Photoshop.

Android Logo

Android er lavet af temmelig enkle former, men det forklarer fordelen ved CSS3: Du kan lave enkle ting og ændre det som du vil ved hjælp af bare kode, men ikke Photoshop.

Apple Logo

Retro Apple logo præsenteret ved hjælp af CSS3, stadig så fantastisk som den tid det blev oprettet.

Atari Logo

År tidligere, hvem ville have troet Atari-logoet vil blive genskabt ved hjælp af CSS3.

BP Logo

Enkelt logo kan nemt laves med CSS3. Det bedste med nogle af disse logoer fremvist her er, at der findes kode, som du kan prøve!

Dribbble Logo

Berømt brugerdrevet udstillingssted Dribbles logo fremvist ved hjælp af CSS3.

Magento Logo

Magento's logo er ikke for svært at tegne, men resultatet ser professionelt ud.

McDonald Logo

Jeg er lovin 'CSS3!

Twitter Bird

Perfekt proportionalitet, hat tip til skaberen.

Windows Logo

Windows logo! Ser virkelig fantastisk ud, og det er let at lave!

Internet Explorer Logo

Virkelig fantastisk skabelse! Det virker i større browsere undtagen Internet Explorer 8 eller derunder.

Google Chrome Logo

Jeg er ikke sikker på, at du elsker det nye logo på Google Chrome eller ej, men dette CSS3 Google Chrome-logo ser fantastisk ut!

Opera Logo

Nu en øvelse for dig: Hvad er forskellene mellem dette CSS3-stykke og den virkelige aftale?

HTML5 Logo

HTML5 kan ikke skinne uden CSS3!

Volkswagen Logo

Bortset fra farveskemaet ser denne CSS3 klon identisk ud med den oprindelige.

Afspejling

Med bommen af ​​logoer og grafik lavet af ren CSS3 kommer diskussionerne, der i høj grad debatterer om brugervenligheden af ​​CSS3-produceret grafik i den virkelige verdens produktionsmiljø.

Generelt er CSS3-grafikken fint, men det kan blive irriterende, især når du skal ændre designet eller blot ændre størrelsen på grafikken, også den største smerte her er teknologien endnu ikke fuldt understøttet af visse browsere som Internet Explorer.

Hvad synes du? Vil du bruge grafikken lavet med CSS3 på dit websted? Har du nogen løsning på dens nuværende ulemper? Lad os kende din tanke og dele med os, hvis du bare bages en CSS3-grafik!

Mere

Villig til faktisk at gøre noget med CSS3? Du er kommet til det rette sted! Nedenfor er vejledninger og vejledninger skrevet for at hjælpe dig meget på din vej til at mestre CSS3.

• CSS3: Opret en Breadcrumb Navigation Menu
• CSS3: Opret et RSS Feed Logo
• CSS3: Opret en søgeboks
• CSS3: Begyndervejledning
• CSS3 / HTML5: Opret websider
• CSS3 / HTML5: Opret en AJAX-baseret kontaktformular