Íme egy gyönyörű weboldal: ez egy típuspéldány a Mass-Driver mindig oly kedves típuscsaládjához MD Nichrome. Rengeteg remek animáció és grafika található, amelyek elmagyarázzák az összes funkciót…
Ha kíváncsi, hogyan működnek ezek az animációk, akkor valójában stílusuk van <video>
elemek.
Rengeteg nagyszerű grafikai tervezési elem is van, mint például, hogy a lenti betűk elhalványulnak és eltűnnek…
Szép ez a kis CSS. Biztosítja, hogy mindegyik <h1>
egy sorban marad vele white-space
, majd rejtett túlcsordulást állít be rajtuk, így a címsor eltűnik. A fakulás egy lineáris gradiensnek köszönhető, amely magában foglalja az átlátszóságot. A gradiens valójában a mask-image
ebben az esetben. Ez jó emlékeztető arra, hogy a CSS-gradiensek a böngésző által generált képek.
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
A fenti képen azt is láthatja, hogyan hirdeti a Mass-Driver a betűtípus OpenType szolgáltatásait. Olyan dolgok, mint a törtek vagy az alternatív betűk, amelyek szuperképességeket adnak a szövegnek. Alapértelmezés szerint ezek a szakaszok azt mutatják, hogy mi a funkció, de ha föléjük viszi az egérmutatót, a következőket teszik:
.element { font-feature-setting: unset;
}
Azt hiszem, soha nem használtam unset
előtt, de ez egy nagyszerű hely a használatához – mutassa meg, hogyan néz ki a funkció elölről, majd amikor rámutat, mutassa meg, hogy mi az alapértelmezett. Okos cucc.
De az a rész, amelyen megakadt a szemem – a kick ass tipográfia mellett – az a háttér. Két részből áll: egy csillogó animációból, amitől az oldal úgy néz ki, mint a papír, és a színátmenetből, amely a tetejére halmozott. És a DevToolsban való ásatás után rájöttem, hogy a csillogó hatás egy PNG-kép, ahol a background-position
A tulajdonság enyhén mozgatja a képet, hogy GIF-ként animálja. Nehéz látni a képeken, ezért itt van egy copycat demó, amelyet az átlátszóság kikapcsolásával készítettem, hogy könnyebben látható legyen:
Látod ezt a szép homályt? Ez ad a háttérnek egyfajta… textúrát… amilyent nagyon régen nem láttam, talán 2008 körül, amikor mindenki a gombokat próbálta valódi, analóg gombokhoz hasonlítani a weben. Geoff ugyanezt a technikát dolgozta fel egy ideje, ahol mélyen elmerülhet a működésében.
A weboldal kialakításának másik része a háttérben látható színátmenet. Hogy ilyen simák? Nos, Rutherford Craze, a tervező a zseniális webdizájn mögött, csinált egy szálat elmagyarázza, hogyan váltotta be ezt a hatást a böngészőben. Ő csinálta egy színátmenet eszköz amivel hasonló hatást hozhat létre:
Rutherford ezt írja:
A hagyományos CSS színátmenetek egyenes vonalat ábrázolnak a színtéren keresztül, közvetlenül a szín elejétől a végéig interpolálva. Ez az eszköz a digitális betűtípusok alapját jelentő Bézier görbék elvét alkalmazza erre a műveletre.
A gradiens mentén „vezérlőpontok” bevezetésével finomabban szabályozhatja az interpolációt, és simább végeredményt kaphat. Az eszköz ezután mintát vesz ebből a „bézier gradiensből”, hogy létrehozzon egy lineáris gradienst, amellyel a CSS-ben dolgozhat.
Amit Rutherford fentebb leírt, az az úgynevezett „Szürke holt zóna” színátmenetek, ahol gyakran egy lineáris gradiensben van ez a szürke szín, amely a közepén képződik.
Egy másik apró részlet, amit szinte fel sem fogtam, az volt ragadós navigáció: Amikor először tölti be a webhelyet, csak a logót látja semmi mással, de aztán görgetés közben megjelenik a navigáció, és az a helyére rögzül:
Figyelje meg, hogy a későbbiekben a ragadós pozicionálást is használják a betűtípus karakterjeleinek bemutatására.
A CSS nagyon egyszerűvé teszi az ilyesmit. Adja meg a ragadós elhelyezést az elemen, majd ellensúlyozza a ragadósságot, ha az elem egy bizonyos helyen elkezd ragadni.
.sticky-thing { position: sticky; top: 75px;
}
Mivel azt akarják, hogy először a betűkre összpontosítson, és ne a felhasználói felület többi részére, nagyon logikus, hogy a navigációt félreállítsa, csak akkor, amikor szüksége van rá. Ez pedig az általános dizájnt hihetetlenül koncentráltnak és egyértelművé teszi, talán alig érdemes kommentálni, de amikor a legtöbb webhely tele van zavaró tényezőkkel, akkor szerintem érdemes megünnepelni az ilyen csendes webhelyeket.
Forrás: https://css-tricks.com/websites-we-like-md-nichrome/
- Hirdetés
- Minden termék
- animáció
- körül
- Bit
- Fekete
- böngésző
- Fogás
- elkapott
- halott
- Design
- Tervező
- részlet
- digitális
- család
- Funkció
- Jellemzők
- vezetéknév
- Összpontosít
- Tele
- gif
- jó
- szürke
- nagy
- Hogyan
- HTTPS
- kép
- magában
- IT
- vonal
- kiszámításának
- Zárak
- logo
- Hosszú
- mozog
- Navigáció
- Tiszta
- eltolt
- Más
- Papír
- kép
- ingatlan
- REST
- értelemben
- kicsi
- okos
- So
- Hely
- Spot
- kezdet
- idő
- tonna
- felső
- Átláthatóság
- ui
- háló
- weboldal
- honlapok
- Munka
- művek
- érdemes