Sisältö
- 01. Yhdistä kuvat sivuston väreihin
- 02. Jaa tilaa tasaisesti ruudukon viimeisellä rivillä
- 03. Luo hiukkasanimaatioita box-shadowilla
- 04. Animoi polyhedra muunnoksilla
- 05. Master ’calc ()’ paikannusta varten
- 06. Tee laatikkomalli järkeväksi ”laatikon mitoituksella”
- 07. Keskitä pystysuunnassa CSS: llä
- 08. Kohdista liittyvien esineiden pankkiin
- 09. Ohjaa tavutus
- 10. Hyödynnä tilojen kirjoittamista
- 11. Käytä kaltevuuksia epätavallisilla tavoilla
- 12. Käytä merkkijono-sovitusta linkeissä
- 13. Tee FOUT-työ puolestasi
- 14. Tutki SVG: tä taustoista
- 15. Kohdista käyttäjät 3D-siirtymillä
- 16. Luo pyöreät valikot CSS: n ja matematiikan avulla
- 17. Animoi linkit hiirellä
- 18. Tee yksinkertaisia avainkehysanimaatioita
- 19. Luo kelluvia 3D-tehosteita varjoilla
- 20. Päivitä sivuelementit käyttämällä ’: target’
- 21. Anna palautetta hienovaraisilla animaatioilla
- 22. Valmistaudu ”animoimaan”
- 23. Humanisoi syöttökentät
- 24. Keskeytä ja toista CSS-animaatioita
- 25. Älä käytä CSS-muuttujia
Jossakin vaiheessa millä tahansa tekniikalla on tunne, että melkein kaikki mitä voidaan tehdä, on tehty. Kun jokin ei ole enää aivan uutta ja kiiltävää, kiinnostus heikkenee ja huomiota kiinnitetään seuraavaan suureen asiaan. Näin on käynyt usein verkkoteollisuudessa, joka on taipuvainen innostumaan kauheasti tietystä tekniikan näkökohdasta ennen, ennemmin tai myöhemmin, sijoittamalla sen arkipäivään.
Kun CSS ilmestyi ensimmäisen kerran, se oli vallankumouksellinen, ja ajan myötä se on kehittynyt, jotta suunnittelijat voivat luoda joustavia, tiiviisti muotoiltuja ja kauniita verkkosivujen asetteluja. Viime aikoina on kuitenkin eri puolilta tullut ehdotus siitä, että CSS on väsynyt ja ehkä sen aika auringossa on mennyt.
Haluan esitellä, että CSS: n maailmassa on vielä paljon jännitystä ja elämää, olipa kyse huippuluokan ominaisuuksista, joita et ehkä ole vielä tutkinut, tai käyttämällä CSS: n näkökohtaa tavalla, jota et ole aiemmin ottanut huomioon.
Tässä on joitain vinkkejä alan johtavilta CSS-asiantuntijoilta.
(Huomaa: Jotkin tämän ominaisuuden tekniikat ovat huippuluokan, eikä niitä välttämättä tueta täysin kaikissa selaimissa. Testaa ja varmista, että varoitukset ovat paikallaan ennen työn tekemistä.)
01. Yhdistä kuvat sivuston väreihin
Christopher Schmitt, konferenssin järjestäjä
Konferensseilla on omat värimaailmansa, ja monien puhujien kanssa työnkulku muotokuvien hallintaan voi olla monimutkaista. Suodattimien manuaalinen käyttäminen ei skaalaa ja luottaa siihen, että sinulla on pääsy esimerkiksi tiettyyn Photoshop-toimintoon. Käytän nyt korkean resoluution harmaasävyisiä PNG-tiedostoja ja lisäämään ääniä CSS-suodattimien avulla. Tämän ansiosta voin sovittaa minkä tahansa muotokuvan tapahtuman kaavioon ja käyttää kuvia uudelleen useissa teemoissa. Tarvitsen vain uuden CSS-säännön kullekin. Katso esittely.
02. Jaa tilaa tasaisesti ruudukon viimeisellä rivillä
Stephen Hay, suunnittelija ja kirjailija
Jos ruudukossa näytetään tuntematon määrä kohteita, voit jakaa viimeisen rivin tasaisesti Flexboxin avulla. Joten jos on vain yksi kohde, se vie koko rivin; jos on kaksi kohdetta, rivi jaetaan kahtia, ja niin edelleen. Katso esittely.
03. Luo hiukkasanimaatioita box-shadowilla
Ana Tudor, kooderi ja matematiikan fanaatikko
Sekoittamalla laatikko-varjo joidenkin matematiikan ja Sassin avulla voit piirtää 2D-käyrät, jäljitellä 3D-liikettä ja luoda hulluja hiukkasanimaatioita, jotka kaikki erehtyvät kankaisiin! Katso esittely ja toinen.
04. Animoi polyhedra muunnoksilla
Ana Tudor, kooderi ja matematiikan fanaatikko
Olet todennäköisesti nähnyt puhtaita CSS-polygoneja, jotka on luotu reunoilla, mutta meillä on paljon tehokkaampi työkalu muuttaa omaisuus. Muunnosten ketjutus ja soveltaminen sisäkkäisiin elementteihin antaa meille mahdollisuuden luoda monimutkaisia polygoneja, joissa on kuvan taustat tai reunat ja läpinäkyvät sisätilat. 3D-muunnosten avulla voimme yhdistää nämä 2D-muodot polyhedeiksi ja saada kiinteät aineet sulautumaan, avautumaan, räjähtämään tai yhdistymään tavalla, joka sekoitetaan helposti WebGL: ään. Katso esittely.
05. Master ’calc ()’ paikannusta varten
Ana Tudor, kooderi ja matematiikan fanaatikko
minä rakastin laskea () siitä hetkestä kun löysin sen. Se on hyödyllinen marginaalien, pehmusteiden tai ulottuvuuksien kesyttämisessä, ja se voi olla hengenpelastaja, kun sitä käytetään taustojen sijoittamiseen tai koon muuttamiseen, kaltevuuksien tai muunnosten sisälle, ja yhdistettynä paitsi samoihin vanhoihin, myös uusiin ja viileisiin näkymiin.
06. Tee laatikkomalli järkeväksi ”laatikon mitoituksella”
Sawyer Hollenshead, Oak Studiosin suunnittelija ja suunnittelija
Käyttää laatikoiden mitoitus säästää järkeäsi. Ilman sitä elementti, jolla on määritelty leveys 250 kuvapistettä ja 25 kuvapistettä täyte, yhdistyy 300 kuvapisteen levyiseksi, mikä tekee sekoituspikseleistä ja prosenttiosuuksista kovia. Kanssa laatikon mitoitus:raja-laatikko reunat ja pehmusteet sijoitetaan sen sijaan määritetylle leveydelle.
07. Keskitä pystysuunnassa CSS: llä
Trent Walton, Paravelin perustaja
Historiallisesti on ollut vaikeaa keskittää jotain pystysuunnassa CSS: llä, kuten jos sinulla on kuva, jonka vieressä oleva teksti on pystysuunnassa tasattu. Tappelemisen ja kiroamisen sijasta käytä Flexboxia kohdistaaksesi ongelmat. Katso esittely.
08. Kohdista liittyvien esineiden pankkiin
Jonathan Smiley, Zurb-kumppani ja suunnittelupäällikkö
Ajele CSS-viivan paino käyttämällä likimääräisiä attribuuttien valitsimia luokkien nimissä, jotta voit kohdistaa suuren aiheeseen liittyvien objektien pankin sen sijaan, että liittäisit yhteiset määritteet jokaiseen luokkaan. Esimerkiksi ... [class * = "- lohko-ruudukko-"] {} ... kohdistaisi tykkäykset: .small-block-grid-3 .large-block-grid-5
09. Ohjaa tavutus
Savid Storey, avoin verkkopuolue
Tavutus on itsestään selvää painettuna, ja jotkut kehittäjät käyttävät sitä väliviivat verkossa, mutta harvat ovat tietoisia muista ominaisuuksista, jotka tarjoavat tarkemman hallinnan. Jos et ole varovainen, saat tavutikkaat, joissa tavuviivoja käytetään useilla viivoilla. Nyrkkisääntö on enintään kaksi peräkkäin, joita voit hallita käyttämällä tavutus-raja-linjat. Myös, tavutus-raja-merkit voit määrittää tavutettavan sanan vähimmäispituuden sekä vähimmäismerkkimäärän ennen yhdysmerkin taukoa ja sen jälkeen.
10. Hyödynnä tilojen kirjoittamista
David Storey, avoin verkkopuolue
Kirjoittamistilojen avulla voit määrittää tekstin virtaussuunnan. Jotkut Itä-Aasian tekstit kirjoitetaan pystysuorassa, viivat kasvavat oikealta vasemmalle, määritelty kirjoitustila: pystysuora-rl (tb-rl IE: ssä). Pystytekstiä ei oikeastaan käytetä eurooppalaisissa kirjoitusjärjestelmissä, mutta se voi olla kätevä taulukon otsikoille, kun vaakasuora tila on rajallinen.
11. Käytä kaltevuuksia epätavallisilla tavoilla
Ruth John, suunnittelija
Taustakaltevuudet voivat näyttää hyvältä, kun niitä käytetään reunojen ja luotien kanssa. Käytän sekä blogissani että esiprosessori voi soittaa miksaukseen uudelleenkäytetyn koodin kanssa, jotta en toista sitä manuaalisesti. Älä mene hulluksi, koska kaltevuudet voivat olla prosessorin raskaita. Luettelomerkkien SCSS-yhdistelmä:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) , 15%) 30 kuvapistettä, läpinäkyvä 31 kuvapistettä); }
12. Käytä merkkijono-sovitusta linkeissä
Ruth John, suunnittelija
Blogissani olen käyttänyt sosiaalisten kuvakkeiden tyyliin CSS-määritteen valitsimia, joissa on merkkijonovastaavuus. Nämä näkyvät koko blogissani, toisinaan tekstillä ja toisinaan ilman, mutta aina kuvakkeella. Tyylistäksesi oikean linkin oikeaan sosiaaliseen kuvakkeeseen, käytän merkkijonoa href ankkurielementin attribuutti. käytän *= joten href ankkurielementissä on oltava vain määrittämäni merkkijono.
/ * kaikille sosiaalisille linkeille * / .social a: ennen {display: inline-block; täyte-oikea: 30px; font-family: ’FontAwesome’;} / * Jokainen linkki * / .social a [href * = "twitter"]: ennen {content: " f099"; väri: # 52ae9f;} .social a [href * = "github"]: ennen {content: " f09b"; väri: # 5f2e44;}. sosiaalinen a [href * = "syöte"]: ennen {content: " f09e"; väri: # b47742;}
13. Tee FOUT-työ puolestasi
Jason Pamental, H + W-suunnittelun päällikkö
Verkko perustuu siihen lähtökohtaan, että sen pitäisi toimittaa sisältöä, vaikka selain ei pystyisi suorittamaan blingiä. Hitaasti ladattavat web-fontit voivat olla turhauttavia, FOUT (Flash Of Styled Text) -hahmottelu navigoinnin ja tekstin paluuna kirjasinten lataamisen aikana. Google ja Typekit tarjoavat vastauksen: web-fontin latausohjelma. Injisoimalla luokkia sivulle fonttien lataustilan perusteella voit muotoilla palautuksia näiden luokkien kanssa pitääkseen mahdollisimman pienen palautumisen ja poistamalla myös WebKitin näkymättömän sisällön oireyhtymän. Katso esittely.
14. Tutki SVG: tä taustoista
Emil Björklund, inUse -verkkokehittäjä
Ainoat selaimet, joilla ei nyt ole SVG-tukea, ovat IE8 ja sitä uudemmat versiot sekä Android 2 WebKit, joten SVG: n käyttö CSS: n taustoissa on mahdollista, etenkin yhdessä PNG-vararatkaisun, kuten Grunticonin kanssa. SVS voidaan muotoilla CSS: llä, ja SVG: ltä on mielenkiintoinen CSS-ominaisuuksien (suodattimien!) Läpivienti, jota voimme pelata HTML: ään sovellettuna.
15. Kohdista käyttäjät 3D-siirtymillä
Emil Björklund, inUse -verkkokehittäjä
3D-muunnosten käyttäminen ja z-ulottuvuus käyttöliittymissä voi olla todella hyödyllistä, erityisesti sisällön piilottamiseksi / näyttämiseksi tai tiivistämiseksi / laajentamiseksi. Näissä tilanteissa on myös melko helppoa varata 2D-siirtymä tai ei lainkaan siirtymistä. Se on alue, jolla pieni progressiivinen parannus voi mennä pitkälle.
16. Luo pyöreät valikot CSS: n ja matematiikan avulla
Sara Soueidan, käyttöliittymän kehittäjä
Pyöreät valikot ovat suosittuja mobiilisovelluksissa, ja CSS-muunnosten ja siirtymien avulla voit luoda yksinkertaisen pyöreän valikon. Tätä valikkoa voidaan muokata ja mukauttaa luomaan myös ylös- tai alaspäin avautuva valikko. CSS: ssä ei ole suoraa tapaa kääntää kohdetta diagonaalisesti, mutta voit käyttää ympyrän säteen arvoa, jolle haluat sijoittaa kohteet, ja soveltaa yksinkertaista matemaattista sääntöä laskemaan vaaka- ja pystysuuntaiset käännösarvot translateX () ja kääntääY () toimintoja. Tällä tavoin päädyt a lävistäjä käännös siirtääksesi valikkokohdat ympyrän oikeisiin paikkoihin. Valikon sulkeva / avaava napsautustapahtuma voidaan hoitaa JavaScriptiä käyttämällä, tai voit ottaa sen askeleen pidemmälle ja saada vain CSS-valikko käyttämällä CSS-valintaruudun hakkerointia. Esittelyssä käytän JavaScriptiä ja HTML5 classList -sovellusliittymää, jota ei tueta kaikissa selaimissa, joten sinun on tarkasteltava esittelyä modernilla selaimella, jotta se toimisi, tai poista jQuery-koodin kommentti classList-sovellusliittymän käyttämisen sijaan. koodi.
Katso esittely ja täydellinen opetusohjelma. Esimerkki CSS-valintaruudun hakkeroinnista.
17. Animoi linkit hiirellä
Paul Lloyd, Guardian-vuorovaikutussuunnittelija
Lohkareiden tiloihin ei pidä luottaa, jotta toiminta toimisi tai annettaisiin tärkeitä tietoja, mutta voit silti parantaa hiiripohjaisten käyttäjien käyttöliittymiä. 24ways.org-sivustossa paljastamme artikkelin otsikot, kun viet hiiren osoittimen edellisen / seuraavan navigoinnin linkkien päälle. Tämä saavutettiin luomalla ::jälkeen pseudoelementti, joka sisältää luodun sisällön, joka saadaan a: n arvosta data- määritettä CSS-siirtymän avulla, jotta se liukuu näkyviin hiiren osoittimessa. Katso esittely.
18. Tee yksinkertaisia avainkehysanimaatioita
Paul Lloyd, Guardian-vuorovaikutussuunnittelija
Lisäsimme sivulle 24ways.org animoituja kulmaläpät yhteenvetoihin, jotka avautuivat hiiren osoittimella. Tämä tehtiin yhdistämällä @ avainkehykset hallitse animaatio-ominaisuudella muuttamalla taustakuvan sijaintia sprite-pohjaisen animaation saamiseksi. Temppu on ilmoittaa, kuinka monta kehystä sinulla on animaatiossasi askeleet() arvo. Katso esittely.
19. Luo kelluvia 3D-tehosteita varjoilla
Catherine Farman, Happy Cog -kehittäjä
Äskettäinen projekti vaati kelluvaa tuotekuvaa, jonka alapuolella oli pyöreä varjo, mikä loi 3D-vaikutelman, kun näyttö avautui. Varjo käyttää useita CSS3-ominaisuuksia: raja-säde alfa-läpinäkyvyys ja laatikko-varjo. Se toimii hyvin tuoteruudukkoihin, kotisivun sankareiden kuvamateriaaleihin tai mihin tahansa hassuun muotoon, jossa on skeuomorfinen taivutus. Katso esittely.
20. Päivitä sivuelementit käyttämällä ’: target’
Simon Madine, HeRe-verkkokehittäjä
CSS ei ole ohjelmointikieli tavallisessa mielessä, mutta voit silti tehdä fiksuja asioita palaamatta takaisin JavaScriptiin. Esimerkiksi :kohde pseudoluokkaa sovelletaan elementteihin, jotka ovat napsautetun linkin kohde.
Tämän avulla voit määrittää sivun tilan, kohdistaa vanhempia, jotka sisältävät paljon elementtejä, ja linkkeistäsi tulee tapa hallita kaikkien lasten ulkoasua ja asettelua yhdellä napsautuksella. Katso esittely.
21. Anna palautetta hienovaraisilla animaatioilla
Neil Renicker, suunnittelija ja kehittäjä
CSS-pseudoelementit ::ennen ja ::jälkeen yhdessä CSS-siirtymien kanssa voi mahdollistaa ihastuttavan animaation, joka tarjoaa hienovaraisen palautteen hiiren käyttäjille. Rakenna esimerkiksi CSS-nuoli pseudo-elementtiin, lisää siirtymä pseudo-elementtiin (siirtyminen: kaikki helppokäyttöiset .15s;) ja lisää sitten yksinkertainen asettelun muutos : hiiren osoitin pseudoluokka (kuten muuttaminen marginaali). Katso esittely.
22. Valmistaudu ”animoimaan”
Paul Lewis, kooderi ja Chrome-kehittäjäsuhdetiimin jäsen
Jos olet käyttänyt -webkit-muuntaa: kääntääZ (0) tehdäksesi maagisesti sivusi nopeammaksi, hakata, joka monissa selaimissa yksinkertaisesti luo uuden säveltäjäkerroksen, korvataan animoida. Pian voit kertoa selaimelle, mitä aiot muuttaa elementissä (sen sijainti, koko, sisältö tai vierityskohta), ja selain käyttää oikeaa optimointia hupun alla. Lisää tietoa.
23. Humanisoi syöttökentät
Yaron Schoen, Made For Humansin perustaja
Nopean animaation lisääminen elementteihin, joiden kanssa käyttäjät ovat vuorovaikutuksessa, tekee käyttöliittymästä vähemmän laskennallisen. Yritä syöttää kenttiin syöttökentät siirtopuhelu sisällä, joten aina kun tarkennat tai kohdistat sen, siirtyminen on sujuvaa.
input, textarea {-moz-siirtymä: kaikki 0,2: t helpottavat; -o-siirtymä: kaikki 0,2s helpottavat; -webkit-siirtymä: kaikki 0,2s helpottavat; -ms-siirtymä: kaikki 0,2s helpottavat; siirtymä: kaikki 0,2 sekunnit helpottavat;
24. Keskeytä ja toista CSS-animaatioita
Val Head, suunnittelija ja konsultti
Voit keskeyttää ja toistaa CSS-animaation muuttamalla sitä animaatio-toistotila omaisuus. Jos asetat sen keskeytetyksi, animaatio pysähtyy, kunnes muutat sitä animaatio-toistotila että käynnissä, esimerkiksi leijuu.
.animating_thing {animaatio: pyöritä 10s lineaarista ääretöntä; animaatio-toistotila: keskeytetty; }. animating_thing: hover {animation-play-state: käynnissä; }
25. Älä käytä CSS-muuttujia
Dave Shea, suunnittelija ja kirjailija
Saamme vihdoin CSS-muuttujia, esimerkiksi kirjoittamaan värin hex-arvon kerran ja viittaamaan siihen tyylitaulukon kautta. Mutta virallinen spesifikaatio on monipuolinen, lisää syntaktista monimutkaisuutta, tarjoaa ylivoimaista toiminnallisuutta ja useimmat selaimet eivät tue sitä suurelta osin. Aikana, jossa Sass on laajalti suosittu ja ylittää muuttujat, joilla on tehokas ohjelmointilogiikka, kuten mukautetut toiminnot ja if / else-lauseet, virallinen spesifikaatio on kaukana.
Toivottavasti nämä parhaat vinkit ovat uudistaneet näkemyksesi CSS: stä ja sen tarjoamista mahdollisuuksista web-kehityksessä ja suunnittelussa. Älä unohda testata mitään näistä tekniikoista perusteellisesti tarkistaaksesi selaimen tuen ennen työn aloittamista.
Sanat: Craig Grannell Kuva: Mike Chipperfield
Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 253.
