Koding Kung-fu 35 Grafikk bygget rent med CSS3

Se på grafikken nedenfor, fungerer awesome Photoshop riktig? Nah, de er laget av CSS3. Ja, det er de helt “trukket” av CSS3! Når vi har sett nok CSS3 animasjoner, trodde vi at alle CSS3 kan gjøre som en potensiell Flash-morder, men vi har feil. Utviklere tilfredsstiller kanskje ikke med det morsomme av animasjon, så igjen presser de grensene til CSS3 for å utfordre grafikkredaktørens rike.

Med dette innlegget kommer 35 nøye utformet CSS3-grafikk, som til og med inneholder noe du ikke vil forholde deg til med CSS3 som Apple iPhone, tegneserie karakter Doraemon, og flere overraskelser! Heck, noen av dem kommer til og med med detaljert opplæring som lærer deg hvordan du oppnår det! Så ikke gå glipp av den store sjansen til å lære å lage grafikk ved hjelp av CSS3 og litt HTML, la oss bli frie med CSS3!

Du anbefales på det sterkeste å se disse demoene ved hjelp av den nyeste versjonen av Safari eller utviklerversjonen av Google Chrome. De fleste demoer støtter den nyeste versjonen av Firefox og Google Chrome.

RSS Feed Icon

RSS Feed Ikon bygget med CSS3, eksklusivt fra Hongkiat! Sammen med lenken kommer en opplæring som du faktisk kan lære å “tegne” RSS Feed-ikonet uten å bruke enda et enkelt bilde. Lag CSS3 mirakelet med egne hender!

Apple iMac

Ja mine øyne kan også ikke tro det, men det er iMac “montert” rent med CSS3.

Apple tastatur

Det er Apple Keyboard bygget med CSS3! Heck, tastatur knappene kan til og med trykkes.

Apple iPhone

Oh, en ting til: iPhoneCSS3.

Kirsebærblomst

Den virkelige awesomeness CSS3 er at den kan brukes til å bygge alt, inkludert planter og dyr!

Kaffe kopp

En anstrengende dag? La oss få en CSS3-kaffe, best servert med Safari / Google Chrome.

Doraemon

Denne Doraemon er kjent for CSS3 kompatibilitetstesting. Prøv det i Internet Explorer 8 eller under og ha en fin dag.

Meowww!

Nå ser du på en katt som er bygget helt med kode! Synd CSS3 kan ikke generere lydeffekter, i hvert fall for nå.

Sopp, Triforce, Poké ball, Kirby

“Å være en nerd, jeg har laget noen nerdy kreasjoner - en Mario sopp, Triforce, en Pokéball og Kirby. For de som bruker dinosaurbrowsere, er det et skjermbilde av hva det skal se ut.”

Nyan katt

“Den inneholder 81 DOM-elementer, 688 linjer med ren CSS og en JavaScript-funksjon for looping-lyd. Mitt CSS mislykkes CSSLint-testen, og jeg er veldig stolt av dette.”

Patterns

CSS3 er så flott at den også kan brukes til å bygge grunnleggende ressurs for webdesign, slik som disse mønstrene.

BonBon

BonBon er søte CSS3 knapper opprettet med et mål i tankene: sexy utseende, veldig fleksible knapper med den mest minimalistiske markeringen som mulig.

IOS ikoner

Fantastisk? Ja. Disse ikonene er bygd av avrundede hjørner, skygger, gradienter, RGBA, pseudo-elementer, og forvandler, ved hjelp av visse verktøy som Westcivs verktøy og Border Radius.

Sosiale medier Ikoner

Det er umulig for webutvikleren å ikke bygge sosiale medier-ikoner hvis de kan bygge iPhone og Doraemon med CSS3. Og de bygget disse ikonene veldig bra.

Sosiale medier Ikoner

Et annet sett med sosiale medier ikoner som viser mulighetene til CSS3 i å lage brukbare ikoner.

Merkelig

