Përmbajtje
- 01. Përputhni imazhet me skemat e ngjyrave në sit
- 02. Ndani hapësirën në mënyrë të barabartë në rreshtin e fundit të një rrjeti
- 03. Krijoni animacione të grimcave me kuti-hije
- 04. Gjallëroni poliedrat me shndërrime
- 05. Master 'calc ()' për pozicionimin
- 06. Bëni modelin e kutisë të shëndetshëm me 'madhësinë e kutisë'
- 07. Vertikalisht qendër me CSS
- 08. Shënjestroni një bankë të objekteve të lidhura
- 09. Kontrolli i vizave lidhëse
- 10. Përfitoni nga shkrimi i Modaliteteve
- 11. Përdorni gradientët në mënyra të pazakonta
- 12. Përdorni vargun-Matching në lidhje
- 13. Bëni FOUT punë për ju
- 14. Eksploroni SVG për prejardhje
- 15. Përqendroni përdoruesit me kalime 3D
- 16. Krijoni menutë rrethore me CSS dhe matematikë
- 17. Lidhjet e gjalla në pezull
- 18. Bëni animacione të thjeshta të kornizave
- 19. Krijoni efekte 3D lundruese me hije
- 20. Përditësoni elementet e faqes duke përdorur ': target'
- 21. Siguroni reagime me animacione delikate
- 22. Përgatituni për 'do të gjallëroj'
- 23. Fushat e hyrjes në njerëzim
- 24. Ndalo dhe luaj animacionet CSS
- 25. Mos përdorni variablat CSS
Në një moment me çdo teknologji, ekziston një ndjenjë se pothuajse çdo gjë që mund të bëhet është bërë. Kur diçka nuk është më aq e re dhe me shkëlqim, interesi zbehet dhe vëmendja tërhiqet për gjënë tjetër të madhe. Kjo ka qenë shpesh rasti në industrinë e internetit, e cila është e prirur të entuziazmohet tmerrësisht nga një aspekt i caktuar i teknologjisë përpara, herët a vonë, duke e zbritur atë në këtë botë.
Kur CSS u shfaq për herë të parë, ajo ishte revolucionare dhe me kalimin e kohës ajo ka evoluar për të mundësuar krijuesit të krijojnë forma fleksibile, të hartuara fort dhe të bukura të faqeve të internetit. Megjithatë, vonë, ka pasur sugjerime nga lagje të ndryshme që CSS është e lodhur dhe mbase koha e saj në diell ka kaluar.
Unë dua të tregoj se ekziston ende mjaft entuziazëm dhe jetë në botën e CSS, qoftë kjo në pronat më të mira që mund të mos i keni eksploruar akoma, ose përmes përdorimit të një aspekti të CSS në një mënyrë që nuk e keni konsideruar më parë.
Këtu janë disa këshilla nga disa nga ekspertët kryesorë të industrisë CSS.
(Shënim: Disa teknika në këtë veçori janë të nivelit të lartë dhe mund të mos mbështeten plotësisht në të gjithë shfletuesit. Testojeni plotësisht dhe sigurohuni që kthimet prapa të ekzistojnë përpara se të bëni ndonjë punë të drejtpërdrejtë.)
01. Përputhni imazhet me skemat e ngjyrave në sit
Christopher Schmitt, organizator i konferencës
Konferencat kanë skemat e tyre të ngjyrave dhe, me shumë folës, rrjedha e punës për menaxhimin e portreteve mund të jetë komplekse. Zbatimi manual i filtrave nuk shkallëzohet dhe mbështetet tek ju që keni akses, të themi, në një veprim specifik të Photoshop. Tani përdor PNG me shkallë të lartë gri dhe shtoj tone duke përdorur filtra CSS. Kjo më mundëson që të përputh çdo portret me skemën e një ngjarjeje, dhe gjithashtu të ripërdor imazhet nëpër tema të shumëfishta. Thjesht më duhet një rregull i ri CSS për secilin. Shihni një demo.
02. Ndani hapësirën në mënyrë të barabartë në rreshtin e fundit të një rrjeti
Stephen Hay, dizajner dhe autor
Nëse keni një numër të panjohur të artikujve që do të shfaqen në një rrjet, mund të përdorni Flexbox për të ndarë në mënyrë të barabartë rreshtin e fundit. Pra, nëse ka vetëm një artikull, ai do të marrë të gjithë rreshtin; nëse ka dy artikuj, rreshti do të ndahet në gjysmë, dhe kështu me radhë. Shihni një demo.
03. Krijoni animacione të grimcave me kuti-hije
Ana Tudor, kodifikuese dhe fanatike e matematikës
Me përzierjen kuti-hije me disa matematika dhe Sass, ju mund të grafikoni lakoret 2D, të imitoni lëvizjen 3D dhe të krijoni animacione të çmendura me grimca, të gjithë do të gabojnë për ato të kanavacës! Shihni një demo dhe një tjetër.
04. Gjallëroni poliedrat me shndërrime
Ana Tudor, kodifikuese dhe fanatike e matematikës
Ju ndoshta keni parë shumëkëndësha të pastër CSS të krijuar me kufij, por ne kemi një mjet shumë më të fuqishëm në shndërroj pronë. Zinxhirimi dhe zbatimi i transformimeve në elementet e vendosura na lejon të krijojmë shumëkëndësha komplekse me sfond ose kufijtë e imazhit dhe të brendshme transparente. Duke përdorur transformimet 3D, ne mund t'i kombinojmë këto forma 2D në poliedra dhe t'i bëjmë trupat e ngurtë të bashkohen, të shpalosen, të shpërthejnë ose të kombinohen në një mënyrë të gabuar lehtë për WebGL. Shihni një demo.
05. Master 'calc ()' për pozicionimin
Ana Tudor, kodifikuese dhe fanatike e matematikës
E doja kalk () që nga momenti kur e zbulova. Usefulshtë i dobishëm për zbutjen e kufijve, mbushjeve ose dimensioneve dhe mund të jetë një shpëtues kur përdoret për pozicionimin ose madhësinë e sfondeve, brenda gradientëve ose transformimeve, dhe i kombinuar jo vetëm me të njëjtat njësi të vjetra, por edhe ato të reja dhe të freskëta të pamjes.
06. Bëni modelin e kutisë të shëndetshëm me 'madhësinë e kutisë'
Sawyer Hollenshead, devijues dhe dizajner i Oak Studios
Përdorni madhësia e kutive për të shpëtuar mendjen tuaj të shëndoshë. Pa të, një element me një gjerësi të përcaktuar prej 250 px dhe 25 px mbushje kombinohet në një gjerësi prej 300 px, duke e bërë pixelin dhe përqindjen e përzierjes të vështirë. Me madhësia e kutive:kuti kufiri kufijtë dhe mbushjet vendosen në vend në gjerësinë e përcaktuar.
07. Vertikalisht qendër me CSS
Trent Walton, themeluesi i Paravel
Historikisht, ka qenë e vështirë të përqendrosh vertikalisht diçka me CSS, të tilla si nëse ke një imazh me tekst ngjitur që dëshiron të rreshtohet vertikalisht. Në vend që të shkelni dhe mallkoni, përdorni Flexbox për t'u marrë me problemet e shtrirjes. Shihni një demo.
08. Shënjestroni një bankë të objekteve të lidhura
Jonathan Smiley, partneri i Zurb dhe udhëheqësi i dizajnit
Rruaj peshën e linjës CSS duke përdorur zgjedhësit e përafërt të atributeve në emrat e klasave, për të synuar një bankë të madhe të objekteve të lidhura, në vend që të bashkëngjitni atribute të zakonshme për secilën klasë të vetme. Për shembull ... [class * = "- block-grid-"] {} ... do të synonte llojet e mëposhtme të: .small-block-grid-3 .large-block-grid-5
09. Kontrolli i vizave lidhëse
Savid Storey, avokat i hapur në internet
Hyphenation merret si e mirëqenë në shtyp, dhe disa zhvillues përdorin vizat vizore pronë në internet, por pak janë në dijeni të pronave të tjera që ofrojnë kontroll më të mirë. Nëse nuk jeni të kujdesshëm, merrni shkallët e vizave kur vizat përdoren në shumë rreshta. Një rregull i përgjithshëm nuk është më shumë se dy me radhë, të cilin mund ta kontrolloni duke përdorur vijat e kufirit të vizatimit. Gjithashtu, karakteret e kufizimit të vizave ju mundëson të specifikoni gjatësinë minimale të një fjale që do të mbyllet, së bashku me numrin minimal të karaktereve para dhe pas ndërprerjes së vizave.
10. Përfitoni nga shkrimi i Modaliteteve
David Storey, avokat i hapur në internet
Modalitetet e shkrimit ju mundësojnë të përcaktoni drejtimin në të cilin rrjedh teksti. Disa tekst të Azisë Lindore janë shkruar vertikalisht, linjat që rriten nga e djathta në të majtë, të specifikuara me mënyra e të shkruarit: vertikale-rl (tb-rl në IE). Teksti vertikal nuk përdoret vërtet në sistemet evropiane të shkrimit, por mund të jetë i dobishëm për titujt e tabelave kur keni hapësirë të kufizuar horizontale.
11. Përdorni gradientët në mënyra të pazakonta
Ruth John, projektuese
Gradientët e sfondit mund të duken shumë mirë kur përdoren me bordura dhe plumba. Unë përdor të dy në blogun tim dhe me një para-përpunues mund të telefonoj një mixin me kodin e ripërdorur, në mënyrë që të mos e përsëris atë manualisht. Mos u bëni super të çmendur sepse gradientët mund të jenë të rëndë me procesorin. SCSS mixin për plumbat e listës:
@mixin gradedBullet ($ ngjyra) {sfondi-imazh: linear-gradient (majtas, zbardh ($ ngjyra, 15%) 10px, $ ngjyra 11px, $ ngjyra 20px, errësojë ($ ngjyra, 15%) 21px, errësojë ($ ngjyra , 15%) 30px, transparente 31px); }
12. Përdorni vargun-Matching në lidhje
Ruth John, projektuese
Në blogun tim, unë kam përdorur zgjedhësit e atributeve CSS me përputhjen e vargjeve për të stiluar ikonat sociale. Këto shfaqen në të gjithë blogun tim, herë me tekst dhe herë pa, por gjithmonë me një ikonë. Për të stiluar lidhjen e duhur me ikonën e saktë sociale, unë përdor një ndeshje vargu në href atribut i elementit të ankorimit. Unë përdor *= kështu href në elementin e ankorimit duhet të përmbajë vetëm vargun që specifikoj.
/ * për të gjitha lidhjet shoqërore * / .sociale a: para {shfaqjes: bllok-inline; mbushja djathtas: 30px; font-family: 'FontAwesome';} / * Çdo lidhje specifike * / .social a [href * = "twitter"]: para {përmbajtjes: " f099"; ngjyra: # 52ae9f;} .sociale a [href * = "github"]: para {përmbajtjes: " f09b"; ngjyra: # 5f2e44;} .sociale a [href * = "ushqim"]: para {përmbajtjes: " f09e"; ngjyra: # b47742;}
13. Bëni FOUT punë për ju
Jason Pamental, drejtori kryesor në dizajnin H + W
Rrjeti është i ndërtuar mbi premisën që duhet të japë përmbajtje, edhe nëse shfletuesi nuk mund ta bëjë skuqjen. Font-et me ngarkesë të ngadaltë mund të jenë zhgënjyese, FOUT (Blic i Tekstit të Pamundësuar) i paqartë pasi navigimi dhe teksti rimbushen gjatë shkarkimit të shkronjave. Google dhe Typekit japin një përgjigje: ngarkuesi i shkronjave në internet. Duke injektuar klasa në një faqe, bazuar në statusin e ngarkimit të shkronjave, ju mund të stiloni kthimet me ato klasa për të mbajtur reflow në minimum, duke zhdukur gjithashtu sindromën e 'përmbajtjes së padukshme' të WebKit. Shihni një demo.
14. Eksploroni SVG për prejardhje
Emil Björklund, inUse zhvillues uebi
Shfletuesit e vetëm tani pa mbështetjen e SVG janë IE8 dhe më poshtë dhe Android 2 WebKit, dhe kështu përdorimi i SVG për sfondet në CSS është i realizueshëm, veçanërisht së bashku me një zgjidhje tjetër PNG, të tilla si Grunticon. SVG mund të stilizohet nga CSS, dhe ka një rrjedhje interesante të vetive të CSS (filtra!) Nga SVG me të cilat mund të luajmë siç zbatohet në HTML.
15. Përqendroni përdoruesit me kalime 3D
Emil Björklund, inUse zhvillues uebi
Përdorimi i transformimeve 3D dhe përdorimi i dimensioni z në ndërfaqet e përdoruesit mund të jenë vërtet të dobishme, veçanërisht për fshehjen / shfaqjen ose shembjen e përmbajtjes. Alsoshtë gjithashtu mjaft e lehtë të kesh një rikthim në një tranzicion 2D, ose aspak tranzicion, në ato situata. Shtë një fushë ku një përmirësim i vogël progresiv mund të shkojë shumë larg.
16. Krijoni menutë rrethore me CSS dhe matematikë
Sara Soueidan, zhvilluese frontend
Menutë rrethore janë të njohura në aplikacionet për celularë dhe mund të përdorni transformime dhe kalime në CSS për të krijuar një menu të thjeshtë rrethore. Kjo meny mund të modifikohet dhe personalizohet për të krijuar gjithashtu një menu me hapje lart ose poshtë. Nuk ka asnjë mënyrë të drejtpërdrejtë në CSS për të përkthyer një artikull në mënyrë diagonale, por ju mund të përdorni vlerën e rrezes së rrethit në të cilën dëshironi të poziciononi artikujt dhe të zbatoni një rregull të thjeshtë matematikor për të llogaritur vlerat horizontale dhe vertikale të përkthimit që do të kalojnë në përkthejX () dhe përkthejY () funksione. Në atë mënyrë, ju përfundoni me një diagonale përkthim për të lëvizur artikujt e menusë në pozicionet e duhura në rreth. Ngjarja e klikimit që mbyll / hap menunë mund të trajtohet duke përdorur JavaScript, ose mund ta çosh një hap më tej dhe të kesh një menu vetëm CSS duke përdorur një kutim të kutisë së zgjedhjes CSS. Në demonstrimin tim, unë përdor JavaScript dhe HTML5 classList API, e cila nuk mbështetet në të gjithë shfletuesit, kështu që do t'ju duhet të shikoni demonstrimin në një shfletues modern për ta bërë atë të funksionojë, ose të heq komente nga kodi jQuery në vend që të përdorni API classList kodin
Shikoni një demonstrim dhe udhëzim të plotë. Shembull i kutisë së zgjedhjes së CSS.
17. Lidhjet e gjalla në pezull
Paul Lloyd, dizajner i ndërveprimit The Guardian
Shtetet e pezullimit nuk duhet të mbështeten për të bërë një veprim të efektshëm ose për të siguruar informacion të rëndësishëm, por përsëri mund të përmirësoni ndërfaqet për përdoruesit e bazuar në miun. Në 24ways.org, ne zbulojmë tituj artikujsh kur kaloni mbi lidhjet në navigimin e mëparshëm / të ardhshëm. Kjo u arrit duke krijuar një :: pas pseudo-element që përmban përmbajtje të gjeneruar me burim nga vlera e a të dhëna- atribut, me një tranzicion CSS të aplikuar për ta rrëshqitur në vështrim. Shihni një demo.
18. Bëni animacione të thjeshta të kornizave
Paul Lloyd, dizajner i ndërveprimit The Guardian
Në 24ways.org, ne shtuam përplasjet e animuara të qosheve, të cilat u hapën. Kjo u bë duke kombinuar @ keyframes rregulli me vetinë e animacionit, duke ndryshuar pozicionin e një imazhi sfondi për të arritur animacionin e bazuar në sprite. Qëllimi është të deklaroni numrin e kornizave që keni në animacionin tuaj me hapat () vlera Shihni një demo.
19. Krijoni efekte 3D lundruese me hije
Catherine Farman, zhvillues i Gëzuar Cog
Një projekt i fundit kërkoi një foto produkti lundrues me një hije të rrumbullakët poshtë, duke krijuar një efekt 3D të daljes nga ekrani. Hija përdor disa karakteristika CSS3: rrezja kufitare transparenca alfa dhe kuti-hije. Funksionon mirë për rrjetet e produkteve, paraqitjen e imazheve në një hero të faqes kryesore ose ndonjë dizajn të çuditshëm me një skemë skemë. Shihni një demo.
20. Përditësoni elementet e faqes duke përdorur ': target'
Simon Madine, zhvillues i vjetër i internetit në HeRe
CSS nuk është një gjuhë programimi në kuptimin e zakonshëm, por përsëri mund të bësh gjëra të zgjuara pa u rikthyer sërish në JavaScript. Për shembull, : shënjestra pseudo-klasa zbatohet për elementet që janë shënjestra e një lidhjeje të klikuar.
Ju mund ta përdorni këtë për të përcaktuar gjendjen e një faqeje, për të synuar një prind që përmban shumë elemente dhe lidhjet tuaja bëhen një mjet për të kontrolluar pamjen dhe paraqitjen e të gjithë fëmijëve me një klik të vetëm. Shihni një demo.
21. Siguroni reagime me animacione delikate
Neil Renicker, dizajner dhe zhvillues
Pseudo-elementet CSS :: para dhe :: pas së bashku me tranzicionet CSS, mund të mundësojnë një animacion të lezetshëm që siguron reagime delikate për përdoruesit e miut. Për shembull, ndërtoni një shigjetë CSS brenda një pseudo-elementi, aplikoni një tranzicion në pseudo-element (tranzicioni: të gjitha 15-tat lehtësuese;), dhe pastaj shtoni një ndryshim të thjeshtë të paraqitjes në : rri pezull pseudo-klasë (të tilla si ndryshimi margin-top) Shihni një demo.
22. Përgatituni për 'do të gjallëroj'
Paul Lewis, kodues dhe anëtar i ekipit të marrëdhënieve të zhvilluesve të Chrome
Nëse keni përdorur -vebkit-transformoj: translateZ (0) për t'i bërë faqet tuaja më shpejt, hak-u, i cili në shumë shfletues thjesht krijon një shtresë të re kompozitori, po zëvendësohet nga do-gjallëroj. Së shpejti, do të jeni në gjendje t'i tregoni shfletuesit atë që planifikoni të ndryshoni në lidhje me një element (pozicionin, madhësinë, përmbajtjen ose pozicionin e tij) dhe shfletuesi do të zbatojë optimizimin e duhur nën kapuç. Më shumë informacion.
23. Fushat e hyrjes në njerëzim
Yaron Schoen, themelues i Made For Humans
Shtimi i animacioneve të shpejta tek elementët me të cilët përdoruesit ndërveprojnë e bën një ndërfaqe të ndihet më pak e informatizuar. Me fushat e hyrjes, provoni të vendosni një thirrje tranzicioni brenda, kështu që sa herë që e përqendroni ose e përqendroni atë, ka një tranzicion të qetë.
input, textarea {-moz-tranzicioni: të gjitha 0.2-et lehtësohen; -o-tranzicioni: të gjitha 0.2s lehtësohen; -tranzicioni i faqeve të internetit: lehtësimi i të gjitha 0.2s; -ms-tranzicioni: të gjitha lehtësimet e 0.2-ve; tranzicioni: lehtësimi i të gjitha 0.2s;
24. Ndalo dhe luaj animacionet CSS
Val Shef, dizajner dhe konsulent
Ju mund të 'bëni pauzë' dhe 'të luani' animacionin CSS duke ndryshuar atë animacion-lojë-shtet pronë. Vendosja e tij në 'pauzë' ndalon animacionin tuaj në vend, derisa të ndryshoni animacion-lojë-shtet te duke vrapuar, për shembull në pezull.
.zotërimi_ çdo gjë {animacion: tjerr 10s lineare pafund; animacion-play-state: në pauzë; } animating_ Everything: rri pezull {animation-play-state: running; }
25. Mos përdorni variablat CSS
Dave Shea, dizajner dhe autor
Më në fund po marrim variabla CSS, për shembull për të shkruar një herë vlerën magji të një ngjyre dhe për ta referuar atë përmes një fletë stilesh. Por specifikimi zyrtar është i përpiktë, shton kompleksitetin sintaksor, ofron funksionalitet të dobët dhe është kryesisht i pambështetur nga shumica e shfletuesve. Në një epokë ku Sass është shumë i popullarizuar dhe shkon përtej variablave me logjikë të fuqishme programuese si funksionet e personalizuara dhe deklaratat nëse / tjetër, specifikimet zyrtare dalin shumë pak.
Shpresojmë se këto këshilla kryesore kanë rinovuar pikëpamjen tuaj për CSS dhe mundësitë që ajo përfaqëson në zhvillimin dhe krijimin e faqeve në internet. Mos harroni të provoni ndonjë prej këtyre teknikave tërësisht për të kontrolluar mbështetjen e shfletuesit para se të vendosni ndonjë punë të drejtpërdrejtë.
Fjalët: Craig Grannell Ilustrim: Mike Chipperfield
Ky artikull fillimisht u shfaq në numrin e revistës neto 253.
