Tartalom
- 01. Párosítsa a képeket a webhely színvilágához
- 02. Egyenletesen ossza meg a helyet a rács utolsó sorában
- 03. Hozzon létre részecske-animációkat box-shadow segítségével
- 04. Animálja a polihédert transzformációkkal
- 05. Mester ’calc ()’ a helymeghatározáshoz
- 06. Tegye józanul a doboz modelljét „doboz méretezéssel”
- 07. Függőlegesen középre CSS-sel
- 08. Célozza meg a kapcsolódó tárgyak bankját
- 09. Ellenőrzési elválasztás
- 10. Használja ki a módok használatának előnyeit
- 11. Használja a színátmeneteket szokatlan módon
- 12. Használja a string-Matching linkeket
- 13. Tegye a FOUT-ot az Ön számára megfelelővé
- 14. Fedezze fel az SVG hátterét
- 15. Fókuszálja a felhasználókat 3D átmenetekkel
- 16. Hozzon létre körmenüket CSS-sel és matematikával
- 17. Animálja a linkeket az egérrel
- 18. Készítsen egyszerű kulcsképes animációkat
- 19. Készítsen lebegő 3D effektusokat árnyékokkal
- 20. Frissítse az oldal elemeit a ’: target’ használatával
- 21. Visszajelzést nyújtson finom animációkkal
- 22. Készülj fel az „akarat-animálásra”
- 23. Humanizálja a beviteli mezőket
- 24. Szüneteltesse és játssza le a CSS-animációkat
- 25. Ne használjon CSS-változókat
Valamelyik ponton bármilyen technológiával olyan érzés van, hogy nagyjából bármit meg lehet tenni. Amikor valami már nem olyan új és fényes, az érdeklődés lecsökken, és a figyelmet a következő nagy dologra hívják fel. Ez gyakran előfordult a webiparban, amely hajlamos arra, hogy előbb-utóbb rettentően izguljon a technológia egy bizonyos aspektusa előtt, előbb-utóbb a mindennapokba szorítva.
A CSS első megjelenésekor forradalmi volt, és idővel úgy fejlődött, hogy a tervezők rugalmas, szorosan kidolgozott és gyönyörű weboldal-elrendezéseket készíthessenek. Későn azonban különböző területekről érkezett olyan javaslat, hogy a CSS fáradt, és talán elmúlt a napsütéses ideje.
Szeretném bemutatni, hogy még mindig rengeteg izgalom és élet rejlik a CSS világában, legyen szó akár olyan élvonalbeli tulajdonságokról, amelyeket esetleg még nem fedezett fel, vagy a CSS egy aspektusának oly módon történő felhasználásával, amelyet korábban nem gondolt.
Íme néhány tipp az iparág CSS-szakértőitől.
(Megjegyzés: A funkció egyes technikái csúcstechnológiát képviselnek, és előfordulhat, hogy nem minden böngésző támogatja őket teljes mértékben. Alaposan tesztelje és győződjön meg róla, hogy a visszaesések a helyükön vannak, mielőtt bármilyen munkát életbe léptetne.
01. Párosítsa a képeket a webhely színvilágához
Christopher Schmitt, konferencia szervező
A konferenciáknak saját színviláguk van, és sok előadóval a portrék kezelésének munkafolyamata összetett lehet. A szűrők kézi alkalmazása nem méretez, és arra számít, hogy hozzáférhet-e például egy adott Photoshop-művelethez. Most nagy felbontású szürkeárnyalatos PNG-ket használok, és CSS-szűrők segítségével adok hangokat. Ez lehetővé teszi számomra, hogy bármilyen portrét hozzárendeljek egy esemény sémájához, és hogy a képeket több témában is felhasználjam. Csak egy új CSS-szabályra van szükségem mindegyikhez. Lásd egy bemutatót.
02. Egyenletesen ossza meg a helyet a rács utolsó sorában
Stephen Hay, tervező és szerző
Ha ismeretlen számú elem jelenik meg a rácsban, akkor a Flexbox segítségével egyenletesen oszthatja fel az utolsó sort. Tehát ha csak egy elem van, akkor az az egész sort lefedi; ha két elem van, akkor a sor kettéválik, és így tovább. Lásd egy bemutatót.
03. Hozzon létre részecske-animációkat box-shadow segítségével
Ana Tudor, kódoló és matematikai fanatikus
Keveréssel box-shadow némi matematika és Sass segítségével megrajzolhatja a 2D görbéket, utánozhatja a 3D mozgást, és őrült részecske animációkat hozhat létre, amelyeket mindenki vászonnak fog tévedni! Lásd egy bemutatót, és még egyet.
04. Animálja a polihédert transzformációkkal
Ana Tudor, kódoló és matematikai fanatikus
Valószínűleg láttál tiszta CSS sokszögeket, amelyeket határokkal hoztak létre, de sokkal hatékonyabb eszközzel szolgálunk a átalakul ingatlan. A transzformációk láncolása és alkalmazása egymásba ágyazott elemeken lehetővé teszi számunkra, hogy komplex sokszögeket hozzunk létre képi háttérrel vagy szegélyekkel és átlátszó belső terekkel. A 3D transzformációk segítségével ezeket a 2D alakzatokat polihéderekké egyesíthetjük, és a szilárd anyagokat egyesíthetjük, kibontakozhatjuk, felrobbanhatjuk vagy újrakombinálhatjuk oly módon, hogy könnyen összetéveszthető legyen a WebGL-vel. Lásd egy bemutatót.
05. Mester ’calc ()’ a helymeghatározáshoz
Ana Tudor, kódoló és matematikai fanatikus
szerettem calc () attól a pillanattól kezdve, hogy felfedeztem. Hasznos a margók, a betétek vagy a dimenziók szelídítéséhez, és életmentő lehet, ha háttereket helyeznek el vagy méreteznek, a színátmeneteket vagy a transzformációkat, és nemcsak ugyanazokkal a régi egységekkel kombinálják, hanem az új és jó nézetablakokkal is.
06. Tegye józanul a doboz modelljét „doboz méretezéssel”
Sawyer Hollenshead, az Oak Studios fejlesztője és tervezője
Használat dobozméretezés hogy megmentse a józan eszét. Enélkül egy meghatározott, 250 képpontos és 25 képpontos betét szélességű elem 300 képpont szélességgel kombinálódik, ami megnehezíti a képpontok és százalékok keverését. Val vel doboz méretezés:határdoboz a szegélyeket és a párnákat ehelyett a megadott szélességen belül helyezik el.
07. Függőlegesen középre CSS-sel
Trent Walton, a Paravel alapítója
Történelmileg nehéz volt valamit függőlegesen középre állítani a CSS-sel, például ha van egy képe szomszédos szöveggel, amelyet függőlegesen szeretne igazítani. Taposás és szitkozódás helyett a Flexbox segítségével kezelje az igazítási bajokat. Lásd egy bemutatót.
08. Célozza meg a kapcsolódó tárgyak bankját
Jonathan Smiley, a Zurb partnere és vezetője
Borotválja le a CSS vonalvastagságot úgy, hogy hozzávetőleges attribútumválasztókat használ az osztályneveken, hogy a kapcsolódó objektumok nagy bankját célozza meg, ahelyett, hogy minden egyes osztályhoz közös attribútumokat csatolna. Például ... [class * = "- block-grid-"] {} ... a következőket célozná meg: .small-block-grid-3 .large-block-grid-5
09. Ellenőrzési elválasztás
Savid Storey, nyitott internetes szószóló
Az elválasztás nyomtatott formában magától értetődő, és néhány fejlesztő használja a kötőjelek ingatlan online, de kevesen ismerik a finomabb irányítást biztosító egyéb tulajdonságokat. Ha nem vigyáz, kötőjellétrákat kap, ahol kötőjeleket használnak több vonalon. Az általános ökölszabály nem több, mint kettő egymás után, amelyeket használhat kötőjel-határvonalak. Is, kötőjel-határjelek lehetővé teszi, hogy meghatározza az elválasztandó szó minimális hosszát, valamint a kötőjel törése előtti és utáni minimális karakterek számát.
10. Használja ki a módok használatának előnyeit
David Storey, nyílt internetes szószóló
Az írási módok lehetővé teszik a szöveg áramlásának irányának meghatározását. Néhány kelet-ázsiai szöveget függőlegesen írnak, jobbról balra növekvő vonalak jelennek meg írásmód: függőleges-rl (tb-rl IE-ben). A függőleges szöveget nem igazán használják az európai írórendszerek, de hasznos lehet a táblázat fejlécei számára, ha a vízszintes hely korlátozott.
11. Használja a színátmeneteket szokatlan módon
Ruth John, tervező
A háttér színátmenetek jól nézhetnek ki, ha szegélyekkel és golyókkal használják. Mind a blogomban használom, mind egy előfeldolgozóval hívhatok egy mixint az újrafelhasználott kóddal, hogy ne ismételjem meg manuálisan. Ne légy szuper őrült, mert a színátmenetek nehézkesek lehetnek a processzor számára. SCSS keverék a felsorolási pontokhoz:
@mixin gradedBullet ($ color) {háttérkép: lineáris-gradiens (balra, világosít ($ color, 15%) 10px, $ color 11px, $ color 20px, sötétít ($ color, 15%) 21px, sötétebb ($ color , 15%) 30 képpont, átlátszó kép 31 képpont; }
12. Használja a string-Matching linkeket
Ruth John, tervező
A blogomban CSS attribútumválasztókat használtam karakterlánc-illesztéssel a közösségi ikonok stílusához. Ezek az egész blogomon megjelennek, néha szöveggel, néha anélkül, de mindig ikonnal. Ahhoz, hogy a megfelelő linket a megfelelő közösségi ikonra formázzuk, karakterlánc-egyezést használok a href a horgonyelem attribútuma. használom *= így a href a horgony elemen csak az általam megadott karakterláncot kell tartalmaznia.
/ * minden közösségi linknél * / .social a: {display előtt: inline-block; párnázás jobb: 30px; font-family: ’FontAwesome’;} / * Minden egyes link * / .social a [href * = "twitter"]: a {content: " f099" előtt; szín: # 52ae9f;} .social a [href * = "github"]: a {content: " f09b" előtt; color: # 5f2e44;} .social a [href * = "feed"]: a {content: " f09e" előtt; szín: # b47742;}
13. Tegye a FOUT-ot az Ön számára megfelelővé
Jason Pamental, a H + W tervezés igazgatója
Az internet arra a feltételezésre épül, hogy tartalmat kell szolgáltatnia, még akkor is, ha a böngésző nem tudja végrehajtani a blinget. A lassan betöltött webes betűtípusok elkeserítőek lehetnek, a FOUT (Styled Text Flash) eltorzíthatja a navigációt és a szöveg visszaverődik a betűtípusok letöltése közben. A Google és a Typekit választ ad: a web-betűkészlet-betöltőt. Osztályok injekciózásával egy oldalon, a betűtípusok betöltési állapota alapján, ezekkel az osztályokkal meg lehet stílusozni a visszalépéseket, hogy minimálisra csökkentsék a visszafolyást, felszámolva a WebKit „láthatatlan tartalom” szindrómáját is. Lásd egy bemutatót.
14. Fedezze fel az SVG hátterét
Emil Björklund, az inUse webfejlesztő
Az egyetlen böngésző, amely jelenleg nem rendelkezik SVG támogatással, az IE8 és az alatti, valamint az Android 2 WebKit, így az SVG használata a CSS-ben háttérként megvalósítható, különösen egy PNG tartalék megoldás, például a Grunticon mellett. Az SVG-t CSS formázhatja, és az SVG-től érdekes átfutási lehetőségek vannak a CSS-tulajdonságokról (szűrők!), Amelyekkel a HTML-hez alkalmazva játszhatunk.
15. Fókuszálja a felhasználókat 3D átmenetekkel
Emil Björklund, az inUse webfejlesztő
3D transzformációk és a z-dimenzió A felhasználói felületek valóban hasznosak lehetnek, különösen a tartalom elrejtése / megjelenítése vagy összecsukása / kibővítése szempontjából. Azokban a helyzetekben is meglehetősen egyszerű a 2D-s átmenet, vagy egyáltalán nincs átmenet. Ez egy olyan terület, ahol egy kis progresszív fejlesztés sokat segíthet.
16. Hozzon létre körmenüket CSS-sel és matematikával
Sara Soueidan, a frontend fejlesztője
A körmenük népszerűek a mobilalkalmazásokban, és CSS átalakításokkal és átmenetekkel egyszerű körmenüt hozhat létre. Ez a menü módosítható és testreszabható, így felfelé vagy lefelé nyíló menüt is létrehozhat. A CSS-ben nincs közvetlen módja annak, hogy egy elemet átlósan fordítson, de használhatja annak a körnek a sugarát, amelyre az elemeket pozícionálni kívánja, és alkalmazhat egy egyszerű matematikai szabályt a vízszintes és függőleges fordítási értékek kiszámításához. translateX () és fordításY () funkciókat. Így végül a átlós fordítás a menüpontok megfelelő helyre történő áthelyezéséhez a körön. A menüt bezáró / megnyitó kattintási esemény a JavaScript használatával kezelhető, vagy egy lépéssel tovább léphet, és csak CSS-menüt használhat a CSS jelölőnégyzet feltörésével. Bemutatómban a JavaScript-et és a HTML5 classList API-t használom, amelyet nem minden böngésző támogat, így a bemutatót egy modern böngészőben kell megtekintenie, hogy működjön, vagy a classList API használata helyett törölje a jQuery kód megjegyzését. kód.
Tekintse meg a bemutatót és a teljes oktatóanyagot. CSS Checkbox hack példa.
17. Animálja a linkeket az egérrel
Paul Lloyd, a The Guardian interakciótervezője
Az egérmutató állapotokra nem szabad támaszkodni egy művelet működése vagy fontos információk megadása érdekében, de az egéralapú felhasználók interfészeit továbbra is javíthatja. A 24ways.org oldalon cikkcímeket tárunk fel, amikor az előző / következő navigáció linkjeire mutat. Ezt a ::utána generált tartalmat tartalmazó álelem, amely az a értékéből származik adat- attribútumot, CSS átmenetet alkalmazva, hogy lebegjen a nézetbe. Lásd egy bemutatót.
18. Készítsen egyszerű kulcsképes animációkat
Paul Lloyd, a The Guardian interakciótervezője
A 24ways.org oldalon animált sarokcsappantyúkat adtunk az összefoglalókhoz, amelyek lebegve nyíltak meg. Ezt a @ kulcsképek szabály az animációs tulajdonsággal, a háttérkép helyzetének megváltoztatása a sprite-alapú animáció elérése érdekében. A trükk az, hogy deklaráljuk az animáción belüli képkockák számát a lépések() érték. Lásd egy bemutatót.
19. Készítsen lebegő 3D effektusokat árnyékokkal
Catherine Farman, a Happy Cog fejlesztője
Egy közelmúltbeli projekthez lebegő termékfotóra volt szükség, kerek árnyékkal alul, 3D-s hatást keltve a képernyőről. Az árnyék számos CSS3 funkciót használ: határsugár alfa átlátszóság és box-shadow. Jól működik a termékrácsoknál, a weboldal hősének kirakati képeinél vagy bármilyen szeszélyes, skeuomorphic hajlítású kivitelnél. Lásd egy bemutatót.
20. Frissítse az oldal elemeit a ’: target’ használatával
Simon Madine, a HeRe vezető webfejlesztője
A CSS nem a szokásos értelemben vett programozási nyelv, de okos dolgokat mégis megtehet anélkül, hogy visszaesne a JavaScript-re. Például a :cél pszeudo osztályt alkalmazunk azokra az elemekre, amelyek a kattintott link célpontjai.
Ezzel meghatározhatja egy oldal állapotát, megcélozhatja a sok elemet tartalmazó szülőt, és a linkjei eszközzé válnak arra, hogy egyetlen kattintással vezérelhesse az összes gyermek megjelenését és elrendezését. Lásd egy bemutatót.
21. Visszajelzést nyújtson finom animációkkal
Neil Renicker, tervező és fejlesztő
CSS ál-elemek ::előtt és ::utána a CSS átmenetekkel együtt lehetővé teheti a kellemes animációt, amely finom visszajelzést nyújt az egér felhasználóinak. Például építsen egy CSS nyílt egy ál-elemen belül, alkalmazzon egy átmenetet az ál-elemre (átmenet: minden könnyebb ki-be, 15-ös;), majd adjon hozzá egy egyszerű elrendezésmódosítást a :lebeg álosztály (például módosító margin-top). Lásd egy bemutatót.
22. Készülj fel az „akarat-animálásra”
Paul Lewis, a kódoló és a Chrome fejlesztői kapcsolatok csapatának tagja
Ha használta -webkit-transform: lefordítZ (0) az oldalak varázslatosabbá tétele érdekében a hacket, amely sok böngészőben egyszerűen új komponens réteget hoz létre, a akarat-animáció. Hamarosan elmondhatja a böngészőnek, hogy mit tervez megváltoztatni egy elemnél (annak helyzete, mérete, tartalma vagy görgetési helyzete), és a böngésző a megfelelő optimalizálást alkalmazza a motorháztető alatt. Több információ.
23. Humanizálja a beviteli mezőket
Yaron Schoen, a Made For Humans alapítója
Ha gyors animációkat ad hozzá azokhoz az elemekhez, amelyekkel a felhasználók interakcióba lépnek, az interfész kevésbé érezheti magát számítógépesnek. A beviteli mezőkkel próbálja meg a átmeneti hívás belül, így amikor csak összpontosít vagy nem fókuszál, akkor zökkenőmentes az átmenet.
bevitel, textarea {-moz-átmenet: mind a 0,2-es megkönnyítése; -o-átmenet: mind a 0,2-es megkönnyíti a kimenetet; -webkit-átmenet: mind a 0,2-es megkönnyíti; -ms-átmenet: mind a 0,2-es megkönnyíti a kimenetet; átmenet: mind a 0,2-es megkönnyítése;
24. Szüneteltesse és játssza le a CSS-animációkat
Val vezető, tervező és tanácsadó
A CSS-animációt „szüneteltetheti” és „lejátszhatja” annak megváltoztatásával animáció-játék-állapot ingatlan. A „szüneteltetett” értékre állítva az animáció megáll a helyén, amíg meg nem változtatja animáció-játék-állapot nak nek futás, például lebegőn.
.animating_thing {animáció: spin 10s lineáris végtelen; animáció-játék-állapot: szünetel; }. animating_thing: lebeg {animation-play-state: running; }
25. Ne használjon CSS-változókat
Dave Shea, tervező és szerző
Végre kapunk CSS-változókat, például egyszer megírhatjuk a szín hex értékét, és egy stíluslapon keresztül hivatkozhatunk rá. De a hivatalos specifikáció részletes, szintaktikai összetettséget ad, elsöprő funkcionalitást kínál, és a legtöbb böngésző nagyrészt nem támogatja. Egy olyan korszakban, amikor a Sass széles körben népszerű és túlmutat az olyan változókon, amelyek hatékony programozási logikával rendelkeznek, mint például az egyéni függvények és az if / else utasítások, a hivatalos specifikáció messze elmarad.
Remélhetőleg ezek a legfontosabb tippek megújították a CSS véleményét és az általa képviselt lehetőségeket a webfejlesztésben és a tervezésben. Ne felejtse el alaposan kipróbálni ezeket a technikákat, hogy ellenőrizze a böngésző támogatását, mielőtt bármilyen munkát életbe léptetne.
Szavak: Craig Grannell Ábra: Mike Chipperfield
Ez a cikk eredetileg a net magazin 253. számában jelent meg.