“Spesielt er et gratis ikonpakke gjort kun i CSS. Den ble opprettet for nettsteder og webapplikasjoner som er avhengige av færre HTTP-forespørsler som mulig, eller trenger ikke å bruke noe bilde i det hele tatt.”

GUI-ikoner

84 enkle GUI-ikoner bruker bare CSS og semantisk HTML. Dette anses fortsatt som “Ikke-produksjonsklar” ikoner, men de ser veldig lovende ut.

Steve Jobs

Steve Jobs er ikke bare ikonet for den digitale tidsalderen, men også lederen som fremmer HTML5.

Twitter Feil hval

Twitter fail whale vil ikke unnlate å overraske deg, unntatt i Internet Explorer 8 eller under.

umbrUI

Brukergrensesnittelementer muliggjort med CSS3, og det ser veldig slank ut!

Adobe Photoshop Logo

En hyllest til Photoshop uten å bruke Photoshop.

Android Logo

Android er laget av ganske enkle former, men det forklarer fordelen med CSS3: du kan lage enkle ting og endre det på en måte du vil bruke ved hjelp av bare kode, men ikke Photoshop.

Apple Logo

Retro Apple logo presentert ved hjelp av CSS3, fortsatt like fantastisk som den ble laget.

Atari Logo

År tidligere, hvem ville ha trodd Atari-logoet vil bli re-created using CSS3.

BP Logo

Enkel logo kan enkelt gjøres med CSS3. Det beste med noen av disse logoer som vises her er at det finnes kode som er tilgjengelig for deg å prøve ut!

Dribbble Logo

Berømt brukerdrevet utstillingssted Dribbles logo fremvist med CSS3.

Magento Logo

Magento logo er ikke så vanskelig å tegne, men utfallet ser profesjonelt ut.

McDonald Logo

Jeg er lovin 'CSS3!

Twitter Bird

Perfekt proporsjon, hat tips til skaperen.

Windows Logo

Windows logo! Ser virkelig fantastisk ut, og det er lett å lage!

Internet Explorer Logo

Virkelig flott skapelse! Den fungerer i store nettlesere bortsett fra Internet Explorer 8 eller under.

Google Chrome-logoen

Jeg er ikke sikker på at du elsker den nye logoen til Google Chrome eller ikke, men denne CSS3 Google Chrome-logoen ser fantastisk ut!

Opera Logo

Nå en øvelse for deg: Hva er forskjellene mellom dette CSS3-stykket og den virkelige avtalen?

HTML5 Logo

HTML5 kan ikke skinne uten CSS3!

Volkswagen Logo

Bortsett fra fargevalg, ser denne CSS3 klonen ut som den opprinnelige.

refleksjon

Med bommen av logoer og grafikk laget av ren CSS3 kommer diskusjonene som i stor grad diskuterer bruken av CSS3-produsert grafikk i den virkelige verdens produksjonsmiljø.

Generelt er CSS3-grafikken bra, men det kan bli irriterende spesielt når du må endre designet eller bare endre størrelse på grafikken, Også den største smerten her er teknologien er ikke fullt støttet av visse nettlesere som Internet Explorer.

Hva tror du? Vil du bruke grafikken laget med CSS3 på nettstedet ditt? Har du noen løsning for de nåværende ulempene? Gi oss beskjed om tanken din, og del med oss ​​hvis du bare bakte en CSS3-grafikk!

Mer

Villig til å faktisk gjøre noe med CSS3? Du har kommet til rett sted! Nedenfor er guider og opplæringsskrifter skrevet for å hjelpe deg sterkt på veien til å mestre CSS3.

• CSS3: Opprett en Breadcrumb Navigasjonsmeny
• CSS3: Lag en RSS Feed Logo
• CSS3: Opprett en søkeboks
• CSS3: Begynnerveiledning
• CSS3 / HTML5: Opprett nettsider
• CSS3 / HTML5: Lag et AJAX-basert kontaktskjema