Vsebina
- 01. Povežite slike z barvnimi shemami spletnega mesta
- 02. Enakomerno delite prostor v zadnji vrstici mreže
- 03. Ustvari animacije delcev s škatlo-senco
- 04. Animirajte poliedre s transformacijami
- 05. Master 'calc ()' za določanje položaja
- 06. Naj bo model škatle razumen s funkcijo "velikost škatle"
- 07. Navpično na sredini s CSS
- 08. Ciljajte na banko sorodnih predmetov
- 09. Nadzorna vezaj
- 10. Izkoristite pisanje načinov
- 11. Gradiente uporabljajte na nenavadne načine
- 12. Uporabite ujemanje nizov na povezavah
- 13. Naj vam FOUT dela
- 14. Raziščite SVG za ozadja
- 15. Usmerite uporabnike s 3D prehodi
- 16. Ustvarite krožne menije s CSS in matematiko
- 17. Animirajte povezave pri lebdenju
- 18. Naredite preproste animacije ključnih besed
- 19. Ustvarite plavajoče 3D učinke s sencami
- 20. Posodobite elemente strani z uporabo ': target'
- 21. Pošljite povratne informacije s subtilnimi animacijami
- 22. Pripravite se na „bo-animirano“
- 23. Humanizirajte vnosna polja
- 24. Začasno ustavite in predvajajte CSS animacije
- 25. Ne uporabljajte spremenljivk CSS
Na neki točki pri kateri koli tehnologiji obstaja občutek, da je narejeno skoraj vse, kar je mogoče storiti. Ko nekaj ni več tako novo in sijoče, zanimanje pojenja in pozornost pritegne naslednja velika stvar. To se je pogosto dogajalo v spletni industriji, ki se nagiba k temu, da se določen vidik tehnologije strašno navduši, preden ga prej ali slej spusti v vsakdanje življenje.
Ko se je CSS prvič pojavil, je bil revolucionaren in sčasoma se je razvil, da je oblikovalcem omogočil ustvarjanje prilagodljivih, tesno oblikovanih in lepih postavitev spletnih strani. Pozneje pa se iz različnih krajev pojavlja predlog, da je CSS utrujen in je morda čas na soncu že minil.
Želim predstaviti, da je v svetu CSS še vedno veliko razburjenja in življenja, ne glede na to, ali gre za vrhunske lastnosti, ki jih morda še niste raziskali, ali z uporabo vidika CSS na način, ki ga prej niste upoštevali.
Tu je nekaj nasvetov nekaterih najboljših strokovnjakov za CSS v tej panogi.
(Opomba: Nekatere tehnike v tej funkciji so najsodobnejše in morda niso v celoti podprte v vseh brskalnikih. Temeljito preizkusite in zagotovite, da so na voljo rezervni učinki, preden začnete delati v živo.)
01. Povežite slike z barvnimi shemami spletnega mesta
Christopher Schmitt, organizator konference
Konference imajo svoje barvne sheme in pri številnih zvočnikih je potek dela za upravljanje portretov lahko zapleten. Ročna uporaba filtrov se ne spreminja in se zanaša na to, da imate dostop do recimo določenega dejanja Photoshopa. Zdaj uporabljam PNG visoke ločljivosti v sivini in dodajam tone s filtri CSS. To mi omogoča, da poljuben portret prilagodim shemi dogodka in tudi ponovno uporabim slike v več temah. Za vsako rabim samo novo pravilo CSS. Oglejte si predstavitev.
02. Enakomerno delite prostor v zadnji vrstici mreže
Stephen Hay, oblikovalec in avtor
Če imate v mreži neznano število elementov, lahko s Flexboxom enakomerno razdelite zadnjo vrstico. Torej, če je samo en element, bo zasedel celo vrstico; če sta dva elementa, se vrstica razdeli na polovico itd. Oglejte si predstavitev.
03. Ustvari animacije delcev s škatlo-senco
Ana Tudor, šifrantka in fanatik matematike
Z mešanjem škatla-senca z nekaj matematike in Sass lahko grafično prikazujete 2D krivulje, posnemate 3D gibanje in ustvarjate nore animacije delcev, ki jih bodo vsi zamenjali za platnene! Oglejte si predstavitev in drugo.
04. Animirajte poliedre s transformacijami
Ana Tudor, šifrantka in fanatik matematike
Verjetno ste že videli čiste poligone CSS, ustvarjene z mejami, vendar imamo v njem veliko močnejše orodje preoblikovati lastnine. Veriženje in uporaba transformacij na ugnezdenih elementih nam omogoča, da ustvarimo zapletene poligone s slikovnimi ozadji ali obrobami in prozorno notranjostjo. Z uporabo 3D-pretvorb lahko te 2D-oblike združimo v poliedre in trdne snovi združimo, razgrnemo, eksplodiramo ali rekombiniramo na način, ki ga zlahka zamenjamo za WebGL. Oglejte si predstavitev.
05. Master 'calc ()' za določanje položaja
Ana Tudor, šifrantka in fanatik matematike
ljubil sem kalc () od trenutka, ko sem ga odkril. Uporabna je za ukrotitev robov, oblazinjenja ali dimenzij in je lahko rešilna bilka, kadar se uporablja za pozicioniranje ali določanje velikosti ozadij, znotraj prelivov ali preoblikovanj in v kombinaciji ne le z istimi starimi enotami, temveč tudi z novimi in hladnimi ogledi
06. Naj bo model škatle razumen s funkcijo "velikost škatle"
Sawyer Hollenshead, razvijalec in oblikovalec Oak Studios
Uporaba velikost škatle da shranite zdravo pamet. Brez njega se element z določeno širino 250 px in 25 px oblazinjenja združi na širino 300 px, zaradi česar so mešalne pike in odstotki težki. S velikost škatle:mejni okvir obrobe in oblazinjenja so namesto tega postavljeni znotraj določene širine.
07. Navpično na sredini s CSS
Trent Walton, ustanovitelj podjetja Paravel
V preteklosti je bilo težko navpično centrirati nekaj s CSS, na primer, če imate sliko s sosednjim besedilom, ki ga želite navpično poravnati. Namesto da tapkate in preklinjate, se s Flexboxom spopadite s težavami zaradi poravnave. Oglejte si predstavitev.
08. Ciljajte na banko sorodnih predmetov
Jonathan Smiley, partner iz Zurba in vodja oblikovanja
Obrišite težo vrstic CSS z uporabo približnih izbirnikov atributov na imenih razredov, da ciljate na veliko banko sorodnih predmetov, namesto da bi posameznemu razredu dodali skupne atribute. Na primer ... [class * = "- block-grid-"] {} ... bi ciljal na take: .small-block-grid-3 .large-block-grid-5
09. Nadzorna vezaj
Savid Storey, odprti spletni zagovornik
Razdeljevanje je tisk samoumevno in nekateri razvijalci uporabljajo vezaji lastnine na spletu, le redki pa poznajo druge lastnosti, ki omogočajo boljši nadzor. Če niste previdni, dobite lestve za vezaj, kjer se vezaji uporabljajo v več vrsticah. Splošno pravilo je največ dve zapored, ki ju lahko nadzirate z uporabo mejne črte hifenata. Prav tako hiphenate-limit-chars vam omogoča, da določite najmanjšo dolžino besede, ki bo vezana, skupaj z najmanjšim številom znakov pred in po vezaju na vezaj.
10. Izkoristite pisanje načinov
David Storey, odprti spletni zagovornik
Načini pisanja vam omogočajo, da določite smer, v katero teče besedilo. Nekaj vzhodnoazijskih besedil je napisanih navpično, vrstice rastejo od desne proti levi, podano z način pisanja: vertikalno-rl (tb-rl v IE). Navpično besedilo se v evropskih sistemih za pisanje v resnici ne uporablja, je pa lahko priročno za naslove tabel, če imate omejen vodoravni prostor.
11. Gradiente uporabljajte na nenavadne načine
Ruth John, oblikovalka
Prelivi ozadja so lahko videti čudovito, če se uporabljajo z obrobami in kroglami. Uporabljam tako v svojem spletnem dnevniku kot s predprocesorjem, da lahko pokličem kombinacijo z vnovično uporabljeno kodo, da je ne ponovim ročno. Ne bodite super nori, ker so lahko nagibi težki za procesor. Kombinacija SCSS za krogle s seznama:
@mixin gradedBullet ($ color) {slika-ozadja: linearni gradient (levo, posvetli ($ color, 15%) 10px, $ color 11px, $ color 20px, zatemni ($ color, 15%) 21px, potemni ($ color , 15%) 30 slikovnih pik, prozorno 31 slikovnih pik); }
12. Uporabite ujemanje nizov na povezavah
Ruth John, oblikovalka
V svojem blogu sem za oblikovanje družabnih ikon uporabil izbirnike atributov CSS z ujemanjem nizov. Te se pojavijo v celotnem mojem blogu, včasih z besedilom in včasih brez, vendar vedno z ikono. Za oblikovanje prave povezave s pravilno družabno ikono uporabim niz ujemanja na href atribut sidrnega elementa. jaz uporabljam *= torej href na sidrnem elementu mora vsebovati samo niz, ki sem ga navedel.
/ * za vse družabne povezave * / .social a: pred {display: inline-block; oblazinjenje desno: 30 slikovnih pik; družina pisav: ‘FontAwesome’;} / * Vsaka posebna povezava * / .social a [href * = "twitter"]: pred {content: " f099"; barva: # 52ae9f;} .social a [href * = "github"]: pred {content: " f09b"; barva: # 5f2e44;} .social a [href * = "feed"]: pred {content: " f09e"; barva: # b47742;}
13. Naj vam FOUT dela
Jason Pamental, vodja projekta H + W
Splet temelji na predpostavki, da bi moral zagotavljati vsebino, tudi če brskalnik ne more prikazati blinga. Počasno nalaganje spletnih pisav je lahko frustrirajoče, FOUT (Flash of Unstyled Text) se razburja, ker se navigacija in besedilo med prenašanjem pisav spreminjata. Google in Typekit ponujata odgovor: nalagalnik spletnih pisav. Z vbrizgavanjem razredov na stran, ki temeljijo na stanju nalaganja pisav, lahko s temi razredi oblikujete nadomestne datoteke, da zmanjšate preoblikovanje na najmanjšo možno mero, hkrati pa izkoreninite sindrom nevidne vsebine WebKita. Oglejte si predstavitev.
14. Raziščite SVG za ozadja
Emil Björklund, spletni razvijalec inUse
Edini brskalniki, ki zdaj ne podpirajo SVG, so IE8 in spodaj ter Android 2 WebKit, zato je uporaba SVG za ozadja v CSS izvedljiva, zlasti skupaj z nadomestno rešitvijo PNG, kot je Grunticon. SVG lahko oblikuje CSS in obstaja zanimiv pretok lastnosti CSS (filtri!) Iz SVG, s katerimi se lahko igramo, kot velja za HTML.
15. Usmerite uporabnike s 3D prehodi
Emil Björklund, spletni razvijalec inUse
Uporaba 3D transformacij in uporaba z-dimenzija v uporabniških vmesnikih je lahko resnično uporaben, zlasti za skrivanje / prikaz ali strnitev / razširitev vsebine. Prav tako je v takšnih situacijah enostavno dobiti nadomestni prehod na 2D ali pa sploh ne. To je področje, na katerem lahko malo napredujočih izboljšav močno prispeva.
16. Ustvarite krožne menije s CSS in matematiko
Sara Soueidan, razvojna sodelavka
Krožni meniji so priljubljeni v mobilnih aplikacijah, s pretvorbami in prehodi CSS pa lahko ustvarite preprost krožni meni. Ta meni lahko spremenite in prilagodite tako, da ustvarite tudi meni, ki se odpira navzgor ali navzdol. V CSS ni neposrednega načina za prevajanje elementa diagonalno, lahko pa uporabite vrednost polmera kroga, na katerega želite postaviti elemente, in uporabite preprosto matematično pravilo za izračun vodoravnih in navpičnih vrednosti prevajanja, ki jih želite prenesti na translateX () in translateY () funkcije. Tako boste na koncu dobili diagonalno prevod, da postavke menija premaknete na pravilna mesta v krogu. Dogodek klika, ki zapre / odpre meni, lahko obdelate z uporabo JavaScript, lahko pa naredite še en korak naprej in s pomočjo vdora v potrditveno polje CSS ustvarite meni samo za CSS. V svoji predstavitvi uporabljam JavaScript in HTML5 API API-ja classList, ki ni podprt v vseh brskalnikih, zato si boste morali predstavitev ogledati v sodobnem brskalniku, da bo deloval, ali razkomentirati kodo jQuery, namesto da uporabite API-je classList Koda.
Oglejte si predstavitev in celotno vadnico. Primer vdora v potrditveno polje CSS.
17. Animirajte povezave pri lebdenju
Paul Lloyd, oblikovalec interakcij The Guardian
Na države lebdenja se ne bi smeli zanašati, če bi dejanje delovalo ali ponujalo pomembne informacije, vendar lahko vseeno izboljšate vmesnike za uporabnike, ki temeljijo na miški. Na 24ways.org naslove člankov razkrijemo, ko se v prejšnji / naslednji navigaciji pomaknete nad povezave. To je bilo doseženo z ustvarjanjem :: po psevdo-element, ki vsebuje ustvarjeno vsebino, pridobljeno iz vrednosti a podatki- atribut, pri čemer je uporabljen prehod CSS, da se le-ta drsi v pogled ob lebdenju. Oglejte si predstavitev.
18. Naredite preproste animacije ključnih besed
Paul Lloyd, oblikovalec interakcij The Guardian
Na 24ways.org smo povzetkom dodali animirane vogalne zavihke, ki so se odprli ob lebdenju. To je bilo storjeno s kombiniranjem @keyframes pravilo z lastnostjo animacije, spreminja položaj slike v ozadju, da doseže animacijo na osnovi sprite. Trik je v tem, da število sličic, ki jih imate v svojem animacijskem spriteju, prijavite s koraki () vrednost. Oglejte si predstavitev.
19. Ustvarite plavajoče 3D učinke s sencami
Catherine Farman, razvijalec Happy Cog
Nedavni projekt je zahteval plavajočo fotografijo izdelka z okroglo senco spodaj, kar je ustvarilo 3D učinek, ki se pojavi na zaslonu. Senca uporablja več funkcij CSS3: meja-polmer alfa preglednost in škatla-senca. Dobro deluje pri mrežah izdelkov, predstavitvi posnetkov v junaku domače strani ali kateri koli muhast dizajn s skeuomorfnim upogibom. Oglejte si predstavitev.
20. Posodobite elemente strani z uporabo ': target'
Simon Madine, višji spletni razvijalec HeRe
CSS ni programski jezik v običajnem smislu, vendar lahko kljub temu počnete pametne stvari, ne da bi se vrnili v JavaScript. Na primer : tarča psevdo-razred se uporablja za elemente, ki so cilj kliknjene povezave.
To lahko uporabite za določanje stanja strani, ciljanje na starša, ki vsebuje veliko elementov, in vaše povezave postanejo sredstvo za nadzor videza in postavitve vseh podrejenih z enim samim klikom. Oglejte si predstavitev.
21. Pošljite povratne informacije s subtilnimi animacijami
Neil Renicker, oblikovalec in razvijalec
CSS psevdoelementi :: prej in :: po skupaj s prehodi CSS lahko omogoči čudovito animacijo, ki uporabnikom miške zagotavlja subtilne povratne informacije. Na primer, zgradite puščico CSS znotraj psevdoelementa, uporabite prehod na psevdoelement (prehod: vse enostavne. -15.) in nato v datoteko. dodajte preprosto spremembo postavitve : hover psevdorazred (kot je spreminjanje margin-top). Oglejte si predstavitev.
22. Pripravite se na „bo-animirano“
Paul Lewis, programer in član skupine za odnose z razvijalci za Chrome
Če ste uporabili -webkit-transform: translateZ (0) da bi vaše strani čarobno pospešili, kramp, ki v mnogih brskalnikih preprosto ustvari novo plast sestavljavca, nadomesti bo-animiral. Kmalu boste lahko brskalniku povedali, kaj nameravate spremeniti glede elementa (njegov položaj, velikost, vsebina ali položaj drsenja) in brskalnik bo pod pokrovom uporabil pravo optimizacijo. Več informacij.
23. Humanizirajte vnosna polja
Yaron Schoen, ustanovitelj Made For Humans
Če elementom, s katerimi uporabniki komunicirajo, dodate hitre animacije, se vmesnik počuti manj računalniško. Z vnosnimi polji poskusite vstaviti prehodni klic znotraj, tako da kadar koli ga izostriš ali izostriš, pride do gladkega prehoda.
vnos, besedilo {-moz-prehod: olajšanje vseh 0,2-ih; -o-prehod: sprostitev vseh 0,2-ih; -webkit-prehod: sprostitev vseh 0,2-ih; -ms-prehod: olajšanje vseh 0,2-ih; prehod: sprostitev vseh 0,2 s;
24. Začasno ustavite in predvajajte CSS animacije
Val Head, oblikovalec in svetovalec
Animacijo CSS lahko zaustavite in predvajate tako, da jo spremenite animacija-igra-stanje lastnine. Če jo nastavite na 'zaustavljeno', se animacija ustavi, dokler se ne spremenite animacija-igra-stanje do teče, na primer pri lebdenju.
.animating_thing {animacija: spin 10s linearno neskončno; animacija-igra-stanje: zaustavljeno; }. animating_thing: hover {animacija-igra-stanje: tek; }
25. Ne uporabljajte spremenljivk CSS
Dave Shea, oblikovalec in avtor
Končno dobimo spremenljivke CSS, na primer, da enkrat napišemo šestnajstiško vrednost barve in se sklicujemo na tabelo s slogi. Toda uradna specifikacija je podrobna, doda sintaksično zapletenost, ponuja izjemno funkcionalnost in je v večini brskalnikov ne podpira. V dobi, ko je Sass zelo priljubljen in presega spremenljivke z zmogljivo programsko logiko, kot so funkcije po meri in stavki if / else, je uradna specifikacija daleč kratka.
Upamo, da so ti vrhunski nasveti prenovili vaš pogled na CSS in možnosti, ki jih predstavlja pri spletnem razvoju in oblikovanju. Ne pozabite temeljito preizkusiti nobene od teh tehnik, da preverite podporo brskalnika, preden začnete delati v živo.
Besede: Craig Grannell Ilustracija: Mike Chipperfield
Ta članek je bil prvotno objavljen v številki 253 revije net.
