Share
CSS3 este una dintre cele mai noi tehnologii web disponibile pentru dezvoltatorii web chiar acum. Folosind unele din multele sale caracteristici, este posibil sa reproduceti efectele pe care le-ati facut anterior in Photoshop, cu un cod CSS care este mai intretinut, mai rapid pentru a incarca, si hip cu cele mai recente tendinte. Citiți mai departe pentru a afla mai multe despre uneltele electrice disponibile și despre cum să le combinați pentru a produce efectele grafice finale.
CSS3 are multe caracteristici, dar unele dintre ele sunt imperative pentru a afla dacă vreți să reproduceți efecte asemănătoare cu Photoshop. Eu numesc aceste "unelte electrice". Acestea includ următoarele:
Fiecare dintre aceste caracteristici vă poate ajuta să înlocuiți în trecut unele imagini pe care le-ați creat în Photostop. Procedând astfel, faceți site-ul dvs. mai ușor de întreținut, deoarece puteți schimba o proprietate doar prin schimbarea fișierului dvs. CSS, în loc să editați o imagine în Photoshop. De asemenea, faceți încărcarea mai rapidă a site-ului dvs., deoarece imaginile utilizează multă lățime de bandă. Să explorăm aceste caracteristici unul câte unul.
Suport pentru browsere:
Până acum, probabil că ați auzit despre raza de graniță de un milion de ori. Este foarte ușor de utilizat și este acceptat în toate browserele moderne. Dacă nu știți deja, raza de graniță este o modalitate de a crea colțuri rotunjite cu CSS - nu sunt necesare imagini! Să aruncăm o privire la sintaxa.
-webkit-border-radius: dimensiune; -moz-border-radius: dimensiune; raza de graniță: mărimea;
Există trei sintaxe pe care va trebui să le utilizați. Primul este pentru browserele Webkit, cum ar fi Safari și Chrome; al doilea este pentru browserele bazate pe Mozilla, cum ar fi Firefox; iar ultima este versiunea fără prefix, pentru browserele care o suportă, inclusiv IE9, Opera și Safari 5.
Aplicând o rază de graniță de 10 pixeli unui div creează următorul efect:
OK, ușor! Să trecem la următoarea unealtă electrică.
Suport pentru browsere:
Boxe umbrite sunt o altă caracteristică bine susținută. Sintaxa lor arată astfel:
-webkit-caseta-umbra: offset_x offset_y blur_radius culoare; -moz-box-umbra: offset_x offset_y blur_radius culoare; caseta-umbra: offset_x offset_y blur_radius culoare;
Încă o dată, trebuie să folosim prefixele furnizorilor pentru Webkit și Mozilla. Primul și al doilea parametru al proprietății "shadow box" sunt pozițiile de poziționare de la coordonatele din stânga și de sus ale elementului. Setarea unei valori pozitive pentru aceste proprietăți mută umbra spre dreapta și în jos de element, iar setarea unei valori negative deplasează umbra la stânga și în sus față de element. Blur_radius este cantitatea de neclaritate pe care doriți să o adăugați la umbra dvs. (cât de greu sau fuzzy doriți). În cele din urmă, ultimul parametru este culoarea pe care doriți ca umbra să fie. Adăugarea unei umbre la divulată rotundă folosită anterior va crea un efect frumos.
-webkit-box-shadow: 5px 5px 10px # 555; -moz-box-shadow: 5px 5px 10px # 555; box-shadow: 5px 5px 10px # 555;
O altă caracteristică elegantă a umbrelor cutiei CSS este cuvântul cheie inserat. Când este prezent cuvântul cheie inserat, umbra este redată mai degrabă în cutie decât în afară. Acest lucru poate crea un aspect frumos deprimat, în special pentru butoane. Iată ce ar arăta divul nostru cu o umbră.
-webkit-box-shadow: 0 0 20px # 333 inset; -moz-box-shadow: 0 0 20px # 333 inset; box-shadow: 0 0 20px # 333 inset;
Ultima caracteristică a umbrelor cutie care merită menționat este abilitatea de a avea mai multe umbre pe același element. Acest lucru este foarte util și poate elimina marcarea suplimentară în HTML doar pentru a aplica o umbră suplimentară. Tot ce trebuie sa faci pentru a crea mai multe umbre este separat cu virgule. Iată un exemplu:
-webkit-box-shadow: 0 0 20px # 333 inset, 20px 15px 30px galben, -20px 15px 30px lime, -20px -15px 30px albastru, 20px -15px 30px roșu; -moz-box-shadow: 0 0 20px # 333 inset, 20px 15px 30px galben, -20px 15px 30px lime, -20px -15px 30px albastru, 20px -15px 30px roșu; box-shadow: 0 0 20px # 333 inset, 20px 15px 30px galben, -20px 15px 30px lime, -20px -15px 30px albastru, 20px -15px 30px roșu;
Suport pentru browsere:
Umbrele textului sunt ca umbrele cutiei, cu excepția faptului că acestea sunt umbre pentru text, mai degrabă decât întregul element. Din fericire, nu există prefixul vânzătorului necesar pentru umbra textului.
text-umbra: offset_x offset_y blur_radius culoare;
Opțiunile pentru umbra de text sunt aceleași ca și pentru umbra cutie, cu excepția faptului că nu există suport pentru umbră text. Iată un demo care face ca textul invizibil să dispară din pagină.
culoare: #fff / * culoarea textului în alb * / text-shadow: 0 0 50px # 333;
Aceasta creează următorul efect:
Ca și umbrele de pe cutie, este posibil să aveți mai multe umbre de text doar prin separarea lor cu virgule. Iată un exemplu care creează un efect de text aprins.
text-shadow: 0 0 4px #ccc, 0-5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Umbrele de text pot crea unele efecte minunate și pot completa foarte bine alte efecte.
Suport pentru browsere:
Gradienții sunt una dintre cele mai puternice caracteristici disponibile pentru dvs. dacă doriți să creați aceste efecte minunate. În timp ce suportul de browser complet nu este încă acolo, puteți oferi întotdeauna stil de rezervă browserelor fără suport. Amintiți-vă: Site-urile web nu trebuie să arate la fel în fiecare browser. Există două tipuri de gradienți pe care le puteți crea: gradienți liniare și gradienți radiali. Așa cum v-ați putea aștepta, gradienții liniare se deplasează de-a lungul unei linii drepte, iar gradientele radiale merg în jurul unui cerc. Gradienții pot fi utilizați oriunde ați fi putut folosi o imagine în trecut, cum ar fi pentru fundal, imaginea de frontieră sau gloanțele de listă.
Din păcate, pentru dezvoltatorii web, există două sintaxe diferite: una pentru Mozilla și una pentru Webkit.
Safari și Chrome folosesc atât motorul de randare Webkit, astfel încât să utilizeze întotdeauna aceeași sintaxă. Sintaxa lor de gradient este destul de simplă:
-webkit gradient (, [, ]?, [, ]? [, ] *)
Webkit utilizează aceeași sintaxă pentru gradientele lineare și radiale. Schimbați doar tip pentru a comuta între ele.
Firefox utilizează sintaxe separate pentru gradientele liniare și radiale, ambele fiind foarte diferite de cele ale partenerilor Webkit.
-moz-linear-gradient ([|| ,]? , [, ] *) -moz-radial-gradient ([ || ,]? [ || ,]? , [, ] *)
Să analizăm separat aceste sintaxe.
Pentru simplitate, aici este o sintaxă Webkit doar pentru gradiente lineare.
-webkit-gradient (liniar, start_x start_y, end_x end_y, oprire, oprire ...)
Sintaxa lui Firefox arată astfel.
-moz-linear-gradient (unghiul start_x start_y, stop, stop ...)
În sintaxa Webkit parametrii start_x și start_y specifică poziția de pornire a gradientului, iar end_x și end_y specifică poziția de sfârșit a gradientului. Puteți utiliza oricare dintre valorile standard ale parametrilor CSS, inclusiv procentajele, precum și cuvintele cheie rămase, de sus, de jos, de dreapta și de centru ca valori pentru acești parametri de poziție. Opririle sunt o modalitate prin care puteți specifica anumite culori care trebuie utilizate în anumite puncte de-a lungul gradientului. Puteți avea cât mai multe opriri de culoare pe cât doriți, dar trebuie să aveți cel puțin două: o culoare de început și de sfârșit. Pentru opriri suplimentare de culori, puteți utiliza funcția de stopare a culorilor () care oferă o poziție procentuală sau o zecimală între 0 și 1, precum și o culoare. De exemplu: stop color (50%, negru) ar crea o oprire a culorii negre la jumătatea exactă a gradientului. În loc să scrie 0% și 100% pentru culorile care încep și se termină, funcțiile de confort de la () și până la () există. Tot ce trebuie să oferiți acestor persoane este culoarea.
Sintaxa lui Firefox este mult mai puțin dreaptă și are multe modalități de realizare a aceluiași scop. Singurul lucru care este static cu privire la sintaxă sunt stopurile de culoare, care sunt doar o culoare urmată de o poziție ca procent. Pentru pozitiile de pornire si de sfarsit, puteti lasa 0% si 100%, iar daca opresti pozitia oricarei alte opriri de culoare, ele sunt distribuite uniform pe toata gradientul. Spre deosebire de sintaxa Webkit, sintaxa Firefox nu are o pozitie de sfarsit, doar o pozitie de pornire si un unghi. Gradientul va ieși din poziția de pornire la unghiul specificat. Dacă lăsați unghiul să iasă, acesta va ieși perpendicular din acel punct. Dacă lăsați punctul de plecare împreună, gradientul va rula de sus în jos. Această sintaxă este oarecum confuză și puțin mai flexibilă decât sintaxa simplă a Webkit-ului, deci este mai bine să înveți prin exemplu.
Iată un exemplu simplu de gradienți CSS în acțiune. Acest gradient merge din colțul din stânga sus spre colțul din stânga jos (cu alte cuvinte, de sus în jos) și de la roșu la alb.
-webkit-gradient (linia, partea stângă sus, partea stângă jos, de la (roșu) la (alb)); -moz-linear-gradient (roșu, alb)
Setând această proprietate ca fond de div, obținem următorul rezultat:
Prin adăugarea unui stop de culoare și schimbarea unghiului gradientului, putem obține un efect diferit.
-webkit-gradient (linia, partea stângă sus, fundul din dreapta, de la (roșu), stopul de culoare (50%, alb), până la (roșu)); -moz-linear-gradient (stânga sus, roșu, alb, roșu);
Aici este sintaxa pentru gradientele radiale în Webkit.
-webkit-gradient (radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x external_circle_center_y, exterior_circle_radius, stop, stop ...)
Sintaxa lui Firefox arată astfel.
-moz-radial-gradient (center_x center_y, dimensiunea formei, stop, oprire ...)
Sintaxa Webkit este un pic mai complicată decât sintaxa gradientului liniar, însă aceleași principii se aplică în continuare. Radiografiile gradiente în Webkit au două cercuri: un cerc de pornire și un cerc final. Specificați pozițiile centrale X și Y pentru fiecare dintre aceste cercuri împreună cu razele lor. În cele din urmă, specificați că culoarea se oprește la fel ca în cazul gradientelor lineare.
Sintaxa Firefox pentru gradientele radiale este similară cu sintaxa pentru gradientele liniare, deoarece toate părțile sale, cu excepția stopurilor de culoare, pot fi lăsate afară. Puteți specifica pozițiile centrale X și Y ale gradientului la fel ca coordonatele cercului interior din sintaxa Webkit, dar nu există cerc exterior în Firefox. În schimb, puteți specifica o formă și o mărime a gradientului. Forma poate fi fie un cerc, fie o elipsă, cea din urmă nu poate fi creată în prezent în Webkit. Dimensiunea acceptă mai multe cuvinte cheie diferite, dar nu o dimensiune a pixelilor, așa cum ați fi putut aștepta. Puteți citi despre ceea ce face fiecare dintre aceste constante în Centrul pentru dezvoltatori Mozilla. Pentru acest tutorial, vom folosi doar valorile implicite. Încă o dată, dacă părăsiți pozițiile centrale X și Y, acestea vor fi considerate a fi centrul obiectului pe care îl umpleți cu un gradient. Dacă lăsați forma și mărimea, gradientul va fi considerat un cerc care umple întreaga cutie.
-webkit-gradient (centru radial, centru, 0, centru centru, 50, de la (alb), până la (roșu)); -moz-radial-gradient (alb, rosu)
Dacă aplicăm acest gradient pe fundalul unui Div, acesta este ceea ce vom obține.
Suport pentru browsere:
Fundalurile multiple facilitează crearea de efecte complexe în CSS fără a fi necesară crearea unui marcaj suplimentar în HTML. Suportul pentru acest lucru înseamnă că elementele pot avea mai multe gradienți și fundaluri de imagine împreună cu culoarea de fundal standard. Nu există nicio diferență în sintaxa mai multor fundaluri dintr-un fundal unic - doar virgula le separă și se oprește!
Iată un exemplu de div cu un background de gradient și un efect texturativ frumos, care utilizează o imagine:
fundal: url (noise.png), -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (# 999), la (# 333)); fundal: url (noise.png), -moz-linear-gradient (# 999, # 333);
Trebuie să o declarăm de două ori, deoarece, după cum am aflat, există o sintaxă de gradient diferită pentru fiecare browser. Aceasta creează următorul efect:
Acum, că avem cinci instrumente de mare putere la dispoziția noastră, să le combinăm pentru a produce un efect chiar mai mare.
Există atât de multe tipuri diferite de butoane pe care le puteți alege să le proiectați. Pentru a fi simplu, să emulăm ceva care există deja - stilul butonului Mac OS X.
Vom începe cu codul nostru HTML pentru această demonstrație. Este într-adevăr destul de simplu, doar două DIV-uri și un text.
Buton
Acum vom începe cu CSS de bază. În primul rând, să stilul panoului.
.panoul background: -webkit-gradient (linia, partea stângă sus, partea stângă jos, de la (#bbbcbb), la (# 959695)); fundal: -moz-linear-gradient (#bbbcbb, # 959695); fundal-culoare: # b7b9b7; lățime: 100px;
Panoul este doar un container bun pentru butonul nostru. Ea are un gradient care merge de sus în jos între două culori gri frumos. Pentru acele browsere care nu suportă gradiente, este dată o culoare de fond în fond.
Acum, să ne uităm la CSS pentru butonul real.
.buton display: inline-block; margine: 20 pixeli; padding: 3px 6px; font-family: "Lucida Grande", Arial, sans-serif; font-size: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3 pixeli; graniță: 1px solid rgba (0, 0, 0, 0.6); fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (#fbfcfb), la (# 9d9e9d)); fundal: -moz-linear-gradient (#fbfcfb, # 9d9e9d); fundal-culoare: # c0c2c0; text-umbra: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0,4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0,4) 0 1px; box-shadow: rgba (255, 255, 255, 0,4) 0 1px; -webkit-user-select: nici unul; -moz-user-select: nici unul; cursor: implicit;
Există o cantitate decentă de cod aici, care utilizează toate uneltele electrice pe care le-am descris mai sus, cu excepția mai multor fundaluri. Există mai multe secțiuni la acest cod, pe care le vom lua unul câte unul. Primele două linii sunt doar câteva informații simple despre aspect. Setarea butonului pentru a fi afișat: blocul inline face ca acesta să se extindă automat pentru a se potrivi cu conținutul, indiferent de cantitatea textului introdus în buton. Următoarea secțiune oferă câteva informații despre font pentru buton. În cele din urmă, în cea de-a treia secțiune vom folosi primul instrument electric: raza de graniță. În cazul butonului minunat, îi dăm o rază de 3px frumos. Apoi dăm butonul o margine. Observați că folosim aici rgba ca o culoare. Acest lucru ne permite să facem culoarea parțial transparentă, așa cum procedăm aici, creând o culoare drăguță. În următoarea secțiune de cod, am setat fundalul butonului. Îi oferim un fundal gradient, precum și o culoare solidă pentru căutarea în browsere care încă nu suportă gradiente. Apoi, folosim umbră text pentru a face textul să arate ușor gravat în buton. Încă o dată folosim rgba aici pentru a da un alb parțial transparent la umbra textului. Secțiunea pen-final a codului creează o umbră cutie. Acum, aceasta nu arata ca o umbră, de fapt, arata ca oa doua frontieră, dar oferă o lumină frumoasă în partea de jos a butonului pentru a face să arate gravat în fundal și complimentează culoarea de frontieră. Acesta este un truc util pentru a ști dacă vreți vreodată ceva să arate că are granițe multiple - o folosesc foarte mult. În cele din urmă, ultima secțiune a codului CSS este un truc frumos care împiedică selecția textului în browserele bazate pe Webkit și Firefox și setează cursorul la săgeata implicită, mai degrabă decât la cursorul de selectare a textului.
Până acum, acest cod face ca butonul nostru să arate astfel:
OK, deci nu prea rău încă! Să trecem la aspectul deprimat al butonului.
.buton: activ fundal: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0,4) 0 1px, negru 0px 1px 3px inset, rgba (0, 0, 0, 0.4) 0px -5px 12px inset; -moz-box-shadow: rgba (255, 255, 255, 0,4) 0 1px, negru 0px 1px 3px inset, rgba (0, 0, 0, 0.4) 0px -5px 12px inset; box-shadow: rgba (255, 255, 255, 0,4) 0 1px, negru 0px 1px 3px inset, rgba (0, 0, 0, 0.4) 0px -5px 12px inset; text-umbra: rgba (255, 255, 255, 0.3) 0px 1px;
Când butonul este apăsat, schimbăm o serie de lucruri. Mai întâi, am setat fundalul la o culoare netedă, înlăturând gradientul pe care l-am setat pentru ureche. Acest lucru se datorează faptului că vom crea aspectul deprimat cu o umbră de cutie, mai degrabă decât cu un gradient. Următorul lucru pe care îl facem este setarea umbrelor - sau mai multor umbre. Prima umbră din listă este aceeași cu cea pe care am avut-o în starea normală: evidențiază în partea de jos a butonului. Al doilea și al treilea umbre sunt cele care fac apăsarea butonului nostru. Primul dintre acestea este o umbră neagră inserată, care este setată din partea de sus a unui pixel și are 3 pixeli de neclaritate - o umbra destul de întunecată. Ultima umbră este de asemenea negru, dar un negru ușor transparent, care este configurat din partea de jos a 5 pixeli cu 12 pixeli de neclaritate. Acest lucru creează aspectul întunecat din partea inferioară a butonului atunci când este apăsat. Ultimul lucru pe care trebuie să-l facem când este apăsat acest buton este doar să reducem opacitatea umbrei textului cu o singură crestătură, astfel încât să nu iasă ca un deget mare.
Asta e! Butonul nostru este complet. Iată ce arată versiunea presată:
Înlocuirea imaginilor cu CSS3 are multe avantaje. Aceasta vă face munca mai ușoară ca dezvoltator web, deoarece nu aveți nevoie să deschideți Photoshop de fiecare dată când aveți nevoie să faceți o schimbare în interfața dvs. de utilizator. Aceasta face ca site-ul dvs. web sau aplicația web să se încarce mai repede, deoarece nu are nevoie să descarce atât de multe imagini grele. Și vă permite să creați o experiență mai bogată, mai interactivă și mai plăcută pentru utilizatori, astfel încât aceștia să se reîntoarcă pentru mai mult.
Vă voi lăsa puțin inspirat de lucrurile pe care le puteți face cu CSS3. Acestea nu sunt neapărat exemplele lumii cele mai reale, dar arată ceea ce este posibil cu un pic de lucru.
Prima demonstrație, creată de Jeff Batterton, este un iPhone creat cu CSS3 pur - nu sunt folosite imagini. Este foarte impresionant, folosind gradienți CSS, umbre de text, umbre de box, tranziții și transformări. Din păcate, în prezent, aceasta arată doar corect în browserele bazate pe Webkit, cum ar fi Safari și Chrome. Poate fi sarcina dvs. să faceți demo-ul în Firefox!
Un alt demo, poate chiar mai uimitor, a fost scris de Louis Harboe. Este o recreere a unora dintre icoanele iOS în CSS pur și recreații foarte realiste la asta! Această demonstrație funcționează numai în browserele bazate pe Webkit. Dacă doriți să aflați cum au fost reproduse unele dintre aceste icoane, puteți să vă îndreptați către blogul lui Louis Harboe, unde descrie procesul.
Sper că v-ați bucurat de acest articol! Simțiți-vă liber să vă atingeți de mine pe Twitter sau să vă lăsați gândurile în comentarii!
Accentsconagua