CSS ja verkko
CSS-liukuvärit, SVG, Tailwind sekä nopeat ja kauniit verkkotaustat.
200 opasta · 11 aihetta
CSS ja verkkoCSS linear-gradient: täydellinen opas suoraviivaiseen liukuväriin
5 min lukuaika
Jokainen linear-gradient()-funktion osa selitetään elävällä esimerkillä koodin vieressä: oletussuunnasta koviin pysäytyksiin, kerrostettuihin kiiltoihin ja pehmeämpiin OKLCH-sekoituksiin.
CSS ja verkkoCSS radial-gradient: muodot, koot ja paikat
4 min lukuaika
radial-gradient() piirtää värin ulospäin pisteestä. Tässä jokainen sen osa elävin esimerkein sekä kerrostamistemput pehmeiden hehkujen, valokeilojen ja vinjettien takana.
CSS ja verkkoCSS-kartiomainen liukuväri: ympyrät, piirakkakaaviot ja kiilto
3 min lukuaika
conic-gradient() pyyhkäisee värin pisteen ympäri kuin kellon viisari. Tuo yksi ajatus piirtää väriympyrät, piirakkakaaviot, donitsikaaviot, metallinkiillon ja tähtipurskeet.
CSS ja verkkoCSS mesh-liukuväri: näin rakennat sen säteittäisistä kerroksista
4 min lukuaika
CSS:ssä ei ole mesh-gradient()-funktiota. Tässä kerrostamistapa, joka jäljittelee sitä vakuuttavasti, sumennus ja rakeisuus, jotka viimeistelevät sen, ja milloin kuva tai shader on parempi valinta.
CSS ja verkkoLiukuväriteksti CSS:llä: tee se hyvin
4 min lukuaika
Kolme riviä CSS:ää asettaa liukuvärin kirjainten sisään. Jotta se olisi luettava, kestävä ja tyylikäs, tarvitaan vielä muutama, ja tieto siitä, milloin teksti kannattaa jättää tasaväriseksi.
CSS ja verkkoCSS-liukuvärireunus: neljä tapaa piirtää se
3 min lukuaika
border-color ei ota liukuväriä, joten jokainen liukuväriääriviiva on kiertotie. Tässä ovat neljä, joilla on merkitystä, mitä kukin osaa ja ei osaa ja mihin kannattaa tarttua.
CSS ja verkkoCSS-animoidut liukuvärit: taustat tehtynä oikein
4 min lukuaika
Liukuvärejä ei voi animoida suoraan, mutta kaiken niiden ympärillä voi. Neljä tekniikkaa, mitä kukin maksaa selaimelle ja miten liike pidetään rauhallisena ja valinnaisena.
CSS ja verkkoCSS gradient OKLCH interpolation for smoother blends
5 min lukuaika
Most dull, grey-middled gradients are not a colour problem but a maths problem. Two words, in oklch, change where the browser does the maths.
CSS ja verkkoCSS-kohinatekstuuri: rakeisuutta liukuväreihin SVG:llä
4 min lukuaika
Himmeä kohinakerros piilottaa juovittumisen ja saa tasaisen näytön värin tuntumaan painetulta tai filmiltä. Tässä sen takana oleva SVG-suodatin säädettynä ja liitettäväksi valmiina.
CSS ja verkkoTailwind gradient classes: linear, radial and conic in v4
5 min lukuaika
Tailwind v4 renamed its gradient utilities, added angles, radial and conic gradients, and switched the default blend to oklab. Here is the whole system, with the CSS each class produces.
CSS ja verkkoSVG gradients: linear, radial, strokes, text and masks
5 min lukuaika
SVG has its own gradient system, older than CSS gradients and able to do things they cannot: colour a stroke, fill a word, share one gradient across many shapes, and fade anything with a mask.
CSS ja verkkoLiukuväripainikkeet CSS:llä, jotka tuntuvat premium-tasoisilta
3 min lukuaika
Useimmat liukuväripainikkeet näyttävät halvoilta samoista syistä: liikaa sävyjä, hover, joka hyppää, ja teksti, joka häipyy vaalean pään valoon. Tässä resepti, joka välttää kaikki kolme.
CSS ja verkkoCSS-liukuvärin suorituskyky: hidastavatko liukuvärit sivua?
4 min lukuaika
Staattinen CSS-liukuväri on melkein ilmainen. Kustannukset tulevat siitä, mitä liukuväreillä tehdään: valtavista sumennuksista, vierittäessä uudelleen piirtyvistä taustoista ja animaatioista, jotka eivät lopu. Tästä näet eron.
CSS ja verkkoCSS-kuviot toistuvilla liukuväreillä
4 min lukuaika
Kovat värikohdat muuttavat liukuvärit muodoiksi, ja background-size muuttaa muodot laatoiksi. Näillä kahdella ideoilla piirrät useimmat klassiset kuviot muutamalla rivillä ilman kuvatiedostoja.
CSS ja verkkoFigma gradients: tips for smoother results
5 min lukuaika
Figma makes a gradient in two clicks and a good one in twenty. Here is the fast path through the gradient editor, plus the fixes for grey middles, banding and CSS that does not match.
CSS ja verkkoWebGL gradient shaders, explained for designers
7 min lukuaika
Some gradients on the web drift, glow and shimmer in a way no image or CSS rule can. They are shaders. Here is how they work, in words a designer can use.
CSS ja verkkoEmail gradient backgrounds: what works in Gmail and Outlook
6 min lukuaika
Gradients look wonderful in a browser and unpredictable in an inbox. Build them in layers, and every reader gets something that looks intended.
CSS ja verkkoDynamic OG images: generate link previews automatically
6 min lukuaika
Hand-making a preview image for every page doesn't scale, and one generic image for the whole site wastes the most-seen picture you have. Generate them instead.