Share
Am auzit că acest lucru CSS3 este tot furia. Resursele zboară în jurul lumii tutorial și blogosphere oferind exemple strălucitoare de moduri creative noi de a proiecta folosind module CSS3. Cu toate acestea, este ușor să supra-implementați și să pierdeți subtilitatea strălucitoare a unor interfețe de utilizator excelente. Iată câteva sfaturi rapide pentru utilizarea tehnicilor CSS3 puternice în moduri subtile.
Oamenii sunt capabili să perceapă și să distingă schimbări foarte mici.
Linia de jos aici este că oamenii sunt capabili să perceapă și să distingă schimbări foarte mici pe care nu le pot observa în mod conștient și nu le pot aminti. Mă îndoiesc că aceasta este o informație nouă pentru oricine. Este unul dintre cele mai cunoscute concepte expuse de studiile de senzație și percepție. Uneori, un lucru poate fi plăcut pentru altul. Și uneori, nici măcar nu știți de ce.
Cu toate acestea, rețineți că designul web este a conştient proces. Designul subtil poate fi dificil deoarece este ușor să gândiți "că are nevoie doar puțin Mai Mult."Înainte să știi, subtilitatea se pierde.
Având în vedere acest lucru, aș dori să prezint trei tehnici CSS3 care pot fi utilizate pentru a oferi diferite forme de subtilitate pentru web design.
Tranziția este un instrument puternic, oferind o modalitate pentru CSS de a anima în mod esențial de la un punct final la altul. Sintaxa îmbină un set de instrumente destul de bogat: proprietate, durată și relaxare. Fiecare dintre aceste piese poate fi variată pentru a oferi diferite nivele de subtilitate. Adesea, doar se joacă - cum fac adesea efectele. Cu alte cuvinte, jucați cu valori până la ea pare corect. Doar nu te face nebun. Este ușor să vă pierdeți chiar și o scurtă listă de variabile.
Nu este neobișnuit ca elementele de navigare să schimbe culoarea atunci când mouse-ul se află în mișcare. Tranziția poate transforma acea culoare într-un pic mai fin.
.nav li a culoare: # 282828; text-decoration: none; -webkit-transition: culoare .1s ușurință în afară; -moz-tranziție: culoare .1 ușurință în sus; -o-tranziție: culoare .1 ușurință în sus; tranziție: culoare .1 ușurință în sus; .nav li a: hover culoare: # 808080;
Schimbarea culorii nu este subtilă aici. E clar vizibil. Ce este subtil este netezirea acelei schimbări de culoare.
Trickul de a păstra această subtilitate este durata. Dacă este prea lung, efectul va fi mult prea vizibil. Navigarea poate deveni rapid împovărătoare și arata amator.
Vizualizați demonstrația.
În cazul în care tocmai nu ați intrat în CSS3, este important să notați ordinea în care apar declarațiile specifice browserului. De fapt, este important să observi că declarația specifică non-browser-ului este ultima în listă. CSS ia ultima declarație și o face mai importantă în cazul unui conflict. Odată ce este lansată o specificație de tranziție reală, probabil că toate browserele vor implementa modulul fără care are nevoie de prefixul proprietar. Astfel, CSS devine oarecum pregătit pentru viitor, fără costuri reale pentru implementările curente.
De asemenea, observați că tranzițiile sunt în element, nu stilul său de hover. Acest lucru va oferi tranziția atât pe mouse-over și mouse-off.
Selectorul n-de-tip sau n-copil permite selecționarea modelelor într-o serie de elemente și aplicarea stilurilor în consecință. De exemplu, într-un tabel, n-copil ar putea să coloreze fiecare al doilea rând folosind: nth-child (impar). Să ne uităm la un exemplu care nu poate fi la fel de clar.
Vom lua un marcaj de navigare destul de standard ...
... și aplicați un stil.
.nav li: n-de-tip (impar) margin-top: 5px; .nav li: nth-of-type (par) (margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-dreapta: 0; .nav li: nth-of-type (2n + 3) margin-stânga: 8px; marja de-dreapta: 25px;
Acest lucru va crea un meniu cu eșalonare, cu câteva elemente înalte, câteva articole mici și câteva seturi care arată pereche. Diferența vizuală între acest meniu și un meniu in-line este clară.
Deci, ce este atât de subtil? Subtilitatea aici este dublă.
Deci, poate un vizitator vede mai întâi "Acasă". Acest vizitator își va da seama probabil că el sau ea se află deja pe pagina de pornire. El sau ea poate vedea foarte bine "Munca" următor. *clic*. După ce au văzut câteva lucrări, s-ar putea să fi văzut blogul următor, dar poate că gruparea se va sfârși prin a fi mai puternică și dorința lor este trasă la "Despre". Designerul conduce acum vizitatorul folosind un layout de navigație. El sau ea a oferit sugestii cu privire la locul în care vizitatorii ar trebui să meargă, succesiv.
Se va întâmpla acest lucru de fiecare dată? Absolut nu. Se va întâmpla uneori? Aș fi pariat.
Acesta este punctul de subtilitate. Nu influențează în mod copleșitor utilizatorul, dar ar putea oferi din când în când unele sugestii sau motivații utile.
Iată o modalitate simplă de a introduce subtilitatea într-un design. În mod ironic, probabil că are sintaxa cea mai complicată acolo. Nu numai că, dar are, de asemenea, sintaxe semnificativ diferite între browsere. Hai să aruncăm o privire.
Având în vedere un formular simplu de contact (e-mail, mesaj), iată un stil:
formular de intrare [tip = text], formular textarea background-image: -webkit-gradient (linia, stânga, stânga, )); fundal-imagine: -moz-linear-gradient (fund central, rgb (255,255,255) 0%, rgb (248,248,248) 100%); schiță: nici una; frontieră: solid 1px #ccc;
E o declarație completă, nu-i așa? Și asta acoperă doar două browsere!
Nu voi intra toate a sintaxei, pentru că alții au făcut asta pentru mine. Consultați "Înțelegerea Gradientelor CSS" din Nettuts + pentru o mai bună înțelegere. Când ați terminat, să vorbim despre subtilitate.
Gradientul din aceste zone de text este aproape imperceptibil. Totuși, dacă jucați cu CSS și scoateți frontiera, vă asigur că este acolo.
Dacă tot nu puteți vedea imaginea a doua, luați-vă capul și mutați-l în partea laterală a monitorului, astfel încât să vedeți monitorul într-un unghi destul de abrupt. Vezi acum? Dacă nu, refuz să fiu tras la răspundere. Văd, așa că monitorul tău trebuie să fie spart. :)
În orice caz, observați cât de aproape sunt culorile rgb în css. În partea de sus a intrării de text și textarea sunt umbrite mereu. Acesta este un exemplu de subtilitate extremă. În timp ce completați un formular, este puțin probabil ca nimeni să observe acest gradient. Cu toate acestea, oamenii vă pot găsi forma puțin mai atrăgătoare decât alții; chiar dacă nu știu de ce.
Ei bine, am aproape a făcut prin intermediul și întregul articol CSS3 fără a discuta probleme de browser. Cum am reușit asta? Pentru un singur lucru nu a fost pusă prea mult accent pe cod. Mai important, totuși, salvez cele mai bune pentru ultimele.
Dacă analizați demo-ul pentru acest tutorial într-un browser webkit, apoi comparați-l cu un browser Firefox, veți observa unele diferențe. Dacă treceți la IE, veți observa și alte diferențe. Un lucru frumos despre utilizarea subtilității este că dacă diferența subtilă nu este acolo, probabil că oamenii nu vor observa. Cu alte cuvinte, schimbarea culorii din primul exemplu funcționează fără tranziție; este doar un pic mai puțin slick. Dacă singurul scop de a folosi nth-of-type a fost de a grupa pe baza comunității, niciun vizitator nu va avea grijă dacă gruparea nu este acolo. Meniul funcționează în continuare. Și gradientul? Amintiți-vă cât de greu trebuia să încercați să-l observați chiar și atunci când a fost spus exact unde a fost?
Faceți-o o oportunitate pentru creativitate, în loc de o povară de netrecut.
Probabil cea mai rațională opoziție față de abordarea diferită a browserelor în designul web este aceea că mulți (probabil cel mai) clientii vor dori exact același site în orice browser major. Dacă nu există niciun spațiu pentru a se ridica în acest sens și trebuie să plătiți factura electrică, faceți tot ce aveți nevoie pentru a obține acel colț rotunjit în toate versiunile IE înapoi în zorii timpului.
Cu toate acestea, unii clienți pot fi educați și influențați în ceea ce privește unele avantaje de a avea un design într-un loc și altul în altă parte. De exemplu, acceptarea unui aspect ușor diferit poate reduce semnificativ cererile HTTP și excesul de elemente HTML, dacă se utilizează o mulțime de imagini pentru a crea frontiere și umbre și nu. Sau, dacă sunteți ceva ca mine, aveți niște proiecte personale și vă bucurați de o bună provocare (cum ar fi oferirea aceluiași browser de "experiență" fără a avea întotdeauna același aspect). Sau, poate aveți două modele diferite pe care le place foarte mult și nu puteți decide care dintre ele să le pună în aplicare. Iată o oportunitate de a implementa unul în același browser și celălalt în altul, eliminat dintr-o singură foaie de stil.
Punctul general aici este că incompatibilitatea browser-ului este a fapt a webului curent atunci când încercați să utilizați CSS3. Așadar, transformați-o într-o oportunitate pentru creativitate, în loc de o povară insurmontabilă.
Subtilitatea nu este exact a proiecta subtilitate. În schimb, este mai mult de a proiectant subtilitate. Din experiența mea, majoritatea oamenilor folosesc doar un singur browser. Profesioniștii web uită că uneori, pe măsură ce instalam trei versiuni de cinci browsere diferite pe fiecare mașină pe care o întâlnim.
Deci, dacă un utilizator IE se întâmplă numai pe site-ul dvs. și conținutul său este clar și el sau ea se bucură de experiență, ați reușit în design-ul dvs. Dacă un alt utilizator se întâmplă pe site-ul dvs. în Chrome și se bucură de experiența sa și conținutul este clar, ați reușit să vă proiectați. Și poate că acel vizitator a apreciat câțiva biciuri suplimentare. Kudos. Cel mai important, însă, dacă ai ocazia să stai jos și să privești acest lucru simultan, vei reuși să ai niște distracții subtile.
Accentsconagua