Sadržaj
- 01. Uskladite slike sa shemama boja web mjesta
- 02. Ravnomjerno podijelite prostor u zadnjem redu mreže
- 03. Stvorite animacije čestica pomoću okvira-sjene
- 04. Animirajte poliedre transformacijama
- 05. Master 'calc ()' za pozicioniranje
- 06. Učinite model kutije razumnim s "dimenzioniranjem kutije"
- 07. Okomito središte s CSS-om
- 08. Ciljajte na banku srodnih predmeta
- 09. Kontrolna crtica
- 10. Iskoristite prednosti načina pisanja
- 11. Koristite gradijente na neobične načine
- 12. Koristite podudaranje nizova na vezama
- 13. Neka FOUT radi za vas
- 14. Istražite SVG za pozadine
- 15. Fokusirajte korisnike s 3D prijelazima
- 16. Stvorite kružne izbornike pomoću CSS-a i matematike
- 17. Animirajte veze pri zadržavanju pokazivača
- 18. Napravite jednostavne animacije ključnog kadra
- 19. Stvorite plutajuće 3D efekte sjenama
- 20. Ažuriranje elemenata stranice pomoću ': target'
- 21. Pružite povratne informacije suptilnim animacijama
- 22. Pripremite se za 'volju-animirati'
- 23. Humanizirana polja za unos
- 24. Pauzirajte i reproducirajte CSS animacije
- 25. Ne koristite CSS varijable
U nekom trenutku s bilo kojom tehnologijom postoji osjećaj da je učinjeno gotovo sve što se može učiniti. Kad nešto više nije tako novo i sjajno, interes jenjava i pozornost privlači sljedeća velika stvar. To je često bio slučaj u web industriji, koja je sklona uzbuđivanju određenog aspekta tehnologije prije, prije ili kasnije, preusmjeravanja u svakodnevicu.
Kada se CSS prvi put pojavio, bio je revolucionaran i s vremenom se razvio kako bi dizajnerima omogućio stvaranje fleksibilnih, dobro oblikovanih i lijepih izgleda web stranica. Međutim, odnedavno se iz raznih krajeva sugerira da je CSS umoran i da je možda njegovo vrijeme na suncu prošlo.
Želim pokazati da u svijetu CSS-a još uvijek ima puno uzbuđenja i života, bilo da se radi o najsuvremenijim svojstvima koja možda još niste istražili ili korištenjem aspekta CSS-a na način koji prethodno niste razmatrali.
Evo nekoliko savjeta nekih od najboljih CSS stručnjaka u industriji.
(Napomena: Neke su tehnike u ovoj značajci najmodernije i možda neće biti podržane u svim preglednicima. Temeljito testirajte i osigurajte da postoje povratne informacije prije nego što bilo koji rad započnete uživo.)
01. Uskladite slike sa shemama boja web mjesta
Christopher Schmitt, organizator konferencije
Konferencije imaju svoje sheme boja i, s mnogim zvučnicima, tijek rada za upravljanje portretima može biti složen. Ručna primjena filtara ne skalira se i oslanja se na to da imate pristup, recimo, određenoj Photoshop radnji. Sada koristim PNG visoke razlučivosti u sivim skalama i dodajem tonove pomoću CSS filtara. To mi omogućuje da bilo koji portret uskladim sa shemom događaja, kao i da ponovno upotrijebim slike u više tema. Samo trebam novo CSS pravilo za svako. Pogledajte demo.
02. Ravnomjerno podijelite prostor u zadnjem redu mreže
Stephen Hay, dizajner i autor
Ako imate nepoznat broj stavki za prikaz u mreži, možete upotrijebiti Flexbox da ravnomjerno podijelite zadnji redak. Dakle, ako postoji samo jedna stavka, zauzet će cijeli red; ako postoje dvije stavke, red će se podijeliti na pola i tako dalje. Pogledajte demo.
03. Stvorite animacije čestica pomoću okvira-sjene
Ana Tudor, koderica i fanatik iz matematike
Miješanjem kutija-sjena s nekim matematikama i Sassom možete grafički prikazati 2D krivulje, oponašati 3D kretanje i stvarati lude animacije čestica koje će svi zamijeniti s platnima! Pogledajte demo i još jedan.
04. Animirajte poliedre transformacijama
Ana Tudor, koderica i fanatik iz matematike
Vjerojatno ste vidjeli čiste CSS poligone stvorene s obrubima, ali u sustavu imamo mnogo moćniji alat transformirati imovine. Lanciranje i primjena transformacija na ugniježđenim elementima omogućuje nam stvaranje složenih poligona sa pozadinom slike ili obrubom i prozirnim interijerima. Korištenjem 3D transformacija možemo kombinirati ove 2D oblike u poliedre i učiniti da se krutine stapaju, razvijaju, eksplodiraju ili rekombiniraju na način koji se lako može zamijeniti s WebGL. Pogledajte demo.
05. Master 'calc ()' za pozicioniranje
Ana Tudor, koderica i fanatik iz matematike
volio sam izračun () od trenutka kad sam ga otkrio. Korisno je za pripitomljavanje margina, obloga ili dimenzija, a može biti spas ako se koristi za pozicioniranje ili određivanje veličine pozadine, unutar nagiba ili transformacije, te u kombinaciji ne samo s istim starim jedinicama, već i s novim i cool prikazima.
06. Učinite model kutije razumnim s "dimenzioniranjem kutije"
Sawyer Hollenshead, dizajner i dizajner Oak Studios
Koristiti dimenzioniranje kutija da spasim zdrav razum. Bez njega se element definirane širine od 250 px i 25 px obloga kombinira na širinu od 300 px, čineći piksele i postotke miješanja teškim. S dimenzioniranje kutije:graničnik obrubi i dodaci umjesto toga postavljaju se unutar definirane širine.
07. Okomito središte s CSS-om
Trent Walton, osnivač Paravela
Povijesno je bilo teško vertikalno centrirati nešto pomoću CSS-a, na primjer ako imate sliku sa susjednim tekstom koji želite vertikalno poravnati. Umjesto da tapkate i psujete, upotrijebite Flexbox za rješavanje problema zbog poravnanja. Pogledajte demo.
08. Ciljajte na banku srodnih predmeta
Jonathan Smiley, partner iz Zurba i voditelj dizajna
Obrijte CSS težinu crte pomoću približnih selektora atributa na imenima klasa kako biste ciljali veliku banku srodnih objekata, umjesto da pričvršćujete uobičajene atribute za svaku pojedinu klasu. Na primjer ... [class * = "- block-grid-"] {} ... ciljao bi one poput: .small-block-grid-3 .large-block-grid-5
09. Kontrolna crtica
Savid Storey, otvoreni web zagovornik
Hifenacija se podrazumijeva u tisku, a neki programeri koriste crtice vlasništvo na mreži, ali malo tko zna za druga svojstva koja pružaju finiju kontrolu. Ako niste oprezni, dobit ćete ljestve za povezivanje gdje se crtice koriste u više redaka. Opće pravilo nije više od dva u nizu, kojima možete upravljati pomoću crtice-granične crte. Također, hifenat-granični znakovi omogućuje vam da odredite minimalnu duljinu riječi koja će biti crtica, zajedno s minimalnim brojem znakova prije i nakon prekida crtice.
10. Iskoristite prednosti načina pisanja
David Storey, otvoreni web zagovornik
Načini pisanja omogućuju vam definiranje smjera u kojem teče tekst. Neki istočnoazijski tekst napisan je okomito, crte rastu s desna na lijevo, naznačeno s način pisanja: vertikalni-rl (tb-rl u IE). Okomiti se tekst zapravo ne koristi u europskim sustavima za pisanje, ali može biti zgodan za naslove tablica kad imate ograničeni vodoravni prostor.
11. Koristite gradijente na neobične načine
Ruth John, dizajnerica
Gradijenti pozadine mogu izgledati sjajno kada se koriste s obrubima i mecima. I na svom blogu i s pretprocesorom mogu nazvati kombinaciju s ponovnim korištenjem koda, kako ga ne bih ponavljao ručno. Nemojte biti ludi jer gradijenti mogu biti teški za procesor. SCSS kombinacija za popis metaka:
@mixin gradedBullet ($ boja) {pozadina-slika: linearni gradijent (lijevo, posvijetli ($ boja, 15%) 10px, $ boja 11px, $ boja 20px, potamni ($ boja, 15%) 21px, potamni ($ boja , 15%) 30 piksela, prozirno 31 piksela); }
12. Koristite podudaranje nizova na vezama
Ruth John, dizajnerica
Na svom blogu koristio sam CSS birače atributa s podudaranjem niza za oblikovanje društvenih ikona. Pojavljuju se na cijelom mom blogu, ponekad s tekstom, a ponekad bez, ali uvijek s ikonom. Da bih oblikovao pravu vezu ispravnom društvenom ikonom, koristim podudaranje niza na href atribut sidrenog elementa. koristim *= tako da href na sidrenom elementu mora sadržavati samo niz koji sam odredio.
/ * za sve društvene veze * / .social a: before {display: inline-block; popunjavanje udesno: 30 piksela; obitelj fontova: ‘FontAwesome’;} / * Svaka posebna veza * / .social a [href * = "twitter"]: prije {content: " f099"; boja: # 52ae9f;} .social a [href * = "github"]: prije {content: " f09b"; boja: # 5f2e44;} .social a [href * = "feed"]: prije {content: " f09e"; boja: # b47742;}
13. Neka FOUT radi za vas
Jason Pamental, direktor u dizajnu V + W
Web je izgrađen na pretpostavci da bi trebao isporučivati sadržaj, čak i ako preglednik ne može prikazati bling. Sporo učitavanje web fontova može biti frustrirajuće, FOUT (Flash of Unstyled Text) nervira jer se navigacija i tekst mijenjaju dok se fontovi preuzimaju. Google i Typekit daju odgovor: alat za učitavanje web fontova. Ubrizgavanjem klasa na stranicu, na temelju statusa učitavanja fontova, možete oblikovati povratne datoteke s tim klasama kako biste sveli na najmanju moguću mjeru, također uklanjajući sindrom WebKitovog nevidljivog sadržaja. Pogledajte demo.
14. Istražite SVG za pozadine
Emil Björklund, web programer inUse
Jedini preglednici koji sada nemaju podršku za SVG su IE8 i stariji i Android 2 WebKit, pa je upotreba SVG-a za pozadine u CSS-u izvediva, posebno zajedno s PNG rezervnim rješenjem, poput Grunticon-a. SVG može oblikovati CSS, a postoji zanimljivo propuštanje CSS svojstava (filtara!) Iz SVG-a s kojima se možemo igrati kako se primjenjuju na HTML.
15. Fokusirajte korisnike s 3D prijelazima
Emil Björklund, web programer inUse
Korištenje 3D transformacija i korištenje z-dimenzija u korisničkom sučelju može biti stvarno korisno, posebno za skrivanje / prikazivanje ili sažimanje / proširivanje sadržaja. Također je prilično lako imati povrat u 2D prijelaz ili ga uopće nema u tim situacijama. To je područje u kojem malo progresivno poboljšanje može ići daleko.
16. Stvorite kružne izbornike pomoću CSS-a i matematike
Sara Soueidan, razvojni programer
Kružni jelovnici popularni su u mobilnim aplikacijama, a CSS pretvorbe i prijelaze možete koristiti za stvaranje jednostavnog kružnog izbornika. Ovaj se izbornik može izmijeniti i prilagoditi tako da stvori i izbornik koji se otvara prema gore ili prema dolje. U CSS-u nema izravnog načina dijagonalnog prevođenja stavke, ali možete upotrijebiti vrijednost radijusa kruga na koji želite pozicionirati stavke i primijeniti jednostavno matematičko pravilo za izračunavanje vodoravnih i okomitih vrijednosti prevođenja koje će se proslijediti u translateX () i prevediY () funkcije. Na taj ćete način završiti s dijagonalno prijevod za pomicanje stavki izbornika na ispravne položaje u krugu. Događajem klika kojim se zatvara / otvara izbornik može se rukovati pomoću JavaScript-a ili možete otići korak dalje i imati CSS-izbornik samo uz pomoć hakovanja CSS potvrdnog okvira. U svojoj demonstraciji koristim JavaScript i HTML5 API API-ja classList, koji nije podržan u svim preglednicima, tako da ćete demo morati pogledati u modernom pregledniku da bi to funkcioniralo ili ukloniti komentar iz jQuery koda umjesto da koristite API classList kodirati.
Pogledajte demo i cjeloviti vodič. Primjer hakiranja CSS Checkboxa.
17. Animirajte veze pri zadržavanju pokazivača
Paul Lloyd, dizajner interakcija The Guardian
Na stanja zadržavanja pokazivača ne smije se pouzdati da bi neka radnja uspjela ili pružila važne informacije, ali svejedno možete poboljšati sučelja za korisnike temeljene na mišu. Na 24ways.org otkrivamo naslove članaka kada zadržite pokazivač iznad veza u prethodnoj / sljedećoj navigaciji. To je postignuto stvaranjem a ::nakon pseudo-element koji sadrži generirani sadržaj podrijetlom iz vrijednosti a podaci- atribut, s primijenjenim CSS prijelazom kako bi se on klizio u prikaz pri zadržavanju pokazivača. Pogledajte demo.
18. Napravite jednostavne animacije ključnog kadra
Paul Lloyd, dizajner interakcija The Guardian
Na 24ways.org dodali smo animirane kutne zaklopke sažetcima koji su se otvarali lebdenjem. To je učinjeno kombiniranjem @keyframes pravilo sa svojstvom animacije, mijenjajući položaj pozadinske slike da bi se postigla animacija zasnovana na spriteu. Trik je u tome da broj okvira koji imate u vašem animacijskom spriteu prijavite s koraci () vrijednost. Pogledajte demo.
19. Stvorite plutajuće 3D efekte sjenama
Catherine Farman, programerica Happy Cog-a
Nedavni projekt zahtijevao je plutajuću fotografiju proizvoda s okruglom sjenom ispod, stvarajući 3D efekt iskakanja s ekrana. Sjena koristi nekoliko CSS3 značajki: granica-radijus alfa prozirnost i kutija-sjena. Dobro funkcionira za mreže proizvoda, prezentacije slika u junaku početne stranice ili bilo koji hirovit dizajn sa skeuomorfnim savijanjem. Pogledajte demo.
20. Ažuriranje elemenata stranice pomoću ': target'
Simon Madine, HeRe viši web programer
CSS nije programski jezik u uobičajenom smislu, ali svejedno možete raditi pametne stvari bez vraćanja na JavaScript. Na primjer, :cilj pseudo-klasa primjenjuje se na elemente koji su cilj klikane veze.
Pomoću toga možete definirati stanje stranice, ciljati roditelja koji sadrži puno elemenata, a vaše veze jednim klikom postaju sredstvo za kontrolu izgleda i izgleda sve djece. Pogledajte demo.
21. Pružite povratne informacije suptilnim animacijama
Neil Renicker, dizajner i programer
CSS pseudo-elementi ::prije i ::nakon zajedno s CSS prijelazima, može omogućiti sjajnu animaciju koja pruža suptilne povratne informacije korisnicima miša. Na primjer, izgradite CSS strelicu unutar pseudo-elementa, primijenite prijelaz na pseudo-element (prijelaz: sve jednostavnosti ulaska .15s;), a zatim dodajte jednostavnu promjenu izgleda u :lebdjeti pseudo-klasa (kao što je izmjena margin-top). Pogledajte demo.
22. Pripremite se za 'volju-animirati'
Paul Lewis, programer i član tima za odnose s programerima za Chrome
Ako ste koristili -webkit-transformiraj: translateZ (0) kako biste čarobno učinili vaše stranice bržim, hack, koji u mnogim preglednicima jednostavno stvara novi slojni sloj, zamjenjuje se hoće-animirati. Uskoro ćete pregledniku moći reći što planirate promijeniti u vezi s elementom (njegov položaj, veličina, sadržaj ili položaj pomicanja) i preglednik će primijeniti pravu optimizaciju ispod haube. Više informacija.
23. Humanizirana polja za unos
Yaron Schoen, osnivač Napravljeno za ljude
Dodavanje brzih animacija elementima s kojima korisnici komuniciraju čini sučelje manje računalnim. S poljima za unos pokušajte staviti a prijelazni poziv iznutra, pa kad god ga usredotočite ili izoštrite, dolazi do glatkog prijelaza.
unos, tekstualno područje {-moz-prijelaz: olakšavanje svih 0,2s; -o-prijelaz: olakšavanje svih 0,2s; -webkit-prijelaz: olakšavanje svih 0,2s; -ms-prijelaz: olakšavanje svih 0,2s; prijelaz: ublažavanje svih 0,2 s;
24. Pauzirajte i reproducirajte CSS animacije
Val Head, dizajner i savjetnik
CSS animaciju možete pauzirati i reproducirati tako da je promijenite animacija-igra-stanje imovine. Ako ga postavite na 'pauzirano', animacija će se zaustaviti dok se ne promijenite animacija-igra-stanje do trčanje, na primjer kod zadržavanja pokazivača miša.
.animating_thing {animacija: spin 10s linearni beskonačno; animacija-igra-stanje: pauzirano; }. animating_thing: hover {animacija-igra-stanje: trčanje; }
25. Ne koristite CSS varijable
Dave Shea, dizajner i autor
Napokon dobivamo CSS varijable, na primjer da jednom napišemo heksadecimalnu vrijednost boje i referenciramo je kroz tablicu stilova. No službena je specifikacija detaljna, dodaje sintaksičku složenost, nudi nevjerojatnu funkcionalnost i većina je preglednika uglavnom ne podržava. U eri u kojoj je Sass nadaleko popularan i nadilazi varijable s moćnom programskom logikom poput prilagođenih funkcija i if / else izjava, službene specifikacije dolaze daleko kratke.
Nadamo se da su ovi vrhunski savjeti obnovili vaš pogled na CSS i mogućnosti koje on predstavlja u web razvoju i dizajnu. Ne zaboravite temeljito testirati bilo koju od ovih tehnika kako biste provjerili podršku preglednika prije stavljanja bilo kojeg djela uživo.
Riječi: Craig Grannell Ilustracija: Mike Chipperfield
Ovaj se članak izvorno pojavio u izdanju net magazina 253.
