Codarea Kung-fu 35 Grafică construită pur cu CSS3
Uită-te la grafica de mai jos, Photoshop minunat funcționează dreapta? Nu, sunt create de CSS3. Da sunt complet “desenat” de către CSS3! Când am văzut destule animații CSS3 am crezut că toate acestea sunt toate pe care CSS3 le poate face ca un potențial criminal Flash, dar greșim. Dezvoltatorii probabil că nu se mulțumesc cu distracția de animație, așa că, din nou, ei împing granițele CSS3 pentru a contesta domeniul editorului grafic.
Cu acest post vine 35 CSS3 grafice artizanale atent, care includ chiar ceva ce nu ar fi raportat cu CSS3 cum ar fi Apple iPhone, personaj de desene animate Doraemon, și mai multe surprize! Heck, unii dintre ei chiar vin cu un tutorial detaliat care te învață cum să o atingi! Deci, nu pierdeți șansa mare de a învăța să creați grafic folosind CSS3 și puțină HTML, să devenim obraznici cu CSS3!
Vă recomandăm cu tărie să vizualizați aceste demo-uri folosind cea mai recentă versiune a versiunii Safari sau a dezvoltatorului Google Chrome. Majoritatea demo-urilor suportă cea mai recentă versiune de Firefox și Google Chrome.
RSS Feed Icon
RSS Feed Icon construit cu CSS3, exclusiv din Hongkiat! Împreună cu link-ul vine un tutorial de care puteți învăța de fapt “a desena” pictograma RSS Feed fără a utiliza nici măcar o singură imagine. Creați miracolul CSS3 cu propriile dvs. mâini!
Apple iMac
Da, și ochii mei nu pot să cred asta, dar e iMac “asamblate” doar cu CSS3.
Tastatura Apple
Este tastatura Apple construită cu CSS3! Heck, butoanele de tastatură pot fi chiar apăsate.
Apple iPhone
Oh, încă un lucru: iPhoneCSS3.
floare de cires
Adevărata minunată a CSS3 este că poate fi folosită pentru a construi orice, inclusiv plante și animale!
Cană de cafea
O zi obositoare? Hai să avem o cafea CSS3, cea mai bine servită cu Safari / Google Chrome.
Doraemon
Acest Doraemon este renumit pentru testele de compatibilitate CSS3. Încercați-l în Internet Explorer 8 sau mai jos și aveți o zi plăcută.
Meowww!
Acum te uiți la o pisică construită complet cu cod! Păcat că CSS3 nu poate genera efecte sonore, cel puțin pentru moment.
Ciupercă, Triforce, minge Poké, Kirby
“Fiind un tocilar, am facut cateva creatii neroditoare - o ciuperca Mario, Triforce, o Pokéball si Kirby. Pentru cei care folosesc browserele dinozaurilor, există o captură de ecran a ceea ce ar trebui să arate.”
Nyan Cat
“Acesta conține 81 de elemente DOM, 688 linii de CSS pur și o funcție JavaScript pentru looping audio. CSS meu nu reușește testul CSSLint și sunt foarte mândru de acest lucru.”
Modele de
CSS3 este atât de mare încât poate fi folosit și pentru a construi un bun fundamental pentru designul web, cum ar fi aceste modele.
BonBon
BonBon sunt butoane drăguțe CSS3 create cu un scop în minte: butoane cu aspect sexy, foarte flexibile, cu cel mai minimalism posibil.
iOS pictograme
Uimitor? Da. Aceste icoane sunt construite de colturi rotunjite, umbre, gradienți, RGBA, pseudo-elementele, și transformatele, cu ajutorul unor instrumente cum ar fi uneltele lui Westciv și raza de graniță.
Social Media Icons
Este imposibil ca dezvoltatorul web să nu construiască icoane sociale dacă pot construi iPhone și Doraemon cu CSS3. Și au construit cu adevărat aceste icoane.
Social Media Icons
Un alt set de pictograme de social media care arată posibilitățile CSS3 de a crea icoane utilizabile.
ciudat
“Peculiar este un pachet gratuit pentru pictograme realizat numai în CSS. A fost creat pentru site-uri și aplicații web care depind de cât mai puține cereri HTTP sau nu au nevoie să utilizeze deloc nicio imagine.”
GUI Icoane
84 simboluri simple GUI folosind doar CSS și HTML semantic. Aceasta este încă considerată ca fiind “non-producție gata” icoane, dar arată foarte promițătoare.
Steve Jobs
Steve Jobs nu este doar icoana erei digitale, ci și liderul care promovează foarte mult HTML5.
Twitter Fail Whale
Baletul Twitter nu reușește să vă surprindă, cu excepția Internet Explorer 8 sau mai jos.
umbrUI
Elementele de interfață ale utilizatorilor au devenit posibile cu CSS3 și arată foarte elegant!
Logo-ul Adobe Photoshop
Un tribut adus lui Photoshop fără a folosi Photoshop.
Logo-ul Android
Androidul este format din forme destul de simple, dar explică avantajul CSS3: puteți face lucruri simple și să le modificați în orice fel doriți, folosind doar codul, dar nu și Photoshop.
Apple Logo
Retro logo-ul Apple prezentat folosind CSS3, încă la fel de minunat ca timpul în care a fost creat.
Atari Logo
Cu ani in urma, cine ar fi crezut ca logo-ul Atari va fi re-creat folosind CSS3.
Logo-ul BP
Logo-ul simplu poate fi realizat cu ușurință cu CSS3. Cel mai bun lucru cu unele dintre aceste logo-uri prezentate aici sunt codul pe care trebuie să-l încercați!
Dribbble Logo
Logo-ul popular al site-ului de prezentare al lui Dribbble, prezentat de utilizatori, a fost prezentat folosind CSS3.
Magento Logo
Sigla lui Magento nu este prea greu de tras, dar rezultatul pare profesional.
McDonald Logo
Îl iubesc pe CSS3!
Twitter Bird
Perfect proporție, vârf de pălărie la creator.
Logo-ul Windows
Windows logo! Se pare foarte minunat și este ușor de creat!
Logo Internet Explorer
Într-adevăr o mare creație! Funcționează în browserele majore, cu excepția Internet Explorer 8 sau mai puțin.
Logo-ul Google Chrome
Nu sunt sigur că vă place sau nu noul logo Google Chrome sau nu, dar acest logo CSS3 Google Chrome arată minunat!
Logo-ul Opera
Acum o practică pentru dvs.: care sunt diferențele dintre această piesă CSS3 și afacerea reală?
Logo HTML5
HTML5 nu poate străluci fără CSS3!
Volkswagen Logo
Cu excepția schemei de culori, această clona CSS3 arată identică cu cea originală.
Reflecţie
Odată cu boom-ul logourilor și graficelor realizate din CSS3 pură se află discuțiile care dezbat foarte mult despre utilitatea graficelor produse de CSS3 în mediul de producție din lumea reală.
În general, grafica CSS3 este bună, dar ea ar putea fi enervant mai ales atunci când aveți nevoie să modificați designul sau pur și simplu redimensionați graficul, de asemenea, cea mai mare durere aici este tehnologia nu este încă pe deplin sprijinit de anumite browsere cum ar fi Internet Explorer.
Tu ce crezi? Utilizați graficul realizat cu CSS3 pe site-ul dvs.? Aveți vreo soluție pentru neajunsurile sale curente? Lăsați-ne să vă cunoaștem gândul și împărtășiți-ne cu noi dacă ați copt un grafic CSS3!
Mai Mult
Doriți să faceți ceva cu CSS3? Ai ajuns la locul potrivit! Mai jos sunt ghiduri și tutoriale scrise pentru a vă ajuta foarte mult pe drumul dvs. spre stăpânirea CSS3.
- CSS3: Creați un meniu de navigare Breadcrumb
- CSS3: Creați un RSS Feed Logo
- CSS3: Creați o casetă de căutare
- CSS3: Ghidul pentru începători
- CSS3 / HTML5: Creați pagini Web
- CSS3 / HTML5: Creați un formular de contact bazat pe AJAX
