Oppiskele Taustavärien Käyttö Suunnittelussa | Koristeellisten Tehosteiden Lisääminen CSS:llä

Taustaväri verkkosivustolla on keskeisessä roolissa sivuston tunnelman ja ilmapiirin luomisessa. Se on yksi tärkeimmistä visuaalisista elementeistä, jonka käyttäjät näkevät vieraillessaan sivustolla, ja sillä voi olla suuri vaikutus sivuston yleisilmeeseen ja -tuntumaan.

background-color

Tämän ominaisuuden avulla voidaan asettaa elementille taustaväri. Arvo voi olla missä tahansa muodossa: hex, rgb, rgba tai varattu sana.

background-color: value;

index.html

index.css

Staattinen vs. liukuväri

Staattinen väri tarkoittaa yksittäistä värin arvoa, joka asetetaan tasaisesti elementille, kuten red tai #0000FF. Liukuväri puolestaan tarkoittaa kahden tai useamman värin yhdistämistä, jolloin niiden välillä syntyy pehmeä siirtymä.

index.html

index.css

Liukuvärin avulla voidaan luoda visuaalisesti houkuttelevampia ja dynaamisempia suunnitteluratkaisuja kuin staattisella värillä. Tarkastellaan erilaisia tapoja määrittää liukuvärejä.

Tasainen linear-gradient

Lineaarisen gradientin taustavärin asettamiseen käytetään:

background-image: linear-gradient("direction", "color1", "color2", ...);

index.html

index.css

Lisäksi gradientin väreille voidaan määrittää väriprosentti.

index.html

index.css

Yhtenäinen linear-gradient

Saamme raidallisen taustavärin, jos määritämme vierekkäisille väreille saman prosenttiosuuden. Suoritetaan esimerkki ja katsotaan, mikä ero syntyy.

index.html

index.css

radial-gradient

Radiaaligradientti toimii samalla tavalla kuin lineaarinen gradientti. Ainoa ero on, että väri alkaa keskeltä ja leviää ulospäin.

index.html

index.css

1. Mikä on tärkein ero staattisen värin ja gradienttivärin välillä CSS:ssä?

2. Mikä on lineaarisen gradientin ja säteittäisen gradientin ero CSS:ssä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 1

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

background-color

Tämän ominaisuuden avulla voidaan asettaa elementille taustaväri. Arvo voi olla missä tahansa muodossa: hex, rgb, rgba tai varattu sana.

background-color: value;

index.html

index.css

Staattinen vs. liukuväri

index.html

index.css

Liukuvärin avulla voidaan luoda visuaalisesti houkuttelevampia ja dynaamisempia suunnitteluratkaisuja kuin staattisella värillä. Tarkastellaan erilaisia tapoja määrittää liukuvärejä.

Tasainen linear-gradient

Lineaarisen gradientin taustavärin asettamiseen käytetään:

background-image: linear-gradient("direction", "color1", "color2", ...);

index.html

index.css

Lisäksi gradientin väreille voidaan määrittää väriprosentti.

index.html

index.css

Yhtenäinen linear-gradient

Saamme raidallisen taustavärin, jos määritämme vierekkäisille väreille saman prosenttiosuuden. Suoritetaan esimerkki ja katsotaan, mikä ero syntyy.

index.html

index.css

radial-gradient

Radiaaligradientti toimii samalla tavalla kuin lineaarinen gradientti. Ainoa ero on, että väri alkaa keskeltä ja leviää ulospäin.

index.html

index.css

1. Mikä on tärkein ero staattisen värin ja gradienttivärin välillä CSS:ssä?

2. Mikä on lineaarisen gradientin ja säteittäisen gradientin ero CSS:ssä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 1