Conţinut
- 01. Potriviți imaginile cu schemele de culori ale site-ului
- 02. Distribuiți în mod egal spațiu în ultimul rând al unei rețele
- 03. Creați animații de particule cu box-shadow
- 04. Animează poliedre cu transformate
- 05. Master ’calc ()’ pentru poziționare
- 06. Faceți modelul cutiei sănătos cu „box-sizing”
- 07. Centrați vertical cu CSS
- 08. Vizați o bancă de obiecte conexe
- 09. Controlați cratima
- 10. Profitați de modurile de scriere
- 11. Folosiți gradienți în moduri neobișnuite
- 12. Utilizați potrivirea șirurilor pe linkuri
- 13. Fă ca FOUT să funcționeze pentru tine
- 14. Explorează SVG pentru fundaluri
- 15. Concentrați utilizatorii cu tranziții 3D
- 16. Creați meniuri circulare cu CSS și matematică
- 17. Animați legăturile pe hover
- 18. Realizați animații simple pentru cadre cheie
- 19. Creați efecte 3D plutitoare cu umbre
- 20. Actualizați elementele paginii folosind „: țintă”
- 21. Oferiți feedback cu animații subtile
- 22. Pregătește-te pentru „va anima”
- 23. Umanizați câmpurile de intrare
- 24. Întrerupeți și redați animațiile CSS
- 25. Nu utilizați variabile CSS
La un moment dat, cu orice tehnologie, există senzația că s-a făcut aproape orice se poate face. Când ceva nu mai este la fel de nou și strălucitor, interesul scade și atenția este atrasă de următorul lucru mare. Acest lucru a fost adesea cazul în industria web, care este predispusă la a fi extrem de entuziasmat de un anumit aspect al tehnologiei înainte ca, mai devreme sau mai târziu, să o retragă în lumea banală.
Când CSS a apărut pentru prima dată, a fost revoluționar și, în timp, a evoluat pentru a permite designerilor să creeze aspecte de pagini web flexibile, bine concepute și frumoase. În cele din urmă, totuși, a existat sugestia din diferite părți că CSS este obosit și poate că timpul său la soare a dispărut.
Vreau să arăt că există încă o mulțime de entuziasm și viață în lumea CSS, indiferent dacă este vorba de proprietăți de ultimă generație pe care este posibil să nu le fi explorat încă, sau folosind un aspect al CSS într-un mod pe care nu l-ai fi luat în considerare anterior.
Iată câteva sfaturi de la unii dintre cei mai buni experți CSS din industrie.
(Notă: unele tehnici din această caracteristică sunt de ultimă oră și este posibil să nu fie pe deplin acceptate în toate browserele. Testați cu atenție și asigurați-vă că sunt disponibile soluții de rezervă înainte de a face orice lucru live.)
01. Potriviți imaginile cu schemele de culori ale site-ului
Christopher Schmitt, organizator al conferinței
Conferințele au propriile scheme de culori și, cu multe difuzoare, fluxul de lucru pentru gestionarea portretelor poate fi complex. Aplicarea manuală a filtrelor nu se extinde și se bazează pe faptul că aveți acces, de exemplu, la o anumită acțiune Photoshop. Acum folosesc PNG de înaltă rezoluție în tonuri de gri și adaug tonuri folosind filtre CSS. Acest lucru îmi permite să potrivesc orice portret cu schema unui eveniment și să refolosesc, de asemenea, imagini pe mai multe teme. Am nevoie doar de o nouă regulă CSS pentru fiecare. Vedeți o demonstrație.
02. Distribuiți în mod egal spațiu în ultimul rând al unei rețele
Stephen Hay, designer și autor
Dacă aveți un număr necunoscut de articole care trebuie afișate într-o grilă, puteți utiliza Flexbox pentru a împărți ultimul rând în mod egal. Deci, dacă există un singur articol, acesta va ocupa întregul rând; dacă există două elemente, rândul va fi împărțit în jumătate și așa mai departe. Vedeți o demonstrație.
03. Creați animații de particule cu box-shadow
Ana Tudor, coder și fanatică a matematicii
Prin amestecare cutie-umbră cu unele matematici și Sass, puteți grafica curbe 2D, emula mișcare 3D și crea animații nebunești de particule pe care toți le vor confunda cu cele de pânză! Vedeți un demo și altul.
04. Animează poliedre cu transformate
Ana Tudor, coder și fanatică a matematicii
Probabil că ați văzut poligoane CSS pure create cu chenare, dar avem un instrument mult mai puternic în transforma proprietate. Înlănțuirea și aplicarea transformărilor pe elemente imbricate ne permite să creăm poligoane complexe cu fundaluri de imagini sau margini și interioare transparente. Folosind transformări 3D, putem combina aceste forme 2D în poliedre și putem face solidele să se contopească, să se desfășoare, să explodeze sau să se recombine într-un mod ușor confundat cu WebGL. Vedeți o demonstrație.
05. Master ’calc ()’ pentru poziționare
Ana Tudor, coder și fanatică a matematicii
am iubit calc () din momentul în care l-am descoperit. Este util pentru îmblânzirea marjelor, a căptușelii sau a dimensiunilor și poate fi un salvator atunci când este utilizat pentru poziționarea sau dimensionarea fundalurilor, în interiorul gradientelor sau transformărilor și combinat nu doar cu aceleași unități vechi, ci și cu cele noi și reci.
06. Faceți modelul cutiei sănătos cu „box-sizing”
Sawyer Hollenshead, dezvoltator și designer Oak Studios
Utilizare dimensionare cutie pentru a vă salva sănătatea. Fără el, un element cu o lățime definită de 250 px și 25 px de umplutură se combină cu o lățime de 300 px, ceea ce face ca pixelii și procentajele de amestecare să fie dificil. Cu dimensionare cutie:frontieră-cutie chenarele și căptușeala sunt plasate în loc în lățimea definită.
07. Centrați vertical cu CSS
Trent Walton, fondatorul Paravel
Din punct de vedere istoric, a fost dificil să centrezi vertical ceva cu CSS, de exemplu, dacă ai o imagine cu text adiacent pe care vrei să o aliniezi vertical. În loc să călcați și să blestemați, utilizați Flexbox pentru a face față problemelor de aliniere. Vedeți o demonstrație.
08. Vizați o bancă de obiecte conexe
Jonathan Smiley, partener Zurb și lider în proiectare
Radeți greutatea liniei CSS utilizând selectoare de atribute aproximative pe numele claselor, pentru a viza o bancă mare de obiecte conexe, mai degrabă decât atașarea atributelor comune fiecărei clase. De exemplu ... [class * = "- block-grid-"] {} ... ar viza astfel: .small-block-grid-3 .large-block-grid-5
09. Controlați cratima
Savid Storey, avocat web deschis
Cratimarea este luată ca atare în imprimare, iar unii dezvoltatori folosesc cratime proprietate online, dar puțini sunt conștienți de alte proprietăți care oferă un control mai bun. Dacă nu sunteți atent, primiți scări de cratimare în care sunt folosite cratime pe mai multe linii. O regulă generală nu este mai mult de două la rând, pe care le puteți controla folosind cratimă-limită-linii. De asemenea, cratimă-limită-caractere vă permite să specificați lungimea minimă a unui cuvânt care va fi cratimată, împreună cu numărul minim de caractere înainte și după pauza de cratimă.
10. Profitați de modurile de scriere
David Storey, avocat web deschis
Modurile de scriere vă permit să definiți direcția în care curge textul. Unele texte din Asia de Est sunt scrise vertical, linii crescând de la dreapta la stânga, specificate cu modul de scriere: vertical-rl (tb-rl în IE). Textul vertical nu este utilizat cu adevărat în sistemele de scriere europene, dar poate fi la îndemână pentru titlurile tabelelor atunci când aveți spațiu orizontal limitat.
11. Folosiți gradienți în moduri neobișnuite
Ruth John, designer
Gradientele de fundal pot arăta grozav atunci când sunt utilizate cu chenare și gloanțe. Le folosesc atât pe blogul meu, cât și cu un preprocesor pot apela un mixin cu codul reutilizat, pentru a nu-l repeta manual. Nu vă înnebuniți, deoarece gradientele pot fi grele la procesor. SCSS mixin pentru gloanțe de listă:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, transparent 31px); }
12. Utilizați potrivirea șirurilor pe linkuri
Ruth John, designer
Pe blogul meu, am folosit selectoare de atribute CSS cu potrivire de șiruri pentru stilul pictogramelor sociale. Acestea apar pe tot blogul meu, uneori cu text și alteori fără, dar întotdeauna cu o pictogramă. Pentru a stiliza legătura corectă cu pictograma socială corectă, folosesc o potrivire de tip șir pe href atributul elementului ancoră. eu folosesc *= asa ca href pe elementul de ancorare trebuie să conțină doar șirul pe care îl specific.
/ * pentru toate legăturile sociale * / .social a: before {display: inline-block; umplutură-dreapta: 30 px; font-family: ’FontAwesome’;} / * Fiecare link specific * / .social a [href * = "twitter"]: înainte de {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: before {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; culoare: # b47742;}
13. Fă ca FOUT să funcționeze pentru tine
Jason Pamental, director la H + W design
Web-ul este construit pe premisa că ar trebui să livreze conținut, chiar dacă browserul nu poate reda bling-ul. Fonturile web cu încărcare lentă pot fi frustrante, FOUT (Flash Of Unstyled Text) discordant pe măsură ce navigarea și redarea textului în timp ce fonturile se descarcă. Google și Typekit oferă un răspuns: încărcătorul de fonturi web. Prin injectarea de clase într-o pagină, pe baza stării de încărcare a fonturilor, puteți stiliza alternativele cu acele clase pentru a menține refluxul la un nivel minim, eradicând și sindromul „conținutului invizibil” al WebKit. Vedeți o demonstrație.
14. Explorează SVG pentru fundaluri
Emil Björklund, inUse dezvoltator web
Singurele browsere acum fără suport SVG sunt IE8 și versiunile ulterioare și Android 2 WebKit, astfel încât utilizarea SVG pentru fundaluri în CSS este fezabilă, mai ales împreună cu o soluție de rezervă PNG, cum ar fi Grunticon. SVG poate fi stilizat prin CSS și există o interesantă descărcare a proprietăților CSS (filtre!) Din SVG cu care ne putem juca așa cum se aplică HTML.
15. Concentrați utilizatorii cu tranziții 3D
Emil Björklund, inUse dezvoltator web
Folosind transformări 3D și folosind dimensiunea z în interfețele utilizatorului poate fi foarte util, în special pentru ascunderea / afișarea sau prăbușirea / extinderea conținutului. Este, de asemenea, destul de ușor să aveți o alternativă la o tranziție 2D, sau deloc tranziție, în aceste situații. Este un domeniu în care puțină îmbunătățire progresivă poate parcurge un drum lung.
16. Creați meniuri circulare cu CSS și matematică
Sara Soueidan, dezvoltator frontend
Meniurile circulare sunt populare în aplicațiile mobile și puteți utiliza transformări și tranziții CSS pentru a crea un meniu circular simplu. Acest meniu poate fi modificat și personalizat pentru a crea și un meniu cu deschidere în sus sau în jos. Nu există nicio modalitate directă în CSS de a traduce un articol în diagonală, dar puteți utiliza valoarea razei cercului pe care doriți să poziționați articolele și să aplicați o regulă matematică simplă pentru a calcula valorile de traducere orizontale și verticale pentru a trece la translateX () și traduce Y () funcții. În acest fel, veți ajunge cu un diagonală traducere pentru a muta elementele de meniu în pozițiile corecte pe cerc. Evenimentul cu clic care închide / deschide meniul poate fi gestionat folosind JavaScript sau puteți să faceți un pas mai departe și să aveți un meniu numai CSS utilizând o casetă de selectare CSS. În demo-ul meu, folosesc JavaScript și API-ul HTML5 classList, care nu este acceptat în toate browserele, așa că va trebui să vizualizați demonstrația într-un browser modern pentru a funcționa sau să decomentați codul jQuery în loc să utilizați API-ul classList cod.
Vedeți un demo și un tutorial complet. Exemplu de hack CSS Checkbox.
17. Animați legăturile pe hover
Paul Lloyd, designer de interacțiuni The Guardian
Nu ar trebui să se bazeze pe stările cu mouse-ul pentru ca acțiunea să funcționeze sau să ofere informații importante, dar puteți îmbunătăți în continuare interfețele pentru utilizatorii de mouse. Pe 24ways.org, vă dezvăluim titlurile articolelor atunci când treceți peste linkurile din navigarea anterioară / următoare. Acest lucru a fost realizat prin crearea unui ::după pseudo-element care conține conținut generat provenit din valoarea unui date- atribut, cu o tranziție CSS aplicată pentru a-l aluneca în vizualizare pe hover. Vedeți o demonstrație.
18. Realizați animații simple pentru cadre cheie
Paul Lloyd, designer de interacțiuni The Guardian
Pe 24ways.org, am adăugat clapete de colț animate la rezumate, care s-au deschis la plimbare. Acest lucru a fost realizat prin combinarea @ cadrele cheie regula cu proprietatea de animație, modificând poziția unei imagini de fundal pentru a realiza animație bazată pe sprite. Trucul este să declarați numărul de cadre pe care le aveți în sprite-ul de animație cu pași () valoare. Vedeți o demonstrație.
19. Creați efecte 3D plutitoare cu umbre
Catherine Farman, dezvoltator Happy Cog
Un proiect recent a necesitat o fotografie de produs plutitoare cu o umbră rotundă dedesubt, creând un efect 3D de ieșire de pe ecran. Umbra folosește mai multe funcții CSS3: frontieră-rază transparență alfa și cutie-umbră. Funcționează bine pentru rețelele de produse, prezentarea imaginilor într-un erou al paginii de pornire sau pentru orice design capricios cu o îndoire skeuomorfă. Vedeți o demonstrație.
20. Actualizați elementele paginii folosind „: țintă”
Simon Madine, dezvoltator web senior HeRe
CSS nu este un limbaj de programare în sensul obișnuit, dar puteți face lucruri inteligente fără a reveni la JavaScript. De exemplu, :ţintă pseudo-clasa se aplică elementelor care sunt ținta unui link făcut clic.
Puteți utiliza acest lucru pentru a defini starea unei pagini, pentru a viza un părinte care conține o mulțime de elemente, iar linkurile dvs. devin un mijloc de a controla aspectul și aspectul tuturor copiilor cu un singur clic. Vedeți o demonstrație.
21. Oferiți feedback cu animații subtile
Neil Renicker, designer și dezvoltator
Pseudo-elemente CSS ::inainte de și ::după împreună cu tranzițiile CSS, pot permite animații încântătoare care oferă feedback subtil utilizatorilor mouse-ului. De exemplu, construiți o săgeată CSS într-un pseudo-element, aplicați o tranziție la pseudo-element (tranziție: toate .15s ușor de intrat;), apoi adăugați o modificare simplă a aspectului la :planare pseudo-clasă (cum ar fi modificarea marginea-sus). Vedeți o demonstrație.
22. Pregătește-te pentru „va anima”
Paul Lewis, coder și membru al echipei de relații cu dezvoltatorii Chrome
Dacă ați folosit -webkit-transform: translateZ (0) pentru a vă face magice paginile mai rapide, hack-ul, care în multe browsere creează pur și simplu un nou strat de compozitor, este înlocuit de va anima. În curând, veți putea spune browserului ce intenționați să modificați despre un element (poziția, dimensiunea, conținutul sau poziția de derulare a acestuia), iar browserul va aplica optimizarea corectă sub capotă. Mai multe informatii.
23. Umanizați câmpurile de intrare
Yaron Schoen, fondatorul Made For Humans
Adăugarea de animații rapide la elementele cu care utilizatorii interacționează face ca o interfață să se simtă mai puțin informatică. Cu câmpurile de introducere, încercați să puneți un apel de tranziție în interior, deci ori de câte ori îl focalizați sau îl focalizați, există o tranziție lină.
input, textarea {-moz-transition: all 0.2s easy-out; -o-tranziție: toate 0.2s ușurează-out; -webkit-tranziție: toate 0.2s ușurează-out; -ms-tranziție: toate 0.2s ușurează-out; tranziție: toate 0.2s ușurează-out;
24. Întrerupeți și redați animațiile CSS
Val Head, proiectant și consultant
Puteți „întrerupe” și „reda” animația CSS schimbând-o animație-joc-stare proprietate. Dacă o setați ca „întreruptă”, animația dvs. se oprește la loc, până când vă schimbați animație-joc-stare la alergare, de exemplu pe hover.
.animating_thing {animație: spin 10s liniar infinit; animație-joc-stare: întrerupt; }. animating_thing: hover {animation-play-state: running; }
25. Nu utilizați variabile CSS
Dave Shea, designer și autor
În cele din urmă obținem variabile CSS, de exemplu pentru a scrie o dată valoarea hexagonală a culorii și a o referi printr-o foaie de stil. Dar specificația oficială este detaliată, adaugă complexitate sintactică, oferă funcționalități copleșitoare și este în mare parte neacceptată de majoritatea browserelor. Într-o eră în care Sass este foarte popular și depășește variabilele cu o logică puternică de programare, cum ar fi funcțiile personalizate și declarațiile if / else, specificațiile oficiale sunt foarte scurte.
Sperăm că aceste sfaturi de top v-au reînnoit viziunea asupra CSS și posibilitățile pe care le reprezintă în dezvoltarea și designul web. Nu uitați să testați cu atenție oricare dintre aceste tehnici pentru a verifica suportul browserului înainte de a pune în funcțiune orice lucru.
Cuvinte: Craig Grannell Ilustrare: Mike Chipperfield
Acest articol a apărut inițial în revista nr 253.
