Här är en vacker hemsida: det är ett typexemplar för Mass-Drivers alltid så underbara typfamilj MD Nichrome. Det finns massor av snygga animationer och grafik som förklarar alla funktioner inuti ...
Om du undrar hur dessa animationer fungerar, är de faktiskt stilade <video>
element.
Det finns massor av fantastiska grafiska designdetaljer också, som hur bokstäverna nedan försvinner och försvinner...
Den där lilla biten av CSS är snyggt. Det ser till att varje <h1>
stannar på en enda linje med white-space
, sätter sedan dold översvämning på dem så att rubriken spårar av. Fadingen sker tack vare en linjär gradient som innehåller transparens. Gradienten är faktiskt en mask-image
I detta fall. Det är en bra påminnelse om att CSS-gradienter är bilder som genereras av webbläsaren.
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
I bilden ovan kan du också se hur Mass-Driver annonserar för typsnittets OpenType-funktioner. Det är saker som bråk eller alternativa bokstäver som ger din text superkrafter. Som standard visar dessa avsnitt vad funktionen är, men när du håller muspekaren över dem gör de följande:
.element { font-feature-setting: unset;
}
Jag tror aldrig att jag har använt det unset
tidigare men det här är ett bra ställe att använda det – visa hur funktionen ser ut framtill och sedan när du håller muspekaren visa vad standarden är. Smarta grejer.
Men den del som fångade mitt öga - förutom kick ass typografin - är bakgrunden. Den består av två delar: en skimrande animation som får sidan att se ut som papper, och gradienten som är staplad ovanpå den. Och efter att ha grävt runt i DevTools insåg jag att skimrande effekt är en PNG-bild där background-position
egenskap flyttar runt bilden något för att animera den som en GIF. Det är svårt att se på bilder, så här är en copycat-demo som jag gjorde med opaciteten avstängd för att göra det lättare att se:
Ser du den där härliga luddigheten? Det ger bakgrunden en sorts… textur… som jag inte har sett på länge, kanske sedan omkring 2008 när alla försökte få knappar att se ut som riktiga, analoga knappar på webben. Geoff täckte samma typ av teknik ett tag sedan där man kan få en djupdykning i hur det fungerar.
Den andra delen av designen av denna webbplats är gradienten i bakgrunden. Hur är de så smidiga? Nåväl, Rutherford Craze, designern bakom denna geniala bit av webbdesign, gjort en tråd förklara hur han fick denna effekt att fungera i webbläsaren. Han skapade ett gradientverktyg som låter dig skapa en liknande effekt:
Rutherford skriver:
Konventionella CSS-gradienter ritar en rak linje genom färgrymden, interpolerar direkt från början till slutfärgen. Detta verktyg tillämpar principerna för bézier-kurvor, grunden för digitala teckensnitt, på denna operation.
Genom att införa "kontrollpunkter" längs gradienten kan du finare kontrollera interpolationen och producera ett jämnare slutresultat. Verktyget samplar sedan denna "bézier-gradient" för att producera en linjär gradient som du kan arbeta med i CSS.
Vad Rutherford beskriver ovan är vad som kallas "Grå död zon" av gradienter, där ofta i en linjär gradient finns den här grå färgen som bildas i mitten.
En annan liten detalj som jag nästan inte fattade var klibbig navigering: När du först laddar webbplatsen ser du bara logotypen utan något annat, men när du rullar ser du navigeringen och den låses på plats:
Lägg märke till hur klibbig positionering också används senare för att visa teckensnittets tecken.
CSS gör det här så enkelt. Deklarera klibbig positionering på elementet och kompensera sedan för klibbigheten om elementet skulle börja fastna på en viss plats.
.sticky-thing { position: sticky; top: 75px;
}
Eftersom de vill att du ska fokusera på bokstäverna först och inte resten av användargränssnittet, är det mycket meningsfullt att lägga navigeringen åt sidan, bara när du behöver den. Och detta gör att den övergripande designen känns otroligt fokuserad och okomplicerad, knappt värd att kommentera alls kanske, men när de flesta hemsidor är så fulla av distraktioner då tycker jag att det är värt att fira tysta hemsidor som dessa.
- reklam
- Alla
- animering
- runt
- Bit
- Svart
- webbläsare
- brottning
- fångas
- döda
- Designa
- designer
- detalj
- digital
- familj
- Leverans
- Funktioner
- Förnamn
- Fokus
- full
- gif
- god
- grå
- stor
- Hur ser din drömresa ut
- HTTPS
- bild
- inkorporerar
- IT
- linje
- läsa in
- Lås
- logotyp
- Lång
- förflyttar
- Navigering
- Propert
- offset
- Övriga
- Papper
- Bild
- egenskapen
- REST
- känsla
- Small
- smarta
- So
- Utrymme
- Spot
- starta
- tid
- ton
- topp
- Öppenhet
- ui
- webb
- Webbplats
- webbsidor
- Arbete
- fungerar
- värt