Innehåll
- 01. Matcha bilder med platsfärgscheman
- 02. Dela jämnt utrymme i rutnätets sista rad
- 03. Skapa partikelanimationer med box-shadow
- 04. Animera polyeder med transformer
- 05. Master ’calc ()’ för positionering
- 06. Gör lådmodellen sund med 'box-dimensionering'
- 07. Vertikalt centrum med CSS
- 08. Rikta in en bank med relaterade objekt
- 09. Kontrollavstavning
- 10. Dra nytta av att skriva lägen
- 11. Använd lutningar på ovanliga sätt
- 12. Använd strängmatchning på länkar
- 13. Låt FOUT fungera för dig
- 14. Utforska SVG för bakgrunder
- 15. Fokusera användare med 3D-övergångar
- 16. Skapa cirkulära menyer med CSS och matematik
- 17. Animera länkar på svävaren
- 18. Gör enkla keyframe-animationer
- 19. Skapa flytande 3D-effekter med skuggor
- 20. Uppdatera sidelement med ': target'
- 21. Ge feedback med subtila animationer
- 22. Förbered dig för 'kommer att animera'
- 23. Humanisera inmatningsfält
- 24. Pausa och spela upp CSS-animationer
- 25. Använd inte CSS-variabler
Vid någon tidpunkt med vilken teknik som helst, finns det en känsla av att i stort sett allt som kan göras har gjorts. När något inte längre är lika nytt och glänsande minskar intresset och uppmärksamheten på nästa stora sak. Detta har ofta varit fallet i webbindustrin, som är benägen att bli väldigt upphetsad av en viss aspekt av teknik innan, förr eller senare, förflyttar den till det vardagliga.
När CSS först dök upp var det revolutionerande, och med tiden har det utvecklats för att göra det möjligt för designers att skapa flexibla, tätt utformade och vackra webbsidlayouter. För sent har det dock kommit från olika håll att CSS är trött och kanske har tiden i solen gått.
Jag vill visa att det fortfarande finns massor av spänning och liv i CSS-världen, oavsett om det är i banbrytande egenskaper du kanske inte har utforskat ännu, eller genom att använda en aspekt av CSS på ett sätt som du inte tidigare hade övervägt.
Här är några tips från några av branschens bästa CSS-experter.
(Obs! Vissa tekniker i den här funktionen är banbrytande och kanske inte stöds fullt ut i alla webbläsare. Testa noggrant och se till att fall är på plats innan du gör något arbete live.)
01. Matcha bilder med platsfärgscheman
Christopher Schmitt, konferensarrangör
Konferenser har sina egna färgscheman och med många högtalare kan arbetsflöden för hantering av porträtt vara komplicerade. Att tillämpa filter manuellt kan inte skala och är beroende av att du har tillgång till, till exempel, en specifik Photoshop-åtgärd. Jag använder nu högupplösta PNG-filer i gråskala och lägger till toner med CSS-filter. Detta gör det möjligt för mig att matcha vilket porträtt som helst till ett evenemangs schema och även återanvända bilder i flera teman. Jag behöver bara en ny CSS-regel för varje. Se en demo.
02. Dela jämnt utrymme i rutnätets sista rad
Stephen Hay, designer och författare
Om du har ett okänt antal objekt som ska visas i ett rutnät kan du använda Flexbox för att dela den sista raden jämnt. Så om det bara finns ett objekt tar det upp hela raden; om det finns två objekt kommer raden att delas upp i halva och så vidare. Se en demo.
03. Skapa partikelanimationer med box-shadow
Ana Tudor, kodare och matematikfanatiker
Genom att blanda box-skugga med lite matematik och Sass kan du rita 2D-kurvor, emulera 3D-rörelse och skapa galna partikelanimationer som alla kommer att göra misstag för på canvas! Se en demo och en annan.
04. Animera polyeder med transformer
Ana Tudor, kodare och matematikfanatiker
Du har förmodligen sett rena CSS-polygoner skapade med gränser, men vi har ett mycket kraftfullare verktyg i omvandla fast egendom. Kedjning och tillämpning av transformationer på kapslade element gör att vi kan skapa komplexa polygoner med bildbakgrunder eller gränser och genomskinliga interiörer. Med hjälp av 3D-omvandlingar kan vi kombinera dessa 2D-former i polyeder och få fasta ämnen att smälta samman, utvecklas, explodera eller rekombineras på ett sätt som lätt kan förväxlas med WebGL. Se en demo.
05. Master ’calc ()’ för positionering
Ana Tudor, kodare och matematikfanatiker
jag älskade calc () från det ögonblick jag upptäckte det. Det är användbart för att tämja marginaler, stoppning eller dimensioner och kan vara en livräddare när den används för att placera eller dimensionera bakgrunder, inuti lutningar eller omvandlingar, och kombineras inte bara med samma gamla enheter utan också de nya och coola visningsportarna.
06. Gör lådmodellen sund med 'box-dimensionering'
Sawyer Hollenshead, Oak Studios utvecklare och designer
Använda sig av box-dimensionering för att rädda din förnuft. Utan det kombineras ett element med en definierad bredd på 250px och 25px med vaddering till en bredd på 300px, vilket gör blandningspixlar och procentsatser tuffa. Med box-dimensionering:border-box ramar och stoppning placeras istället inom den definierade bredden.
07. Vertikalt centrum med CSS
Trent Walton, grundare av Paravel
Historiskt har det varit svårt att vertikalt centrera något med CSS, till exempel om du har en bild med intilliggande text som du vill ha vertikalt justerad. I stället för att trampa och förbanna, använd Flexbox för att hantera justeringsproblem. Se en demo.
08. Rikta in en bank med relaterade objekt
Jonathan Smiley, Zurb-partner och designledare
Raka CSS-linjevikt genom att använda ungefärliga attributväljare på klassnamn för att rikta in dig på en stor grupp med relaterade objekt snarare än att fästa vanliga attribut till varje enskild klass. Till exempel ... [class * = "- block-grid-"] {} ... skulle rikta sig mot följande: .small-block-grid-3 .large-block-grid-5
09. Kontrollavstavning
Savid Storey, öppen webbadvokat
Avstavning tas för givet i tryck, och vissa utvecklare använder bindestreck egendom online, men få är medvetna om andra fastigheter som ger bättre kontroll. Om du inte är försiktig får du avstavningsstegar där bindestreck används över flera linjer. En allmän tumregel är inte mer än två i rad, som du kan styra med bindestreck-gränslinjer. Också, bindestreck-gräns-tecken låter dig ange den minsta längden på ett ord som ska bindestreck, tillsammans med det minsta antalet tecken före och efter bindestreckbrytningen.
10. Dra nytta av att skriva lägen
David Storey, öppen webbadvokat
Skrivningslägen gör att du kan definiera i vilken riktning texten flyter. En del östasiatisk text är skriven vertikalt, linjer som växer från höger till vänster, specificeras med skrivläge: vertikal-rl (tb-rl i IE). Vertikal text används inte riktigt i europeiska skrivsystem, men kan vara praktiskt för bordsrubriker när du har begränsat horisontellt utrymme.
11. Använd lutningar på ovanliga sätt
Ruth John, designer
Bakgrundsgradienter kan se bra ut när de används med gränser och kulor. Jag använder både på min blogg och med en förprocessor kan jag ringa en mixin med den återanvända koden för att inte upprepa den manuellt. Gå inte supergalen eftersom lutningar kan vara processortunga. SCSS mixin för listkulor:
@mixin gradedBullet ($ color) {bakgrundsbild: linjär-gradient (vänster, ljusare ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, transparent 31px); }
12. Använd strängmatchning på länkar
Ruth John, designer
På min blogg har jag använt CSS-attributväljare med strängmatchning till sociala ikoner. Dessa visas i hela min blogg, ibland med text och ibland utan, men alltid med en ikon. För att utforma rätt länk med rätt social ikon använder jag en strängmatchning på href ankarelementets attribut. jag använder *= så den href på ankarelementet måste bara innehålla den sträng jag anger.
/ * för alla sociala länkar * /. social a: före {display: inline-block; stoppning-höger: 30 pixlar; font-family: ’FontAwesome’;} / * Varje specifik länk * /. social a [href * = "twitter"]: före {content: " f099"; färg: # 52ae9f;}. social a [href * = "github"]: före {content: " f09b"; färg: # 5f2e44;}. social a [href * = "feed"]: före {content: " f09e"; färg: # b47742;}
13. Låt FOUT fungera för dig
Jason Pamental, rektor på H + W design
Webben bygger på förutsättningen att den ska leverera innehåll, även om webbläsaren inte kan återge bling. Långsamt laddade webbteckensnitt kan vara frustrerande, FOUT (Flash Of Unstyled Text) skakar när navigering och text återflödar medan teckensnitt laddas ner. Google och Typekit ger ett svar: web-font loader. Genom att injicera klasser på en sida, baserat på teckensnitts laddningsstatus, kan du utforma fallbackar med dessa klasser för att hålla återflödet till ett minimum, vilket också raderar WebKits syndrom med 'osynligt innehåll'. Se en demo.
14. Utforska SVG för bakgrunder
Emil Björklund, inUse webbutvecklare
De enda webbläsarna utan SVG-stöd är IE8 och senare och Android 2 WebKit, och det är därför möjligt att använda SVG för bakgrunder i CSS, särskilt tillsammans med en PNG-reservlösning, till exempel Grunticon. SVG kan utformas av CSS, och det finns intressant genomblödning av CSS-egenskaper (filter!) Från SVG som vi kan spela med när de tillämpas på HTML.
15. Fokusera användare med 3D-övergångar
Emil Björklund, inUse webbutvecklare
Använda 3D-omvandlingar och använda z-dimension i användargränssnitt kan vara väldigt användbart, särskilt för att dölja / visa eller kollapsa / expandera innehåll. Det är också ganska enkelt att ha en reserv till en 2D-övergång, eller ingen övergång alls, i dessa situationer. Det är ett område där lite progressiv förbättring kan gå långt.
16. Skapa cirkulära menyer med CSS och matematik
Sara Soueidan, frontend-utvecklare
Cirkulära menyer är populära i mobilappar, och du kan använda CSS-omvandlingar och övergångar för att skapa en enkel cirkulär meny. Den här menyn kan ändras och anpassas för att skapa en uppåt- eller nedåtgående meny. Det finns inget direkt sätt i CSS att översätta ett objekt diagonalt, men du kan använda värdet av cirkelns radie som du vill placera objekten på, och tillämpa en enkel matematisk regel för att beräkna de horisontella och vertikala översättningsvärdena för att passera till translateX () och översätt Y () funktioner. På det sättet slutar du med en diagonal översättning för att flytta menyalternativen till rätt position i cirkeln. Klickhändelsen som stänger / öppnar menyn kan hanteras med JavaScript, eller så kan du ta det ett steg längre och ha en CSS-meny med en CSS-kryssruta. I min demo använder jag JavaScript och HTML5 classList API, som inte stöds i alla webbläsare, så du måste se demo i en modern webbläsare för att få det att fungera, eller avmarkera jQuery-koden istället för att använda classList API koda.
Se en demo och en fullständig handledning. CSS Checkbox hack exempel.
17. Animera länkar på svävaren
Paul Lloyd, The Guardian interaktionsdesigner
Hover-stater bör inte lita på att en åtgärd fungerar eller ger viktig information, men du kan fortfarande förbättra gränssnitt för musbaserade användare. På 24ways.org avslöjar vi artikeltitlar när du svävar över länkar i föregående / nästa navigering. Detta uppnåddes genom att skapa en ::efter pseudo-element som innehåller genererat innehåll från värdet av a data- attribut, med en CSS-övergång applicerad för att få den att glida in i vyn. Se en demo.
18. Gör enkla keyframe-animationer
Paul Lloyd, interaktionsdesignern The Guardian
På 24ways.org lade vi till animerade hörnflikar i sammanfattningar som öppnades på svävar. Detta gjordes genom att kombinera @keyframes härska med animeringsegenskapen och ändra positionen för en bakgrundsbild för att uppnå sprite-baserad animering. Tricket är att deklarera antalet bilder du har i din animationssprite med steg() värde. Se en demo.
19. Skapa flytande 3D-effekter med skuggor
Catherine Farman, Happy Cog-utvecklare
Ett nyligen genomfört projekt krävde ett flytande produktfoto med en rund skugga under, vilket skapade en 3D-effekt av att poppa från skärmen. Skuggan använder flera CSS3-funktioner: gränsradie alfa-transparens och box-skugga. Det fungerar bra för produktnät, utställningsbilder i en hemsidahjälte eller någon nyckfull design med en skeuomorf böjning. Se en demo.
20. Uppdatera sidelement med ': target'
Simon Madine, HeRe senior webbutvecklare
CSS är inte ett programmeringsspråk i vanlig mening, men du kan ändå göra smarta saker utan att falla tillbaka till JavaScript. Till exempel :mål pseudoklass tillämpas på element som är målet för en klickad länk.
Du kan använda detta för att definiera tillståndet på en sida, rikta in dig på en förälder som innehåller många element, och dina länkar blir ett sätt att styra utseendet och layouten för alla barn med ett enda klick. Se en demo.
21. Ge feedback med subtila animationer
Neil Renicker, designer och utvecklare
CSS-pseudoelement ::innan och ::efter tillsammans med CSS-övergångar kan aktivera härlig animering som ger subtil feedback till musanvändare. Bygg till exempel en CSS-pil inom ett pseudo-element, använd en övergång till pseudo-elementet (övergång: alla lätt-in-ut-.15s;) och lägg sedan till en enkel layoutändring i :sväva pseudoklass (som att ändra marginal-topp). Se en demo.
22. Förbered dig för 'kommer att animera'
Paul Lewis, teammedlem för kodare och Chrome-utvecklarrelationer
Om du har använt -webkit-transform: translateZ (0) för att magiskt göra dina sidor snabbare ersätts hacket, som i många webbläsare helt enkelt skapar ett nytt kompositorlager, av kommer att animera. Snart kommer du att kunna berätta för webbläsaren vad du planerar att ändra om ett element (dess position, storlek, innehåll eller rullningsposition) och webbläsaren tillämpar rätt optimering under huven. Mer information.
23. Humanisera inmatningsfält
Yaron Schoen, grundare av Made For Humans
Att lägga till snabba animationer till element som användare interagerar med gör att ett gränssnitt känns mindre dator. Med inmatningsfält, försök sätta ett övergångssamtal inom, så när du fokuserar eller avfokuserar det blir det en smidig övergång.
input, textarea {-moz-transition: alla 0,2s underlättar; -o-övergång: alla 0,2s lätthet; -webkit-övergång: alla 0,2s underlättar; -ms-övergång: alla 0,2s lätthet; övergång: alla 0,2s lätthet;
24. Pausa och spela upp CSS-animationer
Val Head, designer och konsult
Du kan pausa och spela upp CSS-animering genom att ändra dess animation-play-state fast egendom. Om du ställer in den på 'pausad' stoppas din animering på plats tills du ändrar animation-play-state till löpning, till exempel på svävar.
.animating_thing {animation: spin 10s linjär oändlig; animation-play-state: pausad; }. animating_thing: hover {animation-play-state: running; }
25. Använd inte CSS-variabler
Dave Shea, designer och författare
Vi får äntligen CSS-variabler, till exempel för att skriva en färgs hex-värde en gång och referera det genom ett formatmall. Men den officiella specifikationen är omfattande, lägger till syntaktisk komplexitet, erbjuder överväldigande funktionalitet och stöds till stor del inte av de flesta webbläsare. I en era där Sass är mycket populär och går utöver variabler med kraftfull programmeringslogik som anpassade funktioner och om / annat uttalanden kommer den officiella specifikationen långt kort.
Förhoppningsvis har de här topptipsen förnyat din syn på CSS och de möjligheter den representerar inom webbutveckling och design. Glöm inte att testa någon av dessa tekniker noggrant för att kontrollera webbläsarens support innan du sätter igång något arbete.
Ord: Craig Grannell Illustration: Mike Chipperfield
Den här artikeln uppträdde ursprungligen i nettidskrift nummer 253.
