Nilalaman
- 01. Itugma ang mga imahe sa mga scheme ng kulay ng site
- 02. pantay na magbahagi ng puwang sa huling hilera ng isang grid
- 03. Lumikha ng mga maliit na animasyon na may box-shadow
- 04. Animate polyhedra na may mga pagbabago
- 05. Master 'calcul ()' para sa pagpoposisyon
- 06. Gawing matino ang modelo ng kahon na may 'box-sizing'
- 07. Patayo na nakasentro sa CSS
- 08. Mag-target ng isang bangko ng mga kaugnay na mga bagay
- 09. Kontrolin ang hyphenation
- 10. Samantalahin ang mga Mode ng pagsulat
- 11. Gumamit ng mga gradient sa hindi pangkaraniwang paraan
- 12. Gumamit ng string-Matching sa mga link
- 13. Gawin ang FOUT para sa iyo
- 14. Galugarin ang SVG para sa mga background
- 15. Ituon ang mga gumagamit sa mga paglilipat sa 3D
- 16. Lumikha ng mga pabilog na menu na may CSS at matematika
- 17. Pag-agawin ang mga link sa hover
- 18. Gumawa ng mga simpleng mga animasyon ng keyframe
- 19. Lumikha ng mga lumulutang na 3D na epekto na may mga anino
- 20. I-update ang pahina ng eleMents gamit ang ‘: target’
- 21. Magbigay ng feedback na may banayad na mga animasyon
- 22. Maghanda para sa 'will-animate'
- 23. Mga patlang ng pag-input ng humanise
- 24. I-pause at i-play ang mga animasyon na CSS
- 25. Huwag gumamit ng mga variable ng CSS
Sa ilang mga punto sa anumang teknolohiya, mayroong isang pakiramdam na halos anumang nagagawa ay nagawa na. Kapag ang isang bagay ay hindi na kasing bago at makintab, ang interes ay humupa at ang pansin ay iginuhit sa susunod na malaking bagay. Ito ay madalas na ang kaso sa industriya ng web, na kung saan ay madaling kapitan ng takot ng takot sa pamamagitan ng isang tiyak na aspeto ng teknolohiya bago, maaga o huli, relegating ito sa pangkaraniwan.
Nang unang lumitaw ang CSS, ito ay rebolusyonaryo, at sa paglipas ng panahon ay umunlad ito upang paganahin ang mga taga-disenyo na lumikha ng kakayahang umangkop, mahigpit na ginawa at magagandang mga layout ng web page. Gayunpaman, sa huli, mayroong mungkahi mula sa iba't ibang mga tirahan na ang CSS ay pagod at marahil ang oras nito sa araw ay nawala.
Nais kong ipakita na mayroon pa ring maraming kaguluhan at buhay sa mundo ng CSS, maging sa mga katangi-tanging katangian na maaaring hindi mo pa nasisiyasat, o sa pamamagitan ng paggamit ng isang aspeto ng CSS sa paraang hindi mo pa nasasaalang-alang dati.
Narito ang ilang mga tip mula sa ilan sa mga nangungunang dalubhasa sa industriya ng CSS.
(Tandaan: Ang ilang mga diskarte sa tampok na ito ay may katamtaman at maaaring hindi ganap na suportahan sa lahat ng mga browser. Masusing suriin at tiyakin na ang mga fallback ay bago ilagay ang anumang trabaho na live.)
01. Itugma ang mga imahe sa mga scheme ng kulay ng site
Christopher Schmitt, tagapag-ayos ng kumperensya
Ang mga kumperensya ay may sariling mga scheme ng kulay at, na may maraming mga nagsasalita, ang workflow para sa pamamahala ng mga larawan ay maaaring maging kumplikado. Ang manu-manong paglalapat ng mga filter ay hindi sukat at umaasa sa iyo na may access sa, halimbawa, isang tukoy na aksyon sa Photoshop. Gumagamit ako ngayon ng mataas na mga greyscale PNG at nagdaragdag ng mga tono gamit ang mga filter ng CSS. Nagbibigay-daan ito sa akin na maitugma ang anumang larawan sa iskema ng isang kaganapan, at upang magamit muli ang mga imahe sa maraming tema. Kailangan ko lang ng bagong panuntunan sa CSS para sa bawat isa. Tingnan ang isang demo.
02. pantay na magbahagi ng puwang sa huling hilera ng isang grid
Stephen Hay, taga-disenyo at may-akda
Kung mayroon kang hindi kilalang bilang ng mga item na ipapakita sa isang grid, maaari mong gamitin ang Flexbox upang hatiin nang pantay ang huling hilera. Kaya't kung may isang item lamang, aabutin ang buong hilera; kung mayroong dalawang mga item, ang hilera ay hahatiin sa kalahati, at iba pa. Tingnan ang isang demo.
03. Lumikha ng mga maliit na animasyon na may box-shadow
Si Ana Tudor, panatiko ng coder at matematika
Sa pamamagitan ng paghahalo box-shadow na may ilang mga matematika at Sass, maaari mong i-grap ang mga 2D curve, tularan ang 3D na paggalaw at lumikha ng mga nakatutuwang mga animasyong maliit na butil na magkakamali ang lahat para sa mga canvas! Tingnan ang isang demo, at iba pa.
04. Animate polyhedra na may mga pagbabago
Ana Tudor, panatiko ng coder at matematika
Marahil ay nakakita ka ng mga purong CSS polygon na nilikha na may mga hangganan, ngunit marami kaming napakalakas na tool sa magbago pag-aari Ang kadena at pag-apply ng mga pagbabago sa mga naka-salang elemento ay nagpapahintulot sa amin na lumikha ng mga kumplikadong polygon na may mga background na imahe o hangganan at mga transparent na interior. Gamit ang 3D transforms, maaari naming pagsamahin ang mga 2D na hugis na ito sa polyhedra at gawin ang mga solido na sumanib, magbukas, sumabog o muling pagsamahin sa isang paraang madaling napagkamalang WebGL. Tingnan ang isang demo.
05. Master 'calcul ()' para sa pagpoposisyon
Si Ana Tudor, panatiko ng coder at matematika
minahal ko cal () mula sa sandaling natuklasan ko ito. Kapaki-pakinabang ito para sa pag-taming ng mga margin, padding o sukat, at maaaring maging isang tagapagligtas kapag ginamit para sa pagpoposisyon o sukat ng mga background, sa loob ng gradients o pagbabago, at pinagsama hindi lamang sa parehong mga lumang yunit, kundi pati na rin ang bago at cool na mga viewport.
06. Gawing matino ang modelo ng kahon na may 'box-sizing'
Sawyer Hollenshead, dev at taga-disenyo ng Oak Studios
Gamitin box-siizing upang mai-save ang iyong katinuan. Kung wala ito, isang elemento na may tinukoy na lapad na 250px at 25px ng padding ay pinagsasama sa isang lapad na 300px, na ginagawang matigas ang paghahalo ng mga pixel at porsyento. Kasama si box-siizing:border-box ang mga hangganan at padding ay sa halip ay inilalagay sa loob ng tinukoy na lapad.
07. Patayo na nakasentro sa CSS
Trent Walton, tagapagtatag ng Paravel
Sa kasaysayan, naging mahirap na patayo nang patayo ang isang bagay sa CSS, tulad ng kung mayroon kang isang imahe na may katabing teksto na nais mong patayo nang patayo. Sa halip na stomping at sumpain, gumamit ng Flexbox upang harapin ang mga pagkakasundo sa pagkakasundo. Tingnan ang isang demo.
08. Mag-target ng isang bangko ng mga kaugnay na mga bagay
Jonathan Smiley, kasosyo sa Zurb at nangunguna sa disenyo
Mag-ahit ng timbang sa linya ng CSS sa pamamagitan ng paggamit ng tinatayang mga tagapili ng katangian sa mga pangalan ng klase, upang ma-target ang isang malaking bangko ng mga nauugnay na bagay, sa halip na ilakip ang mga karaniwang katangian sa bawat solong klase. Halimbawa ... [class * = "- block-grid-"] {} ... ay i-target ang mga gusto ng: .small-block-grid-3 .large-block-grid-5
09. Kontrolin ang hyphenation
Maligtas na Storey, bukas na tagapagtaguyod sa web
Ang hyphenation ay kinuha para sa ipinagkaloob sa pag-print, at ang ilang mga developer ay gumagamit ng mga gitling pag-aari online, ngunit iilan ang may kamalayan sa iba pang mga pag-aari na nagbibigay ng mas pinong kontrol. Kung hindi ka maingat, makakakuha ka ng mga hagdan sa hyphenation kung saan ginagamit ang mga gitling sa maraming linya. Ang isang pangkalahatang tuntunin ng hinlalaki ay hindi hihigit sa dalawa sa isang hilera, na maaari mong kontrolin ang paggamit mga linya ng hyphenate-limit-line. Gayundin, hyphenate-limit-chars nagbibigay-daan sa iyo upang tukuyin ang minimum na haba ng isang salita na ma-hyphenated, kasama ang minimum na bilang ng mga character bago at pagkatapos ng break ng hyphen.
10. Samantalahin ang mga Mode ng pagsulat
David Storey, bukas na tagapagtaguyod sa web
Pinapayagan ka ng mga mode sa pagsulat na tukuyin ang direksyon kung saan dumadaloy ang teksto. Ang ilang teksto sa Silangang Asya ay nakasulat nang patayo, mga linyang lumalaki mula kanan hanggang kaliwa, na tinukoy sa mode ng pagsulat: patayo-rl (tb-rl sa IE). Hindi talaga ginagamit ang vertikal na teksto sa mga sistema ng pagsulat ng Europa, ngunit maaaring maging madaling magamit para sa mga heading ng talahanayan kapag nalimitahan mo ang pahalang na espasyo.
11. Gumamit ng mga gradient sa hindi pangkaraniwang paraan
Ruth John, taga-disenyo
Ang mga gradient sa background ay maaaring magmukhang mahusay kapag ginamit sa mga hangganan at bala. Ginagamit ko ang pareho sa aking blog at sa isang preprocessor ay maaaring tumawag sa isang mixin gamit ang muling ginamit na code, upang hindi ito ulitin nang manu-mano. Huwag maging supercrazy dahil ang mga gradient ay maaaring maging mabigat sa processor. SCSS mixin para sa mga listahan ng bala:
@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. Gumamit ng string-Matching sa mga link
Ruth John, taga-disenyo
Sa aking blog, gumamit ako ng mga tagapili ng katangiang CSS na may pagtutugma ng string upang mai-istilo ang mga social icon. Lumilitaw ang mga ito sa buong blog ko, minsan may teksto at minsan wala, ngunit laging may isang icon. Upang mai-istilo ang tamang link gamit ang tamang panlipunang icon, gumagamit ako ng isang string match sa href katangian ng elemento ng anchor. gumagamit ako *= kaya ang href sa elemento ng anchor ay kailangang maglaman ng string na tinukoy ko.
/ * para sa lahat ng mga social link * / .social a: bago ang {display: inline-block; padding-kanan: 30px; font-family: ’FontAwesome’;} / * Ang bawat tukoy na link * / .social isang [href * = "twitter"]: bago ang {content: " f099"; kulay: # 52ae9f;} .social a [href * = "github"]: bago ang {content: " f09b"; kulay: # 5f2e44;} .social a [href * = "feed"]: bago ang {content: " f09e"; kulay: # b47742;}
13. Gawin ang FOUT para sa iyo
Jason Pamental, punong-guro sa disenyo ng H + W
Ang web ay itinayo sa premise dapat itong maghatid ng nilalaman, kahit na hindi ma-render ng browser ang bling. Ang mga mabagal na paglo-load na mga font ng web ay maaaring maging nakakabigo, FOUT (Flash Ng Hindi Tampok na Teksto) na nagkakagulo bilang pag-navigate at teksto ay sumasalamin habang nai-download ang mga font. Nagbibigay ang Google at Typekit ng isang sagot: ang web-font loader. Sa pamamagitan ng pag-inject ng mga klase sa isang pahina, batay sa katayuan ng paglo-load ng mga font, maaari mong istilo ang mga fallback sa mga klase na iyon upang mapanatili ang pinakamaliit, na tinatanggal din ang hindi nakikitang nilalaman ng WebKit na sindrom. Tingnan ang isang demo.
14. Galugarin ang SVG para sa mga background
Emil Björklund, gamitin ang web developer
Ang mga browser lamang ngayon na walang suporta sa SVG ay IE8 at mas mababa at Android 2 WebKit, at sa gayon ang paggamit ng SVG para sa mga background sa CSS ay magagawa, lalo na kasama ang isang PNG fallback solution, tulad ng Grunticon. Ang SVG ay maaaring mai-istilo ng CSS, at mayroong kagiliw-giliw na pagdurugo ng mga pag-aari ng CSS (mga filter!) Mula sa SVG na maaari nating i-play na inilalapat sa HTML.
15. Ituon ang mga gumagamit sa mga paglilipat sa 3D
Emil Björklund, gamitin ang web developer
Paggamit ng mga pagbabago sa 3D at paggamit ng z-sukat sa mga interface ng gumagamit ay maaaring maging talagang kapaki-pakinabang, kapansin-pansin para sa pagtatago / pagpapakita o pagbagsak / pagpapalawak ng nilalaman. Napakadali din na magkaroon ng isang fallback sa isang 2D paglipat, o walang paglipat sa lahat, sa mga sitwasyong iyon. Ito ay isang lugar kung saan ang isang maliit na progresibong pagpapahusay ay maaaring malayo.
16. Lumikha ng mga pabilog na menu na may CSS at matematika
Si Sara Soueidan, developer ng frontend
Ang mga pabilog na menu ay popular sa mga mobile app, at maaari mong gamitin ang mga pagbabago at pagbabago ng CSS upang lumikha ng isang simpleng pabilog na menu. Ang menu na ito ay maaaring mabago at ipasadya upang lumikha ng isang paitaas o pababang-pagbubukas na menu din. Walang direktang paraan sa CSS upang isalin ang isang item sa pahilis, ngunit maaari mong gamitin ang halaga ng radius ng bilog kung saan mo nais na iposisyon ang mga item, at maglapat ng isang simpleng panuntunan sa matematika upang makalkula ang pahalang at patayong mga halaga ng pagsasalin upang maipasa sa translateX () at translateY () pagpapaandar Sa ganoong paraan, nagtatapos ka sa a dayagonal pagsasalin upang ilipat ang mga item sa menu sa mga tamang posisyon sa bilog. Ang kaganapan sa pag-click na magsasara / magbubukas ng menu ay maaaring mapangasiwaan gamit ang JavaScript, o maaari mo itong gawin nang isang hakbang pa at magkaroon ng isang CSS-only na menu sa pamamagitan ng paggamit ng isang CSS checkbox hack. Sa aking demo, gumagamit ako ng JavaScript at ng HTML5 classList API, na hindi suportado sa lahat ng mga browser kaya kakailanganin mong tingnan ang demo sa isang modernong browser upang ito ay gumana, o ma-koment ang jQuery code sa halip na gamitin ang classList API code
Tingnan ang isang demo at buong tutorial. Halimbawa ng hack ng CSS Checkbox.
17. Pag-agawin ang mga link sa hover
Paul Lloyd, taga-disenyo ng pakikipag-ugnay ng The Guardian
Hindi dapat umasa ang mga estado ng hover upang gumana ang isang pagkilos o magbigay ng mahalagang impormasyon, ngunit maaari mo pa ring mapahusay ang mga interface para sa mga gumagamit na batay sa mouse. Sa 24ways.org, ipinapakita namin ang mga pamagat ng artikulo kapag nag-hover ka sa mga link sa nakaraang / susunod na nabigasyon. Nakamit ito sa pamamagitan ng paglikha ng a :: pagkatapos pseudo-element na naglalaman ng nabuong nilalaman na nagmula sa halaga ng a data- katangian, na may isang paglipat ng CSS na inilapat upang mai-slide ito sa view sa hover. Tingnan ang isang demo.
18. Gumawa ng mga simpleng mga animasyon ng keyframe
Paul Lloyd, taga-disenyo ng pakikipag-ugnay ng The Guardian
Sa 24ways.org, nagdagdag kami ng mga animated na sulok na flap sa mga buod, na binuksan sa pag-hover. Ginawa ito sa pamamagitan ng pagsasama-sama ng @keyframes mamuno sa pag-aari ng animasyon, binabago ang posisyon ng isang background na imahe upang makamit ang sprite-based na animasyon. Ang bilis ng kamay ay upang ideklara ang bilang ng mga frame na mayroon ka sa iyong animation sprite kasama ang mga hakbang () halaga Tingnan ang isang demo.
19. Lumikha ng mga lumulutang na 3D na epekto na may mga anino
Catherine Farman, developer ng Happy Cog
Ang isang kamakailang proyekto ay nangangailangan ng isang lumulutang larawan ng produkto na may isang bilog na anino sa ilalim, na lumilikha ng isang 3D na epekto ng pag-pop-off sa screen. Gumagamit ang anino ng maraming mga tampok sa CSS3: border-radius alpha transparency at box-shadow. Gumagana ito nang maayos para sa mga grid ng produkto, nagpapakita ng koleksyon ng imahe sa isang bayani ng homepage, o anumang disenyo na kakatwa na may baluktot na skeuomorphic. Tingnan ang isang demo.
20. I-update ang pahina ng eleMents gamit ang ‘: target’
Simon Madine, HeRe senior web developer
Ang CSS ay hindi isang wika sa pagprograma sa karaniwang kahulugan, ngunit makakagawa ka pa rin ng mga matalinong bagay nang hindi bumalik sa JavaScript. Halimbawa, ang : target Ang pseudo-class ay inilalapat sa mga elemento na target ng isang na-click na link.
Maaari mong gamitin ito upang tukuyin ang estado ng isang pahina, i-target ang isang magulang na naglalaman ng maraming mga elemento, at ang iyong mga link ay naging isang paraan upang makontrol ang hitsura at layout ng lahat ng mga bata sa isang solong pag-click. Tingnan ang isang demo.
21. Magbigay ng feedback na may banayad na mga animasyon
Neil Renicker, taga-disenyo at developer
Mga elementong pseudo ng CSS :: dati at :: pagkatapos kasama ang mga paglilipat ng CSS, maaaring paganahin ang kaaya-aya ng animasyon na nagbibigay ng banayad na feedback sa mga gumagamit ng mouse. Halimbawa, bumuo ng isang arrow ng CSS sa loob ng isang pseudo-element, maglagay ng paglipat sa pseudo-element (paglipat: lahat ng madali-in-out .15s;), at pagkatapos ay magdagdag ng isang simpleng pagbabago ng layout sa : pag-hover pseudo-class (tulad ng pag-amyenda margin-top). Tingnan ang isang demo.
22. Maghanda para sa 'will-animate'
Paul Lewis, coder at miyembro ng koponan ng mga relasyon ng developer ng Chrome
Kung nagamit mo na -webkit-transform: translateZ (0) upang gawing mas mabilis ang iyong mga pahina, ang pag-hack, na sa maraming mga browser ay lumilikha lamang ng isang bagong layer ng kompositor, ay pinalitan ng bubuhayin. Sa madaling panahon, masasabi mo sa browser kung ano ang plano mong baguhin tungkol sa isang elemento (posisyon, laki, nilalaman o scroll posisyon) at ilalapat ng browser ang tamang pag-optimize sa ilalim ng hood. Karagdagang informasiyon.
23. Mga patlang ng pag-input ng humanise
Yaron Schoen, Tagapagtatag ng Made For Humans
Ang pagdaragdag ng mabilis na mga animasyon sa mga elemento na nakikipag-ugnay ang mga gumagamit ay gumagawa ng isang interface na mas mababa sa computer. Sa mga field ng pag-input, subukang ilagay ang a tawag sa paglipat sa loob, kaya't tuwing ituon mo o isasaad ito, mayroong isang maayos na paglipat.
input, textarea {-moz-transition: lahat ng 0.2s madali-out; -o-paglipat: lahat ng 0.2s kadalian-out; -webkit-transition: lahat ng 0.2s madali-out; -ms-paglipat: lahat ng 0.2s kadalian-out; paglipat: lahat ng 0.2s madali-out;
24. I-pause at i-play ang mga animasyon na CSS
Val Head, taga-disenyo at consultant
Maaari mong 'i-pause' at 'i-play' ang CSS na animasyon sa pamamagitan ng pagbabago nito state-play-state pag-aari Ang pagtatakda nito sa 'naka-pause' ay hihinto ang iyong animasyon sa lugar, hanggang sa magbago ka state-play-state sa tumatakbo, halimbawa sa pag-hover.
.animating_thing {animasyon: paikutin ang 10s linear infinite; animation-play-state: naka-pause; }. animating_thing: mag-hover {animasyon-play-state: tumatakbo; }
25. Huwag gumamit ng mga variable ng CSS
Dave Shea, taga-disenyo at may-akda
Sa wakas nakakakuha kami ng mga variable ng CSS, halimbawa upang magsulat ng isang hex na halaga ng isang kulay minsan at sanggunian ito sa pamamagitan ng isang styleheet. Ngunit ang opisyal na spec ay verbose, nagdaragdag ng pagiging kumplikado ng syntactic, nag-aalok ng underwhelming na pagpapaandar, at higit sa lahat ay hindi sinusuportahan ng karamihan sa mga browser. Sa isang panahon kung saan ang Sass ay malawak na tanyag at lampas sa mga variable na may malakas na lohika sa programa tulad ng mga pasadyang pag-andar at kung / iba pang mga pahayag, ang opisyal na ispek ay lumapit sa malayo.
Inaasahan kong ang mga nangungunang tip na ito ay na-update ang iyong pagtingin sa CSS at ang mga posibilidad na kinakatawan nito sa pagbuo at disenyo ng web. Huwag kalimutang subukan ang anuman sa mga diskarteng ito nang lubusan upang suriin ang suporta ng browser bago mailagay nang live ang anumang trabaho.
Salita: Craig Grannell Paglalarawan: Mike Chipperfield
Ang artikulong ito ay orihinal na lumitaw sa net magazine na isyu 253.
