Indhold
- 01. Match billeder med stedets farveskemaer
- 02. Del jævnt plads i gitterets sidste række
- 03. Opret partikelanimationer med box-shadow
- 04. Animer polyeder med transformationer
- 05. Master ’calc ()’ til positionering
- 06. Gør kassen model sane med 'box-dimensionering'
- 07. Lodret centreret med CSS
- 08. Målret mod en bank med relaterede objekter
- 09. Kontrolinddeling
- 10. Udnyt skrivetilstandene
- 11. Brug gradienter på usædvanlige måder
- 12. Brug streng-matching på links
- 13. Få FOUT til at fungere for dig
- 14. Udforsk SVG for baggrunde
- 15. Fokus brugere med 3D-overgange
- 16. Opret cirkulære menuer med CSS og matematik
- 17. Animer links på svæver
- 18. Lav enkle keyframe-animationer
- 19. Opret flydende 3D-effekter med skygger
- 20. Opdater sideelementer ved hjælp af ': target'
- 21. Giv feedback med subtile animationer
- 22. Forbered dig på 'vil-animere'
- 23. Humaniser inputfelter
- 24. Pause og afspil CSS-animationer
- 25. Brug ikke CSS-variabler
På et eller andet tidspunkt med enhver teknologi er der en følelse af, at stort set alt, hvad der kan gøres, er gjort. Når noget ikke længere er lige så nyt og skinnende, aftager interessen og opmærksomheden på den næste store ting. Dette har ofte været tilfældet i webbranchen, som er tilbøjelig til at blive frygtelig begejstret for et bestemt aspekt af teknologi før før eller senere forvandler det til det verdslige.
Da CSS først dukkede op, var det revolutionerende, og over tid har det udviklet sig til at gøre det muligt for designere at skabe fleksible, tæt udformede og smukke websidelayouter. For sent har der imidlertid været et forslag fra forskellige kanter om, at CSS er træt, og måske er tiden i solen gået.
Jeg vil fremvise, at der stadig er masser af spænding og liv i CSS-verdenen, hvad enten det drejer sig om banebrydende egenskaber, som du måske endnu ikke har udforsket, eller ved at bruge et aspekt af CSS på en måde, du ikke tidligere havde overvejet.
Her er nogle tip fra nogle af branchens førende CSS-eksperter.
(Bemærk: Nogle teknikker i denne funktion er banebrydende og understøttes muligvis ikke fuldt ud i alle browsere. Test og sørg grundigt for, at tilbagefald er på plads, inden du gør noget arbejde live.)
01. Match billeder med stedets farveskemaer
Christopher Schmitt, konferencearrangør
Konferencer har deres egne farveskemaer, og med mange højttalere kan workflow til styring af portrætter være komplekse. Manuel anvendelse af filtre skaleres ikke og er afhængig af, at du har adgang til f.eks. En bestemt Photoshop-handling. Jeg bruger nu PNG'er i høj opløsning i gråtoner og tilføjer toner ved hjælp af CSS-filtre. Dette giver mig mulighed for at matche ethvert portræt til en begivenheds plan og også genbruge billeder på tværs af flere temaer. Jeg har bare brug for en ny CSS-regel for hver. Se en demo.
02. Del jævnt plads i gitterets sidste række
Stephen Hay, designer og forfatter
Hvis du har et ukendt antal elementer, der skal vises i et gitter, kan du bruge Flexbox til at opdele den sidste række jævnt. Så hvis der kun er et element, tager det hele rækken op; hvis der er to emner, deles rækken i to osv. Se en demo.
03. Opret partikelanimationer med box-shadow
Ana Tudor, koder og matematikfanatiker
Ved blanding box-shadow med nogle matematik og Sass kan du tegne 2D-kurver, efterligne 3D-bevægelse og skabe skøre partikelanimationer, som alle fejler med lærred! Se en demo og en anden.
04. Animer polyeder med transformationer
Ana Tudor, koder og matematikfanatiker
Du har sandsynligvis set rene CSS-polygoner oprettet med grænser, men vi har et meget mere kraftfuldt værktøj i transformere ejendom. Kædning og anvendelse af transformationer på indlejrede elementer giver os mulighed for at skabe komplekse polygoner med billedbaggrund eller grænser og gennemsigtige interiører. Ved hjælp af 3D-transformationer kan vi kombinere disse 2D-figurer i polyeder og få de faste stoffer til at flette, udfolde sig, eksplodere eller rekombineres på en måde, der let forveksles med WebGL. Se en demo.
05. Master ’calc ()’ til positionering
Ana Tudor, koder og matematikfanatiker
jeg elskede calc () fra det øjeblik, jeg opdagede det. Det er nyttigt til at tæmme margener, polstring eller dimensioner og kan være en livredder, når det bruges til at placere eller dimensionere baggrunde, inden for gradienter eller transformationer og kombineret ikke kun med de samme gamle enheder, men også de nye og seje visningsport.
06. Gør kassen model sane med 'box-dimensionering'
Sawyer Hollenshead, Oak Studios dev og designer
Brug boksstørrelse for at redde din sundhed. Uden det kombineres et element med en defineret bredde på 250 pixel og 25 pixel polstring til en bredde på 300 pixel, hvilket gør blanding af pixels og procenter hårde. Med boksstørrelse:border-box kanter og polstring placeres i stedet inden for den definerede bredde.
07. Lodret centreret med CSS
Trent Walton, grundlægger af Paravel
Historisk har det været svært at centrere noget lodret med CSS, f.eks. Hvis du har et billede med tilstødende tekst, du vil have lodret justeret. I stedet for at stampe og forbande skal du bruge Flexbox til at håndtere justeringsproblemer. Se en demo.
08. Målret mod en bank med relaterede objekter
Jonathan Smiley, Zurb-partner og designleder
Barber CSS-linjevægt ved at bruge omtrentlige attributvælgere på klassenavne for at målrette mod en stor bank med relaterede objekter i stedet for at vedhæfte almindelige attributter til hver enkelt klasse. For eksempel ... [class * = "- block-grid-"] {} ... ville målrette mod lignende: .small-block-grid-3 .large-block-grid-5
09. Kontrolinddeling
Savid Storey, åben webadvokat
Bindestreg tages for givet i tryk, og nogle udviklere bruger bindestreger ejendom online, men få er opmærksomme på andre ejendomme, der giver bedre kontrol. Hvis du ikke er forsigtig, får du orddelestiger, hvor bindestreger bruges på flere linjer. En generel tommelfingerregel er ikke mere end to i træk, som du kan kontrollere ved hjælp af bindestreg-grænselinjer. Også, bindestreg med bindestreg giver dig mulighed for at specificere den mindste længde på et ord, der vil blive bindestreg sammen med det mindste antal tegn før og efter bindestregbruddet.
10. Udnyt skrivetilstandene
David Storey, åben webadvokat
Skrivemetoder giver dig mulighed for at definere retningen, som teksten flyder i. Noget østasiatisk tekst er skrevet lodret, og linjer vokser fra højre til venstre, specificeret med skrivemåde: lodret-rl (tb-rl i IE). Lodret tekst bruges ikke rigtig i europæiske skriftsystemer, men kan være praktisk til tabeloverskrifter, når du har begrænset vandret plads.
11. Brug gradienter på usædvanlige måder
Ruth John, designer
Baggrundsforløb kan se godt ud, når de bruges med kanter og kugler. Jeg bruger både på min blog og med en forprocessor kan jeg ringe til en mixin med den genbrugte kode for ikke at gentage det manuelt. Gå ikke supercrazy, fordi gradienter kan være processortunge. SCSS mixin til listekugler:
@mixin gradedBullet ($ color) {baggrundsbillede: lineær-gradient (venstre, lysere ($ color, 15%) 10px, $ color 11px, $ color 20px, mørkere ($ color, 15%) 21px, mørkere ($ color , 15%) 30px, gennemsigtig 31px); }
12. Brug streng-matching på links
Ruth John, designer
På min blog har jeg brugt CSS-attributvælgerne med strengtilpasning til sociale ikoner. Disse vises i hele min blog, nogle gange med tekst og nogle gange uden, men altid med et ikon. For at style det rigtige link med det rigtige sociale ikon, bruger jeg en streng match på href attribut for ankerelementet. Jeg bruger *= så href på ankerelementet skal kun indeholde den streng, jeg angiver.
/ * for alle sociale links * /. social a: før {display: inline-block; polstring-højre: 30 px; font-family: ’FontAwesome’;} / * Hvert specifikt link * /. social a [href * = "twitter"]: før {content: " f099"; farve: # 52ae9f;}. social a [href * = "github"]: før {content: " f09b"; farve: # 5f2e44;}. social a [href * = "feed"]: før {content: " f09e"; farve: # b47742;}
13. Få FOUT til at fungere for dig
Jason Pamental, rektor ved H + W design
Internettet er baseret på den forudsætning, at det skal levere indhold, selvom browseren ikke kan gengive bling. Langsomt indlæste webskrifttyper kan være frustrerende, FOUT (Flash Of Unstyled Text) skurrende, når navigation og tekst flyder, mens skrifttyper downloades. Google og Typekit giver et svar: web-font loader. Ved at indsprøjte klasser på en side baseret på indlæsningsstatus for skrifttyper kan du style tilbagefald med disse klasser for at holde reflow til et minimum, hvilket også udrydder WebKits syndrom med 'usynligt indhold'. Se en demo.
14. Udforsk SVG for baggrunde
Emil Björklund, inUse webudvikler
De eneste browsere nu uden SVG-understøttelse er IE8 og derunder og Android 2 WebKit, og det er derfor muligt at bruge SVG til baggrunde i CSS, især sammen med en PNG-reserveløsning, såsom Grunticon. SVG kan styles af CSS, og der er interessant gennemblæsning af CSS-egenskaber (filtre!) Fra SVG, som vi kan lege med, når de anvendes til HTML.
15. Fokus brugere med 3D-overgange
Emil Björklund, inUse webudvikler
Brug af 3D-transformationer og brug af z-dimension i brugergrænseflader kan være virkelig nyttige, især til at skjule / vise eller skjule / udvide indhold. Det er også ret nemt at have et tilbagefald til en 2D-overgang eller slet ingen overgang i disse situationer. Det er et område, hvor lidt progressiv forbedring kan komme langt.
16. Opret cirkulære menuer med CSS og matematik
Sara Soueidan, frontend-udvikler
Cirkulære menuer er populære i mobilapps, og du kan bruge CSS-transformationer og overgange til at oprette en simpel cirkulær menu. Denne menu kan også ændres og tilpasses for at oprette en opad- eller nedadgående menu. Der er ingen direkte måde i CSS at oversætte et element diagonalt på, men du kan bruge værdien af cirkelens radius, som du vil placere elementerne på, og anvende en simpel matematisk regel til at beregne de vandrette og lodrette oversættelsesværdier, der skal overføres til translateX () og oversætY () funktioner. På den måde ender du med en diagonal oversættelse for at flytte menupunkterne til de rigtige positioner på cirklen. Klikhændelsen, der lukker / åbner menuen, kan håndteres ved hjælp af JavaScript, eller du kan tage det et skridt videre og have en menu, der kun er CSS, ved hjælp af et CSS-afkrydsningsfelthack. I min demo bruger jeg JavaScript og HTML5 classList API, som ikke understøttes i alle browsere, så du bliver nødt til at se demoen i en moderne browser for at få den til at fungere eller fjerne kommentar til jQuery-koden i stedet for at bruge classList API kode.
Se en demo og en komplet tutorial. Eksempel på CSS afkrydsningsfelt hack.
17. Animer links på svæver
Paul Lloyd, interaktionsdesigneren The Guardian
Hover-stater skal ikke stole på at få en handling til at fungere eller give vigtige oplysninger, men du kan stadig forbedre grænseflader til musebaserede brugere. På 24ways.org afslører vi artikeltitler, når du holder markøren over links i den forrige / næste navigation. Dette blev opnået ved at skabe en ::efter pseudo-element indeholdende genereret indhold hentet fra værdien af en data- attribut med en CSS-overgang anvendt for at få den til at blive vist på svævningen. Se en demo.
18. Lav enkle keyframe-animationer
Paul Lloyd, interaktionsdesigneren The Guardian
På 24ways.org tilføjede vi animerede hjørneflapper til resuméer, som åbnede på svævningen. Dette blev gjort ved at kombinere @keyframes regere med animationsegenskaben og ændre placeringen af et baggrundsbillede for at opnå sprite-baseret animation. Tricket er at erklære antallet af rammer, du har i din animationssprite med trin () værdi. Se en demo.
19. Opret flydende 3D-effekter med skygger
Catherine Farman, Happy Cog-udvikler
Et nyligt projekt krævede et flydende produktfoto med en rund skygge nedenunder, hvilket skabte en 3D-effekt, der poppede ud af skærmen. Skyggen bruger flere CSS3-funktioner: grænseradius alfa gennemsigtighed og box-shadow. Det fungerer godt til produktgitre, fremvisningsbilleder i en startsidehelt eller ethvert lunefuldt design med en skeuomorf bøjning. Se en demo.
20. Opdater sideelementer ved hjælp af ': target'
Simon Madine, HeRe senior webudvikler
CSS er ikke et programmeringssprog i den sædvanlige forstand, men du kan stadig gøre kloge ting uden at falde tilbage til JavaScript. F.eks :mål pseudo-klasse anvendes på elementer, der er målet for et kliket link.
Du kan bruge dette til at definere tilstanden på en side, målrette mod en forælder, der indeholder mange elementer, og dine links bliver et middel til at kontrollere udseendet og layoutet for alle børnene med et enkelt klik. Se en demo.
21. Giv feedback med subtile animationer
Neil Renicker, designer og udvikler
CSS pseudo-elementer ::Før og ::efter sammen med CSS-overgange kan muliggøre dejlig animation, der giver subtil feedback til musebrugere. Byg f.eks. En CSS-pil inden for et pseudo-element, anvend en overgang til pseudo-elementet (overgang: alle let-i-ud-.15s;), og tilføj derefter en simpel layoutændring til : svæver pseudoklasse (såsom ændring margin-top). Se en demo.
22. Forbered dig på 'vil-animere'
Paul Lewis, koder og Chrome-teammedlem til udviklerrelationer
Hvis du har brugt -webkit-transform: translateZ (0) for at magisk gøre dine sider hurtigere, erstattes hacket, som i mange browsere simpelthen opretter et nyt kompositorlag, med vil-animere. Snart vil du være i stand til at fortælle browseren, hvad du planlægger at ændre om et element (dets position, størrelse, indhold eller rulleposition), og browseren anvender den rigtige optimering under emhætten. Mere information.
23. Humaniser inputfelter
Yaron Schoen, grundlægger af Made For Humans
Tilføjelse af hurtige animationer til elementer, som brugerne interagerer med, får en grænseflade til at føle sig mindre computeragtig. Med inputfelter kan du prøve at sætte en overgangsopkald indeni, så når du fokuserer eller ikke fokuserer på det, er der en jævn overgang.
input, tekstarea {-moz-overgang: alle 0,2s lette-out; -o-overgang: alle 0,2'ere letter-out; -webkit-overgang: alle 0,2'er letter-out; -ms-overgang: alle 0,2s lempelse; overgang: alle 0,2s lette-ud;
24. Pause og afspil CSS-animationer
Val Head, designer og konsulent
Du kan 'pause' og 'afspille' CSS-animation ved at ændre dens animation-play-tilstand ejendom. Hvis du indstiller den til 'pause', stopper din animation på plads, indtil du skifter animation-play-tilstand til kører, for eksempel på svæver.
.animating_thing {animation: spin 10s lineær uendelig; animation-play-tilstand: pause; }. animating_thing: hover {animation-play-state: running; }
25. Brug ikke CSS-variabler
Dave Shea, designer og forfatter
Vi får endelig CSS-variabler, for eksempel for at skrive en farves hex-værdi en gang og henvise til den gennem et typografiark. Men den officielle specifikation er detaljeret, tilføjer syntaktisk kompleksitet, tilbyder overvældende funktionalitet og understøttes stort set ikke af de fleste browsere. I en æra, hvor Sass er meget populær og går ud over variabler med kraftig programmeringslogik som brugerdefinerede funktioner og hvis / ellers udsagn, kommer den officielle specifikation langt op.
Forhåbentlig har disse toptips fornyet dit syn på CSS og de muligheder, det repræsenterer inden for webudvikling og design. Glem ikke at teste nogen af disse teknikker grundigt for at kontrollere browsersupport, før du sætter noget arbejde i live.
Ord: Craig Grannell Illustration: Mike Chipperfield
Denne artikel opstod oprindeligt i netmagasin nummer 253.
