Obsah
- 01. Priraďte obrázky k farebným schémam stránok
- 02. Rovnomerne zdieľajte priestor v poslednom riadku mriežky
- 03. Vytvorte časticové animácie pomocou box-shadow
- 04. Animujte mnohosteny transformáciami
- 05. Master ‘calc ()‘ na určovanie polohy
- 06. Urobte model boxu príčetným pomocou možnosti „box-sizing“
- 07. Vertikálne na stred s CSS
- 08. Zacieľte na banku súvisiacich objektov
- 09. Kontrolné delenie slov
- 10. Využite výhody režimov písania
- 11. Prechody používajte neobvyklým spôsobom
- 12. Použite reťazcovú zhodu na odkazoch
- 13. Nech je za teba FOUT
- 14. Preskúmajte SVG pre pozadie
- 15. Zamerajte používateľov na 3D prechody
- 16. Vytvárajte kruhové ponuky pomocou CSS a matematiky
- 17. Animujte odkazy pri umiestnení kurzora myši
- 18. Vytvorte jednoduché animácie kľúčových snímok
- 19. Vytvárajte plávajúce 3D efekty pomocou tieňov
- 20. Aktualizujte prvky stránky pomocou reťazca „: target“
- 21. Poskytnite spätnú väzbu s jemnými animáciami
- 22. Pripravte sa na „bude animovať“
- 23. Humanizujte vstupné polia
- 24. Pozastavte a prehrajte animácie CSS
- 25. Nepoužívajte premenné CSS
V určitom okamihu pri akejkoľvek technológii existuje pocit, že sa urobilo skoro všetko, čo sa dá urobiť. Keď niečo už nie je také nové a lesklé, záujem opadne a pozornosť sa upriami na ďalšiu veľkú vec. Toto často platilo v prípade webového priemyslu, ktorý je náchylný na to, aby sa určitý aspekt technológie predtým, skôr či neskôr, degradoval na všednosť, a ktorý by bol z určitého aspektu technológie strašne vzrušený.
Keď sa CSS prvýkrát objavilo, bolo to revolučné a postupom času sa to vyvinulo, aby umožnilo návrhárom vytvárať flexibilné, presne vypracované a nádherné rozloženia webových stránok. Neskôr však z rôznych strán prišiel náznak, že CSS je unavený a možno jeho čas na slnku uplynul.
Chcem predviesť, že vo svete CSS stále existuje veľa vzrušenia a života, či už ide o špičkové vlastnosti, ktoré ste možno ešte neskúmali, alebo prostredníctvom použitia aspektu CSS spôsobom, ktorý by ste predtým neuvažovali.
Tu je niekoľko rád od najlepších odborníkov na CSS v odbore.
(Poznámka: Niektoré techniky v tejto funkcii sú špičkové a nemusia byť plne podporované vo všetkých prehliadačoch. Predtým, ako začnete pracovať, dôkladne vyskúšajte a overte, či sú k dispozícii záložné riešenia.)
01. Priraďte obrázky k farebným schémam stránok
Christopher Schmitt, organizátor konferencie
Konferencie majú svoje vlastné farebné schémy a s mnohými reproduktormi môže byť pracovný postup pri správe portrétov zložitý. Ručné použitie filtrov sa nezmení a spolieha sa na to, že budete mať prístup napríklad ku konkrétnej akcii Photoshopu. Teraz používam súbory PNG s vysokým rozlíšením v odtieňoch sivej a pridávam tóny pomocou filtrov CSS. To mi umožňuje priradiť akýkoľvek portrét k schéme udalosti a tiež opakovane použiť obrázky na rôzne témy. Potrebujem pre každé nové pravidlo CSS. Zobraziť ukážku.
02. Rovnomerne zdieľajte priestor v poslednom riadku mriežky
Stephen Hay, dizajnér a autor
Ak máte neznámy počet položiek, ktoré sa majú zobraziť v mriežke, môžete pomocou Flexboxu posledný riadok rozdeliť rovnomerne. Ak je teda iba jedna položka, zaberie celý riadok; ak sú dve položky, riadok sa rozdelí na polovicu atď. Zobraziť ukážku.
03. Vytvorte časticové animácie pomocou box-shadow
Ana Tudor, programátorka a matematička fanatička
Miešaním tieňový box s niektorými matematikami a Sassom môžete vytvárať grafy 2D kriviek, emulovať 3D pohyb a vytvárať šialené časticové animácie, ktoré si každý zamení za plátno! Pozrite si ukážku a ďalšie.
04. Animujte mnohosteny transformáciami
Ana Tudor, programátorka a matematička fanatička
Pravdepodobne ste už videli čisté polygóny CSS vytvorené s hranicami, ale v oveľa lepšom nástroji máme transformovať nehnuteľnosť. Reťazenie a použitie transformácií na vnorené prvky nám umožňuje vytvárať zložité polygóny s pozadím alebo okrajmi obrázkov a priehľadnými interiérmi. Pomocou 3D transformácií môžeme tieto 2D tvary skombinovať do mnohostenov a dosiahnuť, aby sa tuhé látky zlúčili, rozvinuli, explodovali alebo znovu skombinovali spôsobom, ktorý si ľahko pomýlia s WebGL. Zobraziť ukážku.
05. Master ‘calc ()‘ na určovanie polohy
Ana Tudor, programátorka a matematička fanatička
miloval som calc () od okamihu, keď som to objavil. Je to užitočné na skrotenie okrajov, výplne alebo rozmerov a môže byť životabudičom, keď sa použije na umiestnenie alebo zmenu veľkosti pozadia, vnútri prechodov alebo transformácií a nie je kombinované iba s rovnakými starými jednotkami, ale aj s novými a skvelými výrezmi.
06. Urobte model boxu príčetným pomocou možnosti „box-sizing“
Sawyer Hollenshead, vývojár a dizajnér spoločnosti Oak Studios
Použite box-sizing aby si zachránil zdravý rozum. Bez toho by sa prvok s definovanou šírkou 250px a 25px výplne skombinoval do šírky 300px, čo miešanie pixelov a percentuálnych podielov sťažilo. S veľkosť balenia:hraničný box okraje a výplň sú namiesto toho umiestnené v rámci definovanej šírky.
07. Vertikálne na stred s CSS
Trent Walton, zakladateľ spoločnosti Paravel
Historicky bolo ťažké vertikálne vycentrovať niečo pomocou CSS, napríklad ak máte obrázok so susedným textom, ktorý chcete vertikálne zarovnať. Namiesto dupania a preklínania použite Flexbox na riešenie problémov so zarovnaním. Zobraziť ukážku.
08. Zacieľte na banku súvisiacich objektov
Jonathan Smiley, Zurb partner a vedúci dizajnu
Oholte čiaru CSS pomocou približných selektorov atribútov v názvoch tried, aby ste zacielili na veľkú banku súvisiacich objektov, a nie priraďovaním spoločných atribútov ku každej jednej triede. Napríklad ... [class * = "- block-grid-"] {} ... by zacielilo na tieto súbory: .small-block-grid-3 .large-block-grid-5
09. Kontrolné delenie slov
Savid Storey, otvorený webový advokát
V tlači sa delenie slov považuje za samozrejmosť a niektorí vývojári používajú pomlčky online, ale málokto vie o ďalších vlastnostiach, ktoré poskytujú lepšiu kontrolu. Ak si nedáte pozor, zobrazia sa pomlčkové rebríky, kde sa spojovníky používajú vo viacerých riadkoch. Všeobecné pravidlo nie je väčšie ako dva po sebe, ktoré môžete ovládať pomocou pomlčka-limitné čiary. Tiež pomlčka-limit-znaky umožňuje určiť minimálnu dĺžku slova, ktoré bude rozdelené, spolu s minimálnym počtom znakov pred a za zlomkom pomlčky.
10. Využite výhody režimov písania
David Storey, otvorený webový advokát
Režimy písania vám umožňujú definovať smer, ktorým sa bude pohybovať text. Niektorý východoázijský text je písaný zvisle, riadky narastajúce sprava doľava, označené znakom režim zápisu: zvislý-rl (tb-rl v IE). Vertikálny text sa v európskych systémoch písania v skutočnosti nepoužíva, ale môže byť užitočný pre nadpisy tabuliek, ak máte obmedzený horizontálny priestor.
11. Prechody používajte neobvyklým spôsobom
Ruth John, návrhárka
Prechody pozadia môžu vyzerať skvele, ak sa používajú s okrajmi a guľkami. Používam ako na svojom blogu, tak s preprocesorom môžem zavolať mixin s opätovne použitým kódom, aby som ho neopakoval ručne. Nebuďte superblázni, pretože prechody môžu byť náročné na procesor. Mix SCSS pre zoznam odrážok:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, transparentný 31px); }
12. Použite reťazcovú zhodu na odkazoch
Ruth John, návrhárka
Na svojom blogu som použil selektory atribútov CSS s porovnávaním reťazcov na štýl sociálnych ikon. Zobrazujú sa v celom mojom blogu, niekedy s textom a niekedy bez, ale vždy s ikonou. Na vytvorenie správneho odkazu so správnou ikonou v sociálnej sieti používam na reťazci reťazcovú zhodu href atribút kotviaceho prvku. používam *= takže href na kotevnom prvku musí obsahovať iba reťazec, ktorý zadám.
/ * pre všetky sociálne odkazy * / .social a: before {display: inline-block; výplň vpravo: 30px; font-family: ‘FontAwesome‘;} / * Každý konkrétny odkaz * / .social a [href * = "twitter"]: pred {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: pred {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: pred {content: " f09e"; farba: # b47742;}
13. Nech je za teba FOUT
Jason Pamental, riaditeľ spoločnosti H + W design
Web je postavený na predpoklade, že by mal dodávať obsah, aj keď prehliadač nedokáže vykresliť ten znak. Pomaly sa načítavajúce webové písma môžu byť frustrujúce. FOUT (Flash Of Unstyled Text) sú nepríjemné ako navigácia a preformátovanie textu počas sťahovania písma. Google a Typekit poskytujú odpoveď: zavádzač webových fontov. Vkladaním tried na stránku na základe stavu načítania fontov môžete s týmito triedami navrhovať záložné riešenia, aby sa minimalizoval reflow a tiež sa odstránil syndróm „neviditeľného obsahu“ WebKit. Zobraziť ukážku.
14. Preskúmajte SVG pre pozadie
Emil Björklund, inUse web developer
Jediné prehľadávače, ktoré teraz nepodporujú SVG, sú IE8 a nižšie a Android 2 WebKit, takže je možné použiť SVG pre pozadie v CSS, najmä spolu s núdzovým riešením PNG, ako je Grunticon. SVG je možné štylizovať pomocou CSS a je tu zaujímavý presah vlastností CSS (filtrov!) Z SVG, s ktorými sa môžeme pohrať ako pri aplikácii na HTML.
15. Zamerajte používateľov na 3D prechody
Emil Björklund, inUse web developer
Používanie 3D transformácií a využitie z-rozmer v používateľských rozhraniach môžu byť skutočne užitočné, najmä na skrytie / zobrazenie alebo zbalenie / rozšírenie obsahu. V týchto situáciách je tiež celkom ľahké mať prechod na prechod 2D alebo vôbec žiadny. Je to oblasť, kde malé pokrokové vylepšenie môže prejsť dlhú cestu.
16. Vytvárajte kruhové ponuky pomocou CSS a matematiky
Sara Soueidan, frontendová vývojárka
Kruhové ponuky sú populárne v mobilných aplikáciách a pomocou transformácií a prechodov CSS môžete vytvoriť jednoduché kruhové menu. Toto menu je možné upraviť a prispôsobiť tak, aby sa vytvorilo aj menu otvárajúce sa smerom nahor alebo nadol. V CSS neexistuje žiadny priamy spôsob, ako preložiť položku diagonálne, ale môžete použiť hodnotu polomeru kruhu, na ktorý chcete položky umiestniť, a pomocou jednoduchého matematického pravidla vypočítať hodnoty vodorovného a zvislého prekladu, ktoré sa majú preniesť do translateX () a preložiťY () funkcie. Takto skončíte s uhlopriečka preklad na presun položiek ponuky do správnych pozícií v kruhu. Udalosť kliknutia, ktorá zavrie / otvorí ponuku, je možné spracovať pomocou JavaScriptu, alebo ju môžete posunúť o krok ďalej a pomocou začiarkavacieho políčka CSS mať ponuku iba pre CSS. Vo svojej ukážke používam JavaScript a HTML5 classList API, ktoré nie sú podporované vo všetkých prehliadačoch, takže aby ste fungovali, musíte si ukážku pozrieť v modernom prehliadači, alebo namiesto použitia classList API odkomentovať kód jQuery. kód.
Pozrite si ukážku a celý návod. Príklad hackingu CSS Checkbox.
17. Animujte odkazy pri umiestnení kurzora myši
Paul Lloyd, návrhár interakcie The Guardian
Na to, aby akcia fungovala alebo poskytovala dôležité informácie, by sa nemalo spoliehať, že pri umiestnení kurzora myši budete môcť vylepšiť rozhrania pre používateľov založených na myši. Na stránkach 24ways.org odhalíme názvy článkov, keď umiestnite kurzor myši na odkazy v predchádzajúcej / nasledujúcej navigácii. To sa dosiahlo vytvorením a :: po pseudoelement obsahujúci vygenerovaný obsah pochádzajúci z hodnoty a údaje- atribút, s aplikovaným prechodom CSS, aby sa mohol posunúť do pohľadu pri umiestnení kurzora myši. Zobraziť ukážku.
18. Vytvorte jednoduché animácie kľúčových snímok
Paul Lloyd, návrhár interakcie The Guardian
Na 24ways.org sme do súhrnov pridali animované rohové chlopne, ktoré sa otvorili pri umiestnení kurzora myši. Toto bolo urobené kombináciou @keyframes pravidlo s vlastnosťou animácie, ktorým sa mení pozícia obrázka na pozadí, aby sa dosiahla animácia založená na škriatkoch. Trik spočíva v deklarovaní počtu snímok, ktoré máte v animačnom sprite, pomocou kroky () hodnotu. Zobraziť ukážku.
19. Vytvárajte plávajúce 3D efekty pomocou tieňov
Catherine Farman, vývojárka Happy Cog
Nedávny projekt vyžadoval plávajúcu fotografiu produktu so zaobleným tieňom pod ním, čím sa vytvoril 3D efekt vyskakovania z obrazovky. Tieň využíva niekoľko funkcií CSS3: polomer hranice alfa priehľadnosť a tieňový box. Funguje dobre pre mriežky produktov, prezentáciu snímok v hrdinovi domovskej stránky alebo pre akýkoľvek náladový dizajn so skeomomorfným ohnutím. Zobraziť ukážku.
20. Aktualizujte prvky stránky pomocou reťazca „: target“
Simon Madine, senior webový vývojár HeRe
CSS nie je programovací jazyk v obvyklom zmysle, ale aj tak môžete robiť chytré veci bez toho, aby ste sa vrátili k JavaScriptu. Napríklad : cieľ pseudotrieda sa uplatňuje na prvky, ktoré sú cieľom klikaného odkazu.
Môžete to použiť na definovanie stavu stránky, zacielenie na rodiča obsahujúceho veľa prvkov a vaše odkazy sa stanú prostriedkom na kontrolu vzhľadu a rozloženia všetkých detí jediným kliknutím. Zobraziť ukážku.
21. Poskytnite spätnú väzbu s jemnými animáciami
Neil Renicker, dizajnér a vývojár
Pseudoelementy CSS :: predtým a :: po spolu s prechodmi CSS umožňuje príjemnú animáciu, ktorá poskytuje jemnú spätnú väzbu používateľom myši. Napríklad vytvorte šípku CSS v pseudoelemente, použite prechod na pseudoelement (prechod: všetko 0,15 s uľahčenia vstupu;) a potom pridajte do priečinka :vznášať sa pseudotrieda (napríklad zmena a doplnenie margin-top). Zobraziť ukážku.
22. Pripravte sa na „bude animovať“
Paul Lewis, člen vývojového tímu pre vzťahy s vývojármi a Chrome
Ak ste použili -webkit-transformácia: translateZ (0) aby sa vaše stránky magicky zrýchlili, hack, ktorý v mnohých prehliadačoch jednoducho vytvorí novú skladateľskú vrstvu, sa nahradí bude animovať. Čoskoro budete vedieť povedať prehliadaču, čo plánujete na prvku zmeniť (jeho pozícia, veľkosť, obsah alebo umiestnenie rolovania), a prehľadávač použije správnu optimalizáciu pod kapotou. Viac informácií.
23. Humanizujte vstupné polia
Yaron Schoen, zakladateľ Made For Humans
Pridaním rýchlych animácií k prvkom, s ktorými používatelia interagujú, sa rozhranie stane menej výpočtovým. So vstupnými poľami skúste vložiť a prechodné volanie vo vnútri, takže kedykoľvek ho zaostríte alebo rozostríte, dôjde k plynulému prechodu.
vstup, textova oblast {-moz-prechod: vsetko 0,2 s kludne; -o-prechod: uvoľnenie všetkých 0,2 s; -webkit-transition: všetkých 0,2 s uľahčenie; -ms-transition: všetkých 0,2 s uvoľnenie; prechod: uvoľnenie všetkých 0,2 s;
24. Pozastavte a prehrajte animácie CSS
Val Head, dizajnér a konzultant
Animáciu CSS môžete „pozastaviť“ a „prehrať“ jej zmenou stav animácie-prehrávania nehnuteľnosť. Nastavením na „pozastavené“ sa vaša animácia zastaví, kým nezmeníte stav animácie-prehrávania do bežiaci, napríklad pri vznášaní.
.animating_thing {animácia: točiť 10 s lineárne nekonečno; stav animácie-prehrávania: pozastavený; }. animating_thing: hover {animation-play-state: running; }
25. Nepoužívajte premenné CSS
Dave Shea, dizajnér a autor
Konečne dostávame premenné CSS, napríklad aby sme raz napísali hexadecimálnu hodnotu farby a odkazovali na ňu prostredníctvom šablóny štýlov. Oficiálna špecifikácia je ale podrobná, dodáva syntaktickú zložitosť, ponúka ohromujúcu funkčnosť a väčšina prehľadávačov ju väčšinou nepodporuje. V ére, kedy je Sass veľmi populárny a ide nad rámec premenných s výkonnou logikou programovania, ako sú vlastné funkcie a príkazy if / else, sú oficiálne technické parametre veľmi krátke.
Dúfajme, že tieto najlepšie tipy obnovili váš pohľad na CSS a možnosti, ktoré predstavuje pri vývoji a dizajne webu. Pred uvedením akejkoľvek práce do života nezabudnite dôkladne vyskúšať ktorúkoľvek z týchto techník a skontrolovať podporu prehliadača.
Slová: Craig Grannell Ilustrácia: Mike Chipperfield
Tento článok sa pôvodne objavil v čistom čísle časopisu 253.
