Sisu
- 01. Sobitage pildid saidi värvilahendustega
- 02. Jagage ruumi ühtlaselt ruudustiku viimases reas
- 03. Osakeste animatsioonide loomine box-shadow abil
- 04. Animeeri polüheedreid teisendustega
- 05. Master ’calc ()’ positsioneerimiseks
- 06. Muutke kastimudel mõistlikuks
- 07. Vertikaalselt keskel CSS-iga
- 08. Sihtige seotud objektide panka
- 09. Kontrollige sidekriipsu
- 10. Kasutage režiimide kirjutamise eeliseid
- 11. Kasutage gradiente ebaharilikul viisil
- 12. Kasutage linkidel stringi sobitamist
- 13. Pange FOUT enda jaoks tööle
- 14. Uurige taustade jaoks SVG-d
- 15. Keskendage kasutajad 3D-üleminekutega
- 16. Looge CSS-i ja matemaatikaga ümmargused menüüd
- 17. Animeerige linke hõljukil
- 18. Tehke lihtsaid võtmekaadri animatsioone
- 19. Looge varjudega ujuvad 3D-efektid
- 20. Uuendage lehe elemente, kasutades ’: target’
- 21. Andke tagasisidet peene animatsiooniga
- 22. Valmistuge „tahteelustamiseks“
- 23. Humaniseeri sisendväljad
- 24. Peatage ja esitage CSS-i animatsioone
- 25. Ärge kasutage CSS-i muutujaid
Mingil hetkel mis tahes tehnoloogiaga on tunne, et on tehtud peaaegu kõike, mida saab teha. Kui miski pole enam nii uus ja läikiv, siis huvi kahaneb ja tähelepanu pööratakse järgmisele suurele asjale. Seda on sageli juhtunud veebitööstuses, mis on kalduv enne või varem mõne tehnoloogia teatud aspekti pärast kohutavalt vaimustuma, viies selle argipäeva.
Kui CSS esimest korda ilmus, oli see revolutsiooniline ja aja jooksul on see arenenud, et disainerid saaksid luua paindlikke, rangelt kujundatud ja ilusaid veebilehtede paigutusi. Hiljuti on aga mitmelt poolt tulnud ettepanek, et CSS on väsinud ja võib-olla on aeg päikese käes möödas.
Ma tahan näidata, et CSS-i maailmas on endiselt palju põnevust ja elu, olgu selleks tipptasemel omadused, mida te pole võib-olla veel uurinud, või CSS-i aspekti kasutamine viisil, mida te varem ei mõelnud.
Siin on mõned näpunäited tööstuse tipp-CSS-i ekspertidelt.
(Märkus. Mõned selle funktsiooni tehnikad on tipptasemel ja neid ei pruugi kõigis brauserites täielikult toetada. Enne töö reaalseks muutmist testige põhjalikult ja veenduge, et varukoopiad on olemas.)
01. Sobitage pildid saidi värvilahendustega
Christopher Schmitt, konverentsi korraldaja
Konverentsidel on oma värvilahendused ja paljude kõnelejate puhul võib portreede haldamise töövoog olla keeruline. Filtrite käsitsi rakendamine ei laiene ja tugineb sellele, et teil on juurdepääs näiteks konkreetsele Photoshopi toimingule. Nüüd kasutan suure eraldusvõimega halltoonis PNG-sid ja lisan CSS-filtrite abil toone. See võimaldab mul sobitada mis tahes portree sündmuse skeemiga ja taaskasutada pilte mitmel teemal. Mul on vaja igaühele lihtsalt uut CSS-reeglit. Vaadake demot.
02. Jagage ruumi ühtlaselt ruudustiku viimases reas
Stephen Hay, disainer ja autor
Kui võrgus kuvatakse tundmatu arv üksusi, saate Flexboxi abil viimase rea ühtlaseks jaotamiseks. Nii et kui on ainult üks üksus, võtab see kogu rea; kui on kaks üksust, jagatakse rida pooleks jne. Vaadake demot.
03. Osakeste animatsioonide loomine box-shadow abil
Ana Tudor, kodeerija ja matemaatikafanaatik
Segades kast-vari Mõne matemaatika ja Sassi abil saate joonistada 2D kõveraid, jäljendada 3D-liikumist ja luua pööraseid osakeste animatsioone, mida kõik eksivad lõuendiks! Vaadake demot ja teist.
04. Animeeri polüheedreid teisendustega
Ana Tudor, kodeerija ja matemaatikafanaatik
Tõenäoliselt olete näinud puhtaid piiridega loodud CSS-i hulknurki, kuid meil on selles palju võimsam tööriist teisenema vara. Teisenduste aheldamine ja rakendamine pesastatud elementidel võimaldab meil luua kompleksseid hulknurki, millel on pilditaust või -piirid ja läbipaistev interjöör. 3D-teisenduste abil saame need 2D-kujundid kombineerida polüheedriteks ja panna tahked ained ühinema, lahti rulluma, plahvatama või rekombineeruma viisil, mida võib hõlpsasti eksitada WebGL-iga. Vaadake demot.
05. Master ’calc ()’ positsioneerimiseks
Ana Tudor, kodeerija ja matemaatikafanaatik
ma armastasin arvutama () sellest hetkest, kui selle avastasin. See on kasulik veeriste, polstrite või mõõtmete taltsutamiseks ning võib olla päästevahend, kui seda kasutatakse taustade positsioneerimiseks või suuruse määramiseks, gradientide sees või teisendamiseks ning kombineerituna mitte ainult samade vanade, vaid ka uute ja lahedate vaateava üksustega.
06. Muutke kastimudel mõistlikuks
Sawyer Hollenshead, Oak Studios dev ja disainer
Kasutage kasti suurus mõistuse säästmiseks. Ilma selleta ühendub määratletud laiusega 250 pikslit ja 25 piksust täites element 300 piksli laiuseks, muutes pikselite ja protsentide segamise raskeks. Koos kasti suurus:piirikast Äärised ja polstrid asetatakse selle asemel määratletud laiusesse.
07. Vertikaalselt keskel CSS-iga
Traveli Walton, Paraveli asutaja
Ajalooliselt on olnud keeruline CSS-iga midagi vertikaalselt tsentreerida, näiteks kui teil on kõrvuti asetseva tekstiga pilt, mida soovite vertikaalselt joondada. Trampimise ja sõimu asemel kasutage joondusprobleemide lahendamiseks Flexboxi. Vaadake demot.
08. Sihtige seotud objektide panka
Jonathan Smiley, Zurbi partner ja disaini juht
Raseerige CSS-joone kaal, kasutades klassinimedel ligikaudseid atribuutide valijaid, et sihtida seotud objektide suurt panka, selle asemel, et kinnitada igale klassile ühiseid atribuute. Näiteks ... [class * = "- block-grid-"] {} ... sihiksid järgmisi: .small-block-grid-3 .large-block-grid-5
09. Kontrollige sidekriipsu
Savid Storey, avatud veebikaitsja
Suunamine on trükituna enesestmõistetav ja mõned arendajad kasutavad seda sidekriipsud kinnisvara veebis, kuid vähesed teavad muid omadusi, mis pakuvad täpsemat kontrolli. Kui te pole ettevaatlik, saate sidekriipredelid, kus sidekriipse kasutatakse mitmel real. Üldine rusikareegel on kuni kaks järjestikku, mida saate kasutada sidekriipsu piirjooned. Samuti sidekriips-piir-tähemärgid võimaldab määrata sidekriipsutatava sõna minimaalse pikkuse koos minimaalse tähemärkide arvuga enne ja pärast sidekriipsu pausi.
10. Kasutage režiimide kirjutamise eeliseid
David Storey, avatud veebikaitsja
Kirjutusrežiimid võimaldavad teil määratleda suuna, milles tekst liigub. Osa Ida-Aasia tekstidest on kirjutatud vertikaalselt, jooned kasvavad paremalt vasakule, täpsustatud tähisega kirjutusrežiim: vertikaalne-rl (tb-rl IE-s). Vertikaalset teksti ei kasutata tegelikult Euroopa kirjutussüsteemides, kuid see võib olla tabelirubriikide jaoks mugav, kui horisontaalne ruum on piiratud.
11. Kasutage gradiente ebaharilikul viisil
Ruth John, disainer
Taustakalded võivad piiride ja täppidega kasutamisel suurepärased välja näha. Ma kasutan nii oma ajaveebis kui ka eeltöötlusprotsessoril saab taaskasutatud koodiga mixini helistada, et mitte seda käsitsi korrata. Ära mine hulluks, sest gradient võib olla protsessorirohke. SCSS-i loendikuulide segu:
@mixin gradedBullet ($ color) {background-image: linear-gradient (vasakul, heledamaks ($ color, 15%) 10px, $ color 11px, $ color 20px, tumedamaks ($ color, 15%) 21px, tumedamaks ($ color , 15%) 30 pikslit, läbipaistev 31 pikslit; }
12. Kasutage linkidel stringi sobitamist
Ruth John, disainer
Olen oma ajaveebis kasutanud sotsiaalse ikooni kujundamiseks CSS-i atribuutide valijaid stringide sobitamisega. Need ilmuvad kogu minu ajaveebis, mõnikord tekstiga ja mõnikord ilma, kuid alati ikooniga. Õige lingi kujundamiseks õige sotsiaalse ikooniga kasutan href ankurelemendi atribuut. ma kasutan *= seega href ankurelement peab sisaldama ainult minu määratud stringi.
/ * kõigi sotsiaalsete linkide jaoks * / .social a: enne {display: inline-block; polster paremal: 30px; font-family: ’FontAwesome’;} / * Iga konkreetne link * / .social a [href * = "twitter"]: enne {content: " f099"; värv: # 52ae9f;} .social a [href * = "github"]: enne {content: " f09b"; värv: # 5f2e44;} .social a [href * = "feed"]: enne {content: " f09e"; värv: # b47742;}
13. Pange FOUT enda jaoks tööle
Jason Pamental, H + W disaini juhataja
Veeb põhineb eeldusel, et see peaks sisu edastama, isegi kui brauser ei suuda blingi muuta. Aeglaselt laaditavad veebifondid võivad olla pettumust valmistavad, FOUT (Stilistimata teksti välk) on fondide allalaadimise ajal navigeerimise ja teksti tagasipöördumisena segane. Google ja Typekit annavad vastuse: veebifontide laadija. Süstides lehele klassid, lähtudes fontide laadimisolekust, saate nende klassidega varukoopiaid kujundada, et hoida minimaalne tagasivool, kõrvaldades ka WebKiti nähtamatu sisu sündroom. Vaadake demot.
14. Uurige taustade jaoks SVG-d
Emil Björklund, inUse veebiarendaja
Ainsad brauserid, millel pole praegu SVG-tuge, on IE8 ja uuemad versioonid ning Android 2 WebKit ning seega on SVG-i kasutamine CSS-i taustade jaoks teostatav, eriti koos PNG-i varulahendusega, näiteks Grunticon. SVG-i saab kujundada CSS ja SVG-st on huvitavaid CSS-i omadusi (filtreid!) Läbi viidud, mida saame HTML-ile rakendatuna mängida.
15. Keskendage kasutajad 3D-üleminekutega
Emil Björklund, inUse veebiarendaja
3D-teisenduste kasutamine ja z-mõõde kasutajaliideses võib olla tõepoolest kasulik, eriti sisu peitmiseks / kuvamiseks või ahendamiseks / laiendamiseks. Samuti on nendes olukordades üsna lihtne varundada 2D-üleminek või üldse mitte. See on ala, kus väike järk-järguline täiustamine võib kaugele jõuda.
16. Looge CSS-i ja matemaatikaga ümmargused menüüd
Sara Soueidan, esiosa arendaja
Ringmenüüd on mobiilirakendustes populaarsed ning CSS-i teisenduste ja üleminekute abil saate luua lihtsa ümmarguse menüü. Seda menüüd saab muuta ja kohandada, et luua ka üles- või allapoole avanev menüü. CSS-is pole otsest viisi üksuse diagonaalselt tõlkimiseks, kuid saate kasutada ringi raadiuse väärtust, millele soovite üksused paigutada, ja rakendada lihtsat matemaatilist reeglit horisontaalse ja vertikaalse tõlke väärtuste arvutamiseks, mis edastatakse tõlkidaX () ja tõlkimaY () funktsioone. Nii jõuate lõpuks a diagonaal tõlge, et liigutada menüüelemendid ringi õigesse kohta. Menüü sulgeva / avava klikiürituse saab käsitseda JavaScripti abil või võite teha ühe sammu edasi ja teil on ainult CSS-i menüü CSS-i märkeruudu häkkimise abil. Oma demos kasutan JavaScripti ja HTML5 classList API-d, mida kõik brauserid ei toeta, nii et selle toimimiseks peate demot vaatama kaasaegses brauseris või kommenteerima jQuery koodi, selle asemel, et kasutada classList API-d. kood.
Vaadake demot ja täielikku õpetust. CSS Checkboxi häkkimise näide.
17. Animeerige linke hõljukil
Paul Lloyd, The Guardiani suhtlusdisainer
Hõljutatud olekutele ei tohiks loota tegevuse toimimiseks või olulise teabe edastamiseks, kuid saate siiski hiirepõhiste kasutajate liideseid täiustada. Lehel 24ways.org avaldame artiklite pealkirjad, kui hõljutate kursorit eelmises / järgmises navigeerimisruumis linkide kohal. See saavutati a :: pärast loodud väärtusega pseudoelement pärineb a väärtusest andmed- atribuut, CSS-i ülemineku korral rakendatakse selle hõljumisel vaate libisemist. Vaadake demot.
18. Tehke lihtsaid võtmekaadri animatsioone
Paul Lloyd, The Guardiani suhtlusdisainer
Lehel 24ways.org lisasime kokkuvõtetele animeeritud nurgaklapid, mis hõljumisel avanesid. See tehti @ võtmeraamid reegel atribuudiga animatsioon, muutes taustapildi positsiooni, et saavutada sprite-põhine animatsioon. Trikk on deklareerida animatsioonis olevate kaadrite arv sammud() väärtus. Vaadake demot.
19. Looge varjudega ujuvad 3D-efektid
Catherine Farman, Happy Cogi arendaja
Värske projekti jaoks oli vaja ujuvat tootefotot, mille all on ümmargune vari, mis loob ekraanilt hüpates 3D-efekti. Varjus kasutatakse mitut CSS3 funktsiooni: piiri raadius alfa läbipaistvus ja kast-vari. See sobib hästi tootevõrkude jaoks, avalehe kangelase esitluspildi või mis tahes skeuomorfse painutusega kapriisse kujunduse jaoks. Vaadake demot.
20. Uuendage lehe elemente, kasutades ’: target’
Simon Madine, HeRe vanem veebiarendaja
CSS ei ole programmeerimiskeel tavapärases mõttes, kuid saate siiski nutikaid asju teha ilma JavaScripti juurde tagasi pöördumata. Näiteks : sihtmärk pseudoklassi rakendatakse elementidele, mis on klõpsatud lingi sihtmärk.
Selle abil saate määratleda lehe oleku, sihtida palju elemente sisaldavat vanemat ja teie lingid muutuvad kõigi laste välimuse ja kujunduse juhtimiseks ühe klõpsuga. Vaadake demot.
21. Andke tagasisidet peene animatsiooniga
Neil Renicker, disainer ja arendaja
CSS-i pseudoelemendid :: enne ja :: pärast koos CSS-i üleminekutega võimaldavad veetlevat animatsiooni, mis annab hiire kasutajatele peent tagasisidet. Näiteks ehitage CSS-nool pseudo-elemendi sisse, rakendage pseudo-elemendile üleminek (üleminek: kõik hõlpsalt sisse-välja .15 s;) ja seejärel lisage :hõljuma pseudoklass (näiteks muutmine marginaalne ülaosa). Vaadake demot.
22. Valmistuge „tahteelustamiseks“
Paul Lewis, kodeerija ja Chrome'i arendajate suhete meeskonna liige
Kui olete kasutanud -webkit-transform: tõlkidaZ (0) lehtede võluväel kiiremaks muutmiseks asendatakse häkkimine, mis paljudes brauserites loob lihtsalt uue helilooja kihi, tahe-elustama. Varsti saate brauserile öelda, mida kavatsete elemendi osas muuta (selle asendit, suurust, sisu või kerimisasendit) ja brauser rakendab kapoti all õige optimeerimise. Rohkem informatsiooni.
23. Humaniseeri sisendväljad
Yaron Schoen, Made For Humans asutaja
Kiireanimatsioonide lisamine elementidele, millega kasutajad suhtlevad, muudab liidese vähem arvutuslikuks. Sisestusväljadega proovige panna a üleminekukõne sees, nii et alati, kui fokuseerite või muudate selle, toimub sujuv üleminek.
sisend, textarea {-moz-üleminek: kõik 0,2-d hõlbustavad; -o-üleminek: kõik 0,2s hõlbustavad väljumist; -veebikomplekt-üleminek: kõik 0,2-d hõlbustavad; -ms-üleminek: kõik 0,2s hõlbustavad väljumist; üleminek: kõik 0,2s hõlbustavad väljumist;
24. Peatage ja esitage CSS-i animatsioone
Val juhataja, disainer ja konsultant
CSS-i animatsiooni saate selle peatamise ja peatamise abil muuta animatsioon-mäng-olek vara. Kui määrate selle peatatud olekuks, peatab see teie animatsiooni, kuni muudate seda animatsioon-mäng-olek kuni jooksmine, näiteks hõljukil.
.animating_thing {animation: spin 10s linear line infinite; animatsioon-mäng-olek: peatatud; }. animating_thing: hõljumine {animation-play-state: running; }
25. Ärge kasutage CSS-i muutujaid
Dave Shea, disainer ja autor
Lõpuks saame CSS-i muutujaid, näiteks kirjutame ühe korra värvi hex-väärtuse ja viidame sellele läbi stiililehe. Kuid ametlik spetsifikatsioon on mitmekülgne, lisab süntaktilist keerukust, pakub hädavajalikku funktsionaalsust ja enamik brausereid seda suures osas ei toeta. Ajastul, kus Sass on laialt populaarne ja ületab võimsa programmeerimisloogikaga muutujaid, näiteks kohandatud funktsioone ja if / else avaldusi, jõuab ametlik spetsifikatsioon kaugele.
Loodetavasti on need peamised näpunäited uuendanud teie vaadet CSS-ile ja võimalusi, mida see veebiarenduses ja -kujunduses esindab. Ärge unustage brauseri toe kontrollimiseks mõnda neist tehnikatest põhjalikult testida, enne kui tööle panete.
Sõnad: Craig Grannell Illustratsioon: Mike Chipperfield
See artikkel ilmus algselt ajakirja netonumbris 253.
