Innhold
- 01. Match bilder til områdets fargevalg
- 02. Del plass i rutenettets siste rad jevnt
- 03. Lag partikkelanimasjoner med box-shadow
- 04. Animer polyeder med transformasjoner
- 05. Master ’calc ()’ for posisjonering
- 06. Gjør boksmodellen tilregnelig med 'boksstørrelse'
- 07. Vertikalt senter med CSS
- 08. Målrett mot en bank med relaterte objekter
- 09. Kontrollstavdeling
- 10. Dra nytte av skrivemodus
- 11. Bruk graderinger på uvanlige måter
- 12. Bruk streng-matching på lenker
- 13. Få FOUT til å fungere for deg
- 14. Utforsk SVG for bakgrunner
- 15. Fokusere brukere med 3D-overganger
- 16. Lag sirkulære menyer med CSS og matematikk
- 17. Animer lenker på sveve
- 18. Lag enkle keyframe-animasjoner
- 19. Lag flytende 3D-effekter med skygger
- 20. Oppdater sideelementer ved hjelp av ': target'
- 21. Gi tilbakemelding med subtile animasjoner
- 22. Forbered deg på 'vil-animere'
- 23. Humaniser innspillfelt
- 24. Stopp og spill CSS-animasjoner
- 25. Ikke bruk CSS-variabler
På et eller annet tidspunkt med hvilken som helst teknologi, er det en følelse av at stort sett alt som kan gjøres har blitt gjort. Når noe ikke lenger er like nytt og skinnende, avtar interessen og oppmerksomheten mot den neste store tingen. Dette har ofte vært tilfelle i nettbransjen, som er tilbøyelig til å bli veldig begeistret av et visst aspekt av teknologien før, før eller senere, forvandler den til det verdslige.
Da CSS første gang dukket opp, var det revolusjonerende, og over tid har det utviklet seg for å gjøre det mulig for designere å lage fleksible, tett utformede og vakre nettsideoppsett. For sent har det imidlertid kommet forslag fra forskjellige hold om at CSS er sliten og kanskje tiden i solen har gått.
Jeg vil vise at det fortsatt er mye spenning og liv i CSS-verdenen, enten det er i banebrytende egenskaper du kanskje ikke har utforsket ennå, eller gjennom å bruke et aspekt av CSS på en måte du ikke tidligere hadde vurdert.
Her er noen tips fra noen av bransjens beste CSS-eksperter.
(Merk: Noen teknikker i denne funksjonen er banebrytende og støttes kanskje ikke fullt ut i alle nettlesere. Test og forsikre deg om at tilbakefall er på plass før du gjør noe arbeid live.)
01. Match bilder til områdets fargevalg
Christopher Schmitt, konferansearrangør
Konferanser har sine egne fargevalg, og med mange høyttalere kan arbeidsflyten for å administrere portretter være komplisert. Å bruke filtre manuelt skaleres ikke og er avhengig av at du har tilgang til, for eksempel, en bestemt Photoshop-handling. Jeg bruker nå høyoppløselige PNG-er i gråtoner og legger til toner ved hjelp av CSS-filtre. Dette gjør det mulig for meg å matche ethvert portrett til et arrangement, og å også bruke bilder på flere temaer. Jeg trenger bare en ny CSS-regel for hver. Se en demo.
02. Del plass i rutenettets siste rad jevnt
Stephen Hay, designer og forfatter
Hvis du har et ukjent antall elementer som skal vises i et rutenett, kan du bruke Flexbox til å dele den siste raden jevnt. Så hvis det bare er ett element, vil det ta opp hele raden; hvis det er to elementer, blir raden delt i to, og så videre. Se en demo.
03. Lag partikkelanimasjoner med box-shadow
Ana Tudor, koder og matematiker
Ved å blande bokseskygge med litt matte og Sass kan du tegne 2D-kurver, etterligne 3D-bevegelse og lage sprø partikkelanimasjoner som alle kommer til å feile med lerret! Se en demo og en annen.
04. Animer polyeder med transformasjoner
Ana Tudor, koder og matematiker
Du har sannsynligvis sett rene CSS-polygoner opprettet med grenser, men vi har et mye kraftigere verktøy i forvandle eiendom. Ved å lenke og bruke transformasjoner på nestede elementer, kan vi lage komplekse polygoner med bakgrunner eller rammer og gjennomsiktig interiør. Ved hjelp av 3D-transformasjoner kan vi kombinere disse 2D-figurene i polyeder og få de faste stoffene til å smelte sammen, brette ut, eksplodere eller rekombinere på en måte som lett kan forveksles med WebGL. Se en demo.
05. Master ’calc ()’ for posisjonering
Ana Tudor, koder og matematikerfanatiker
jeg elsket calc () fra det øyeblikket jeg oppdaget det. Den er nyttig for å temme marginer, polstring eller dimensjoner, og kan være en livredder når den brukes til å plassere eller dimensjonere bakgrunner, i gradienter eller transformasjoner, og kombinert ikke bare med de samme gamle enhetene, men også de nye og kule visningsportene.
06. Gjør boksmodellen tilregnelig med 'boksstørrelse'
Sawyer Hollenshead, Oak Studios dev og designer
Bruk boksstørrelse for å redde sunn fornuft. Uten den kombineres et element med en definert bredde på 250px og 25px med polstring til en bredde på 300px, noe som gjør blandepiksler og prosenter tøffe. Med boksstørrelse:border-box rammer og polstring plasseres i stedet innenfor den definerte bredden.
07. Vertikalt senter med CSS
Trent Walton, grunnlegger av Paravel
Historisk har det vært vanskelig å sentrere noe med CSS, for eksempel hvis du har et bilde med tilstøtende tekst du vil ha loddrett justering. I stedet for å trampe og forbanne, bruk Flexbox for å håndtere justeringsvansker. Se en demo.
08. Målrett mot en bank med relaterte objekter
Jonathan Smiley, Zurb-partner og designleder
Barber CSS-linjevekt ved å bruke tilnærmet attributtvelgere på klassenavn, for å målrette mot en stor bank med relaterte objekter, i stedet for å feste vanlige attributter til hver enkelt klasse. For eksempel ... [class * = "- block-grid-"] {} ... vil målrette mot slike som: .small-block-grid-3 .large-block-grid-5
09. Kontrollstavdeling
Savid Storey, åpen nettadvokat
Bindestrek er tatt for gitt på trykk, og noen utviklere bruker bindestreker eiendom på nettet, men få er klar over andre eiendommer som gir bedre kontroll. Hvis du ikke er forsiktig, får du orddelestiger der bindestrek brukes på flere linjer. En generell tommelfingerregel er ikke mer enn to på rad, som du kan kontrollere ved hjelp av bindestrek-grenselinjer. Også, bindestrek-tegn lar deg spesifisere minimumslengden på et ord som skal bindestrek, sammen med minimum antall tegn før og etter bindestrekbruddet.
10. Dra nytte av skrivemodus
David Storey, åpen nettadvokat
Med skrivemodus kan du definere retningen som teksten flyter i. Noe østasiatisk tekst er skrevet vertikalt, linjer vokser fra høyre til venstre, spesifisert med skrivemodus: vertikal-rl (tb-rl i IE). Vertikal tekst brukes ikke egentlig i europeiske skriftsystemer, men kan være nyttig for tabelloverskrifter når du har begrenset horisontal plass.
11. Bruk graderinger på uvanlige måter
Ruth John, designer
Bakgrunnsgraderinger kan se bra ut når de brukes med rammer og kuler. Jeg bruker både på bloggen min og med en forprosessor kan jeg ringe en mixin med den gjenbrukte koden, for ikke å gjenta den manuelt. Ikke bli supercrazy fordi stigninger kan være prosessortunge. SCSS mixin for listekuler:
@mixin gradedBullet ($ color) {bakgrunnsbilde: lineær gradient (venstre, lysere ($ color, 15%) 10px, $ color 11px, $ color 20px, mørkere ($ color, 15%) 21px, darken ($ color , 15%) 30px, gjennomsiktig 31px); }
12. Bruk streng-matching på lenker
Ruth John, designer
På bloggen min har jeg brukt CSS-attributtvelgere med strengtilpasning til sosiale ikoner. Disse vises i bloggen min, noen ganger med tekst og noen ganger uten, men alltid med et ikon. For å style den riktige lenken med riktig sosialt ikon, bruker jeg en strengkamp på href attributtet til ankerelementet. jeg bruker *= så href på ankerelementet må bare inneholde strengen jeg spesifiserer.
/ * for alle sosiale lenker * /. sosial a: før {display: inline-block; polstring-høyre: 30px; font-family: ’FontAwesome’;} / * Hver spesifikke lenke * /. sosial a [href * = "twitter"]: før {content: " f099"; farge: # 52ae9f;}. sosial a [href * = "github"]: før {innhold: " f09b"; farge: # 5f2e44;}. sosial a [href * = "feed"]: før {content: " f09e"; farge: # b47742;}
13. Få FOUT til å fungere for deg
Jason Pamental, rektor ved H + W design
Internett er basert på forutsetningen at det skal levere innhold, selv om nettleseren ikke kan gjengi bling. Langsomt lastede nettfonter kan være frustrerende, FOUT (Flash Of Unstyled Text) skriker når navigasjon og tekst flyter mens fontene lastes ned. Google og Typekit gir et svar: web-font loader. Ved å injisere klasser på en side, basert på innlasting av skrifter, kan du style tilbakefall med disse klassene for å holde reflow på et minimum, og også utrydde WebKits syndrom med 'usynlig innhold'. Se en demo.
14. Utforsk SVG for bakgrunner
Emil Björklund, inUse webutvikler
De eneste nettleserne som ikke har SVG-støtte, er IE8 og derunder og Android 2 WebKit, og det er derfor mulig å bruke SVG for bakgrunner i CSS, spesielt sammen med en PNG-løsning, for eksempel Grunticon. SVG kan utformes av CSS, og det er interessant gjennomblåsning av CSS-egenskaper (filtre!) Fra SVG som vi kan spille med når de brukes på HTML.
15. Fokusere brukere med 3D-overganger
Emil Björklund, inUse webutvikler
Ved hjelp av 3D-transformasjoner og bruk av z-dimensjon i brukergrensesnitt kan være veldig nyttig, spesielt for å skjule / vise eller kollapse / utvide innhold. Det er også ganske enkelt å ha tilbakefall til en 2D-overgang, eller ingen overgang i det hele tatt, i slike situasjoner. Det er et område der litt progressiv forbedring kan komme langt.
16. Lag sirkulære menyer med CSS og matematikk
Sara Soueidan, frontend utvikler
Sirkulære menyer er populære i mobilapper, og du kan bruke CSS-transformasjoner og overganger for å lage en enkel sirkulær meny. Denne menyen kan endres og tilpasses for å lage en meny som åpner oppover eller nedover. Det er ingen direkte måte i CSS å oversette et element diagonalt, men du kan bruke verdien av sirkelens radius som du vil plassere elementene på, og bruke en enkel matematisk regel for å beregne de horisontale og vertikale oversettelsesverdiene som skal overføres til translateX () og oversette Y () funksjoner. På den måten ender du opp med en diagonalt oversettelse for å flytte menyelementene til de riktige plasseringene i sirkelen. Klikkhendelsen som lukker / åpner menyen kan håndteres ved hjelp av JavaScript, eller du kan ta det et skritt videre og ha en bare CSS-meny ved å bruke et CSS-avkrysningsrutehack. I min demo bruker jeg JavaScript og HTML5 classList API, som ikke støttes i alle nettlesere, så du må se demoen i en moderne nettleser for å få den til å fungere, eller fjerne kommentaren til jQuery-koden i stedet for å bruke classList API kode.
Se en demo og full opplæring. CSS Checkbox hackeksempel.
17. Animer lenker på sveve
Paul Lloyd, interaksjonsdesigner The Guardian
Du må ikke stole på musepekeren for å få en handling til å fungere eller gi viktig informasjon, men du kan fortsatt forbedre grensesnittene for musebaserte brukere. På 24ways.org avslører vi artikkeltitler når du holder markøren over lenker i forrige / neste navigasjon. Dette ble oppnådd ved å lage en ::etter pseudo-element som inneholder generert innhold hentet fra verdien av en data- attributt, med en CSS-overgang påført for å få den til å vises på sveve. Se en demo.
18. Lag enkle keyframe-animasjoner
Paul Lloyd, The Guardian interaksjonsdesigner
På 24ways.org la vi til animerte hjørneflapper i sammendrag, som ble åpnet. Dette ble gjort ved å kombinere @keyframes regjer med animasjonsegenskapen, og endre posisjonen til et bakgrunnsbilde for å oppnå sprite-basert animasjon. Trikset er å erklære antall rammer du har i animasjonssprite med trinn () verdi. Se en demo.
19. Lag flytende 3D-effekter med skygger
Catherine Farman, Happy Cog-utvikler
Et nylig prosjekt krevde et flytende produktfoto med en rund skygge under, og skapte en 3D-effekt av å poppe av skjermen. Skyggen bruker flere CSS3-funksjoner: grense-radius alfa gjennomsiktighet og bokseskygge. Det fungerer bra for produktnett, utstillingsbilder i en hjemmesidehelt eller noe lunefullt design med en skeuomorf bøyning. Se en demo.
20. Oppdater sideelementer ved hjelp av ': target'
Simon Madine, senior utvikler av HeRe
CSS er ikke et programmeringsspråk i vanlig forstand, men du kan fortsatt gjøre smarte ting uten å falle tilbake til JavaScript. For eksempel :mål pseudoklasse brukes på elementer som er målet for en klikket lenke.
Du kan bruke dette til å definere tilstanden til en side, målrette en forelder som inneholder mange elementer, og koblingene dine blir et middel til å kontrollere utseendet og utformingen til alle barna med et enkelt klikk. Se en demo.
21. Gi tilbakemelding med subtile animasjoner
Neil Renicker, designer og utvikler
CSS pseudo-elementer ::før og ::etter sammen med CSS-overganger, kan aktivere herlig animasjon som gir subtile tilbakemeldinger til musebrukere. Bygg for eksempel en CSS-pil i et pseudo-element, bruk en overgang til pseudo-elementet (overgang: alle let-in-out .15s;), og legg deretter til en enkel layoutendring i :sveve pseudoklasse (for eksempel endring margin-topp). Se en demo.
22. Forbered deg på 'vil-animere'
Paul Lewis, teammedlem for koder og Chrome-utviklerrelasjoner
Hvis du har brukt -webkit-transform: translateZ (0) for å magisk gjøre sidene dine raskere, blir hacket, som i mange nettlesere ganske enkelt skaper et nytt komponistlag, erstattet av vil-animere. Snart vil du kunne fortelle nettleseren hva du planlegger å endre om et element (dets posisjon, størrelse, innhold eller rulleposisjon), og nettleseren vil bruke riktig optimalisering under panseret. Mer informasjon.
23. Humaniser innspillfelt
Yaron Schoen, grunnlegger av Made For Humans
Å legge til raske animasjoner til elementer som brukerne kommuniserer med, gjør at et grensesnitt føles mindre datamaskint. Med inntastingsfelt kan du prøve å sette overgangssamtale innenfor, så når du fokuserer eller ikke fokuserer det, er det en jevn overgang.
input, textarea {-moz-transition: alle 0,2s lette; -o-overgang: alle 0,2s lette; -webkit-overgang: alle 0,2s lette; -ms-overgang: alle 0,2s lette; overgang: alle 0,2s lette;
24. Stopp og spill CSS-animasjoner
Val Head, designer og konsulent
Du kan 'pause' og 'spille' CSS-animasjon ved å endre dens animasjon-spill-tilstand eiendom. Hvis du setter den til “pauset”, stopper animasjonen din på plass til du endrer deg animasjon-spill-tilstand til løping, for eksempel på sveve.
.animating_thing {animasjon: spin 10s lineær uendelig; animasjon-spill-tilstand: pauset; }. animating_thing: hover {animation-play-state: running; }
25. Ikke bruk CSS-variabler
Dave Shea, designer og forfatter
Vi får endelig CSS-variabler, for eksempel for å skrive en farges hexverdi en gang og referere den gjennom et stilark. Men den offisielle spesifikasjonen er utførlig, legger til syntaktisk kompleksitet, tilbyr overveldende funksjonalitet og støttes stort sett ikke av de fleste nettlesere. I en tid der Sass er populært og går utover variabler med kraftig programmeringslogikk som tilpassede funksjoner og hvis / annet uttalelser, kommer den offisielle spesifikasjonen langt opp.
Forhåpentligvis har disse topptipsene fornyet ditt syn på CSS og mulighetene det representerer innen webutvikling og design. Ikke glem å teste noen av disse teknikkene grundig for å sjekke nettstøtten før du setter i gang noe arbeid.
Ord: Craig Grannell Illustrasjon: Mike Chipperfield
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 253.
