Obsah
- 01. Přiřaďte obrázky k barevným schémat stránek
- 02. Rovnoměrně sdílejte prostor v poslední řadě mřížky
- 03. Vytvářejte částicové animace pomocí box-shadow
- 04. Animujte mnohostěny transformacemi
- 05. Master ‘calc ()‘ pro určování polohy
- 06. Make the box model sane with ‘box-sizing‘
- 07. Svisle na střed s CSS
- 08. Zaměřte banku souvisejících objektů
- 09. Kontrolní dělení slov
- 10. Využijte výhod režimů psaní
- 11. Přechody používejte neobvyklým způsobem
- 12. Použijte řetězec-shoda na odkazy
- 13. Nechte FOUT pracovat za vás
- 14. Prozkoumejte SVG pro pozadí
- 15. Zaměřte uživatele na 3D přechody
- 16. Vytvořte kruhové nabídky pomocí CSS a matematiky
- 17. Animujte odkazy při najetí myší
- 18. Vytvořte jednoduché animace klíčových snímků
- 19. Vytvořte plovoucí 3D efekty se stíny
- 20. Aktualizujte prvky stránky pomocí „: cíl“
- 21. Poskytněte zpětnou vazbu s jemnými animacemi
- 22. Připravte se na „bude animovat“
- 23. Humanizujte vstupní pole
- 24. Pozastavte a přehrajte CSS animace
- 25. Nepoužívejte proměnné CSS
V určitém okamžiku s jakoukoli technologií existuje pocit, že bylo provedeno téměř všechno, co lze udělat. Když už něco není tak nové a lesklé, zájem opadne a pozornost se upoutá na další velkou věc. To se často stalo v případě webového průmyslu, který je náchylný k tomu, aby ho určitý aspekt technologie strašně vzrušil, než jej dříve či později odsunul na svět.
Když se CSS poprvé objevilo, bylo revoluční a postupem času se vyvinulo, aby umožnilo návrhářům vytvářet flexibilní, pečlivě vytvořené a krásné rozvržení webových stránek. Později však z různých stran zazněl názor, že CSS je unavený a možná jeho čas na slunci již uplynul.
Chci předvést, že ve světě CSS stále existuje spousta vzrušení a života, ať už jde o špičkové vlastnosti, které jste možná ještě neprozkoumali, nebo prostřednictvím použití aspektu CSS způsobem, který jste dříve neuvažovali.
Zde je několik tipů od nejlepších odborníků na CSS v oboru.
(Poznámka: Některé techniky v této funkci jsou špičkové a nemusí být plně podporovány ve všech prohlížečích. Než provedete jakoukoli práci, důkladně otestujte a ověřte, zda jsou k dispozici záložní řešení.)
01. Přiřaďte obrázky k barevným schémat stránek
Christopher Schmitt, organizátor konference
Konference mají vlastní barevná schémata a s mnoha reproduktory může být pracovní postup pro správu portrétů složitý. Ruční použití filtrů se nemění a spoléhá na to, že máte přístup například ke konkrétní akci Photoshopu. Nyní používám PNG s vysokým rozlišením ve stupních šedi a přidávám tóny pomocí filtrů CSS. To mi umožňuje přiřadit libovolný portrét k schématu události a také znovu použít obrázky napříč více tématy. Potřebuji pro každé nové pravidlo CSS. Podívejte se na ukázku.
02. Rovnoměrně sdílejte prostor v poslední řadě mřížky
Stephen Hay, designér a autor
Pokud máte neznámý počet položek, které se mají zobrazit v mřížce, můžete pomocí Flexboxu rozdělit poslední řádek rovnoměrně. Pokud tedy existuje pouze jedna položka, zabírá celý řádek; pokud existují dvě položky, bude řádek rozdělen na polovinu atd. Podívejte se na ukázku.
03. Vytvářejte částicové animace pomocí box-shadow
Ana Tudor, programátorka a matematička fanatička
Mícháním stín stínu s nějakou matematikou a Sassem můžete vytvářet grafy 2D křivek, emulovat 3D pohyb a vytvářet šílené částicové animace, které si každý bude mýlit s plátěnými! Podívejte se na ukázku a další.
04. Animujte mnohostěny transformacemi
Ana Tudor, programátorka a matematička fanatička
Pravděpodobně jste již viděli čisté polygony CSS vytvořené s ohraničením, ale v této oblasti máme mnohem výkonnější nástroj přeměnit vlastnictví. Řetězení a použití transformací na vnořené prvky nám umožňuje vytvářet složité polygony s pozadím nebo okraji obrazu a průhlednými interiéry. Pomocí 3D transformací můžeme tyto 2D tvary kombinovat do mnohostěnů a zajistit, aby se tělesa sloučila, rozložila, explodovala nebo znovu zkombinovala způsobem, který lze snadno zaměnit za WebGL. Podívejte se na ukázku.
05. Master ‘calc ()‘ pro určování polohy
Ana Tudor, programátorka a matematička fanatička
miloval jsem calc () od chvíle, kdy jsem to objevil. Je to užitečné pro zkrocení okrajů, výplně nebo rozměrů a může být záchranářem, když se použije pro umístění nebo změnu velikosti pozadí, uvnitř přechodů nebo transformací a v kombinaci nejen se stejnými starými jednotkami, ale také s novými a skvělými výřezy.
06. Make the box model sane with ‘box-sizing‘
Sawyer Hollenshead, vývojář a designér Oak Studios
Použití velikost krabice zachránit svůj rozum. Bez něj se prvek s definovanou šířkou 250px a 25px výplně spojí do šířky 300px, což znesnadní míchání pixelů a procent. S velikost krabice:rámeček okraje a výplň jsou místo toho umístěny v definované šířce.
07. Svisle na střed s CSS
Trent Walton, zakladatel Paravel
Historicky bylo těžké něco vertikálně vycentrovat pomocí CSS, například pokud máte obrázek se sousedním textem, který chcete svisle zarovnat. Místo dupání a proklínání použijte Flexbox k řešení problémů se zarovnáním. Podívejte se na ukázku.
08. Zaměřte banku souvisejících objektů
Jonathan Smiley, Zurb partner a vedoucí designu
Oholte tloušťku čáry CSS pomocí přibližných selektorů atributů na názvech tříd, abyste namířili větší banku souvisejících objektů, než připojujete společné atributy ke každé jednotlivé třídě. Například ... [class * = "- block-grid-"] {} ... by cílilo na: .small-block-grid-3 .large-block-grid-5
09. Kontrolní dělení slov
Savid Storey, otevřený webový obhájce
Dělení slov je v tisku považováno za samozřejmost a někteří vývojáři používají pomlčky vlastnost online, ale jen málo z nich ví o dalších vlastnostech, které poskytují jemnější kontrolu. Pokud si nedáte pozor, zobrazí se dělící žebříky, kde se spojovníky používají na více řádcích. Obecným pravidlem není více než dvě za sebou, která můžete ovládat pomocí pomlčka-mezní čáry. Taky, hyphenate-limit-chars umožňuje určit minimální délku slova, které bude rozděleno, spolu s minimálním počtem znaků před a po přerušení pomlčky.
10. Využijte výhod režimů psaní
David Storey, otevřený webový obhájce
Režimy psaní umožňují definovat směr, kterým text proudí. Část východoasijského textu je psána svisle, řádky rostou zprava doleva a jsou označeny režim psaní: vertikální-rl (tb-rl v IE). Svislý text se v evropských systémech psaní opravdu nepoužívá, ale může se hodit pro nadpisy tabulek, pokud máte omezený vodorovný prostor.
11. Přechody používejte neobvyklým způsobem
Ruth John, návrhářka
Přechody na pozadí mohou vypadat skvěle, pokud jsou použity s okraji a odrážkami. Používám jak na svém blogu, tak s preprocesorem mohu volat mixin s znovu použitým kódem, aby se to neopakovalo ručně. Nenechte se bláznit, protože přechody mohou být náročné na procesor. Mix SCSS pro seznam odrážek:
@mixin gradedBullet ($ color) {obrázek pozadí: lineární gradient (vlevo, zesvětlit ($ color, 15%) 10px, $ color 11px, $ color 20px, ztmavit ($ color, 15%) 21px, ztmavit ($ color , 15%) 30px, transparentní 31px); }
12. Použijte řetězec-shoda na odkazy
Ruth John, návrhářka
Na svém blogu jsem použil selektory atributů CSS s porovnáváním řetězců ke stylu sociálních ikon. Ty se objevují v celém mém blogu, někdy s textem a někdy bez, ale vždy s ikonou. Pro stylování správného odkazu se správnou sociální ikonou používám shodu řetězce na href atribut kotevního prvku. používám *= takže href na kotevním prvku musí obsahovat pouze řetězec, který zadám.
/ * pro všechny sociální odkazy * / .social a: before {display: inline-block; výplň vpravo: 30px; font-family: ‘FontAwesome‘;} / * Každý konkrétní odkaz * / .social a [href * = "twitter"]: před {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: před {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: před {content: " f09e"; barva: # b47742;}
13. Nechte FOUT pracovat za vás
Jason Pamental, ředitel společnosti H + W design
Web je postaven na předpokladu, že by měl poskytovat obsah, i když prohlížeč nedokáže vykreslit ten bling. Pomalu se načítající webová písma mohou být frustrující, FOUT (Flash Of Unstyled Text) nepříjemné jako navigace a přeformátování textu při stahování písem. Google a Typekit poskytují odpověď: zavaděč webových písem. Vložením tříd na stránku, na základě stavu načítání písem, můžete pomocí těchto tříd vytvořit záložní záložky, abyste udrželi reflow na minimu a také vymýtili syndrom „neviditelného obsahu“ WebKit. Podívejte se na ukázku.
14. Prozkoumejte SVG pro pozadí
Emil Björklund, inUse web developer
Jediné prohlížeče, které nyní nepodporují SVG, jsou IE8 a nižší a Android 2 WebKit, takže je možné použít SVG pro pozadí v CSS, zejména spolu s záložním řešením PNG, jako je Grunticon. SVG lze stylovat pomocí CSS a je zde zajímavé propouštění vlastností CSS (filtrů!) Z SVG, se kterými můžeme hrát při aplikaci na HTML.
15. Zaměřte uživatele na 3D přechody
Emil Björklund, inUse webový vývojář
Využití 3D transformací a využití z-rozměr v uživatelských rozhraních mohou být opravdu užitečné, zejména pro skrytí / zobrazení nebo sbalení / rozšíření obsahu. V těchto situacích je také docela snadné mít přechod k 2D přechodu nebo vůbec žádný přechod. Je to oblast, kde malé progresivní vylepšení může jít dlouhou cestu.
16. Vytvořte kruhové nabídky pomocí CSS a matematiky
Sara Soueidan, frontendová vývojářka
Kruhové nabídky jsou populární v mobilních aplikacích a pomocí transformací a přechodů CSS můžete vytvořit jednoduché kruhové menu. Tuto nabídku lze upravit a přizpůsobit tak, aby se vytvořilo také otevírání nahoru nebo dolů. V CSS neexistuje žádný přímý způsob, jak překládat položku diagonálně, ale můžete použít hodnotu poloměru kruhu, na který chcete umístit položky, a použít jednoduché matematické pravidlo pro výpočet vodorovných a svislých hodnot překladu, které se mají předat translateX () a přeložitY () funkce. Tímto způsobem skončíte s úhlopříčka překlad k přesunutí položek nabídky do správných pozic v kruhu. Událost kliknutí, která zavírá / otevírá nabídku, lze zpracovat pomocí JavaScriptu, nebo ji můžete posunout o krok dále a mít nabídku pouze pro CSS pomocí zaškrtávacího políčka CSS. V mém demu používám JavaScript a HTML5 classList API, které není podporováno ve všech prohlížečích, takže budete muset zobrazit demo v moderním prohlížeči, aby to fungovalo, nebo odkomentovat jQuery kód namísto použití classList API kód.
Podívejte se na ukázku a úplný návod. Příklad hackingu CSS Checkbox.
17. Animujte odkazy při najetí myší
Paul Lloyd, návrhář interakce The Guardian
Na stavy kurzoru byste se neměli spoléhat, aby akce fungovala nebo poskytla důležité informace, ale stále můžete vylepšovat rozhraní pro uživatele založené na myši. Na webu 24ways.org odhalujeme názvy článků, když umístíte kurzor na odkazy v předchozí / následující navigaci. Toho bylo dosaženo vytvořením ::po pseudoelement obsahující generovaný obsah získaný z hodnoty a data- atribut, s přechodem CSS použitým k tomu, aby se sklouzl do pohledu při najetí myší. Podívejte se na ukázku.
18. Vytvořte jednoduché animace klíčových snímků
Paul Lloyd, návrhář interakce The Guardian
Na 24ways.org jsme do souhrnů přidali animované rohové klapky, které se otevřely při najetí myší. To bylo provedeno kombinací @keyframes pravidlo s vlastností animace, změna polohy obrázku na pozadí, aby se dosáhlo animace založené na sprite. Trik spočívá v deklaraci počtu snímků, které máte v animačním sprite pomocí kroky () hodnota. Podívejte se na ukázku.
19. Vytvořte plovoucí 3D efekty se stíny
Catherine Farman, vývojářka Happy Cog
Nedávný projekt vyžadoval plovoucí fotografii produktu se zaobleným stínem pod ním, čímž se vytvořil 3D efekt vyskakování z obrazovky. Stín používá několik funkcí CSS3: poloměr ohraničení alfa průhlednost a stín stínu. Funguje dobře pro produktové mřížky, předvádění snímků v hrdině domovské stránky nebo jakýkoli náladový design se skeuomorfním ohnutím. Podívejte se na ukázku.
20. Aktualizujte prvky stránky pomocí „: cíl“
Simon Madine, senior webový vývojář HeRe
CSS není programovací jazyk v obvyklém slova smyslu, ale stále můžete dělat chytré věci, aniž byste se museli vracet k JavaScriptu. Například :cílová pseudo-třída se aplikuje na prvky, které jsou cílem klikaného odkazu.
Můžete to použít k definování stavu stránky, zacílení na rodiče obsahujícího spoustu prvků a vaše odkazy se stanou prostředkem k ovládání vzhledu a rozložení všech dětí jediným kliknutím. Podívejte se na ukázku.
21. Poskytněte zpětnou vazbu s jemnými animacemi
Neil Renicker, designér a vývojář
Pseudoprvky CSS ::před a ::po spolu s přechody CSS mohou povolit nádhernou animaci, která poskytuje jemnou zpětnou vazbu uživatelům myši. Například vytvořte šipku CSS v pseudoelementu, použijte přechod na pseudoelement (přechod: vše 0,15 s easy-in-out;) a poté přidejte jednoduchou změnu rozložení do :vznášet se pseudotřída (například pozměňující horní okraj). Podívejte se na ukázku.
22. Připravte se na „bude animovat“
Paul Lewis, člen týmu kodérů a vývojových vztahů s Chrome
Pokud jste použili -webkit-transformace: translateZ (0) pro magické zrychlení vašich stránek je hack, který v mnoha prohlížečích jednoduše vytvoří novou skladatelskou vrstvu, nahrazen bude animovat. Brzy budete moci prohlížeči sdělit, co plánujete u prvku změnit (jeho poloha, velikost, obsah nebo poloha posouvání) a prohlížeč použije správnou optimalizaci pod kapotou. Více informací.
23. Humanizujte vstupní pole
Yaron Schoen, zakladatel Made For Humans
Přidání rychlých animací k prvkům, se kterými uživatelé interagují, způsobí, že se rozhraní bude cítit méně výpočetně. Se vstupními poli zkuste zadat a přechodné volání uvnitř, takže kdykoli jej zaostříte nebo rozostříte, dojde k plynulému přechodu.
vstup, textová oblast {-moz-transition: uvolnění všech 0,2 s; -o-přechod: uvolnění všech 0,2 s; -webkit-transition: uvolnění všech 0,2 s; -ms-transition: uvolnění všech 0,2 s; přechod: uvolnění všech 0,2 s;
24. Pozastavte a přehrajte CSS animace
Val Head, designér a konzultant
Animaci CSS můžete „pozastavit“ a „přehrát“ změnou její stav animace-play vlastnictví. Nastavením na „pozastaveno“ se vaše animace zastaví, dokud se nezměníte stav animace-play na běh, například při najetí myší.
.animating_thing {animace: točit 10 s lineární nekonečno; stav animace-přehrávání: pozastaveno; }. animating_thing: hover {animation-play-state: running; }
25. Nepoužívejte proměnné CSS
Dave Shea, designér a autor
Konečně dostáváme proměnné CSS, například abychom jednou zapsali hexadecimální hodnotu barvy a odkazovali na ni prostřednictvím šablony stylů. Oficiální specifikace je však podrobná, dodává syntaktickou složitost, nabízí ohromující funkčnost a většina prohlížečů je většinou nepodporuje. V době, kdy je Sass velmi populární a jde nad rámec proměnných s výkonnou programovací logikou, jako jsou vlastní funkce a příkazy if / else, je oficiální specifikace daleko kratší.
Doufejme, že tyto hlavní tipy obnovily váš pohled na CSS a možnosti, které představuje ve vývoji a designu webů. Nezapomeňte některou z těchto technik důkladně otestovat, abyste před uvedením jakékoli práce do provozu zkontrolovali podporu prohlížeče.
Slova: Craig Grannell Ilustrace: Mike Chipperfield
Tento článek se původně objevil v čísle časopisu Net 253.
