CSS -perusteet: Värien kanssa työskentely

Verkkosivuston suunnittelussa on otettava huomioon monia tekijöitä; fontti, UX -kulku ja paljon muuta. Yksi erittäin tärkeä suunnitteluelementti on väri. Jopa yksinkertaiset päätökset, kuten brändin väri, reunuksen väri ja taustaväri, antavat selkeän ja havaittavan vaikutuksen.

Tässä artikkelissa käsittelemme CSS-värien perusteita ja opimme muuttamaan HTML-sivuston moitteettoman näköiseksi verkkosivustoksi.

CSS -värien käytön aloittaminen

On olemassa tietty tapa kuvata värejä CSS: ssä, jonka tietokone voi ymmärtää. Se tehdään tyypillisesti rikkomalla väri useisiin komponentteihin ja laskemalla seka päävärejä halutun värin muodostamiseksi. On useita eri tapoja kuvata väri CSS: ssä.

Värien nimien käyttäminen avainsanoina

Useimmat nykyaikaiset selaimet tukevat noin 140 CSS -värinimeä. Se voisi olla niin yksinkertaista kuin punainen tai syaani väri -avainsanalle. Vaikka se auttaa kohtalaisen värivalikoiman kanssa, olet rajoitettu muutamaan asetettuun väriin ilman sävyjen ja sävyjen hallintaa. Tässä sinun on siirryttävä CSS -värivaihtoehtojen korkeampaan valikoimaan.

/*Syntax*/
väri punainen;
väri: karmiininpunainen;
väri: liuskekivensininen;

RGB -arvojen käyttäminen

Kun suunnittelet verkkosivustoa tai sovellusta, väriskeema sillä on paljon merkitystä - sen ei pitäisi ehdottomasti olla viimeinen asia, jota harkitset. CSS: ssä voit käyttää kolmea tapaa edustaa RGB -väriä. Nämä ovat heksadesimaalinen merkkijono, RGB -toiminnallinen merkintä ja HSL -toiminnallinen merkintä. Tässä tarkemmin kutakin niistä.

Heksadesimaalinen merkkijono

Heksadesimaalimerkkimerkintä alkaa aina merkistä #. Tämän merkin jälkeen määrität värit käyttämällä tietyn värikoodin heksadesimaalilukuja. Merkkijono ei erota kirjainkoolla, mutta on tavallista käyttää pieniä kirjaimia. Tässä muutamia käyttötapauksia:

#rrggbb

Se on yleisin tapa kuvata numeerinen väri. Se on täysin läpinäkymätön väri, jossa on punaisia, vihreitä ja sinisiä komponentteja 0xrr, 0xggja 0xbb vastaavasti.

#rrggbbaa

Se noudattaa edellä hahmoteltuja RGB -kriteerejä alfa -kanavalla, joka käsittelee värin karkeutta. Mitä alempi 0xaa arvo on, mitä läpikuultavampi väri muuttuu.

#rgb

Jos sinulla on väriä #556677, voit kirjoittaa sen muodossa #567 koska se edustaa 0xrr, 0xggja 0xbb vastaavasti. Esimerkiksi, #000 (tai #000000) on musta, kun taas #F F F (tai #ffffff) on valkoinen.

#rgba

Se seuraa edellä mainittuja ehtoja, kun alfa -kanava on määritetty 0xaa opasiteetin hallitsemiseksi.

RGB -toiminnallinen merkintä

RGB -toiminnallinen merkintä edustaa värejä, joissa käytetään punaisia, vihreitä ja sinisiä komponentteja. Se määritetään käyttämällä rgb () -toiminto joka hyväksyy syöttöparametrit ensisijaisten punaisten, vihreiden ja sinisten komponenttien muodossa (ja valinnaisen alfa -kanavan). Punaisen, vihreän ja sinisen arvon on oltava kokonaisluku 0 kohteeseen 255 (mukaan lukien) tai prosenttiosuus vaihtelee 0%: sta 100%: iin. Toisaalta alfa -kanava hyväksyy arvot 0,0 (täysin läpinäkyvä) - 1,0 (täysin läpinäkymätön). Se hyväksyy myös prosenttiosuuden 0% (sama kuin 0,0) ja 100% (sama kuin 1,0).

/*Syntax*/
väri: rgb (rr, gg, bb);
väri: rgba (rr, gg, bb, a);

HSL -toiminnallinen merkintä

HSL -toiminnallinen merkintä edustaa väriä käyttämällä värisävyä, kylläisyyttä ja kirkkautta. Se on hyvin samanlainen kuin rgb () toiminto käytön kannalta. Voit helposti etsi minkä tahansa värin heksadesimaaliarvo tietokoneen näytöllä. Tässä värimenetelmässä sävy määrittää todellisen värin väripyörän sijainnin mukaan. Kylläisyys on harmaan prosenttiosuus, jolla on suurin mahdollinen sävy. Valoisuus muuttaa värin tummimmasta kirkkaimmaksi mahdolliseksi sen lisääntyessä.

Värisävy (H) määritetään tuetussa kulmayksikössä CSS: ssä. Se sisältää astetta, rad, gradja vuoro. Värikylläisyys (S) määrittelee sävyn muodostaman lopullisen värin prosenttiosuuden. Kirkkaus (L) -komponentti määrittää harmaan tason.

/*Syntax*/
väri: hsl (XXdeg, XX%, XX%);
väri: hsl (XXkierros, XX%, XX%);

Värien soveltaminen HTML -elementteihin

CSS: ssä väri- ominaisuus määrittää sisällön etualan värin ja taustaväri määrittää HTML -sisällön taustavärin. Kun elementti on renderöity, voit muotoilla sen väriominaisuuksilla.

Värien ominaisuus teksteille

The väri- ominaisuutta käytetään piirtettäessä tekstiä ja kun tarvitset kaikenlaisia ​​tekstikoristeita. Voit käyttää tekstin koristelu-väri ominaisuus tehdä alleviivauksia, yliviivoja tai yliviivaavia viivoja eri väreissä. Voit muuttaa tekstin taustaväriä käyttämällä taustaväri omaisuutta. Voit käyttää varjotehosteita tekstiin käyttämällä teksti-varjo omaisuutta. Voit valita tekstin korostus-väri piirtämällä korostusmerkkejä tekstikenttiin.

Laatikoiden väriominaisuus

Kuten tiedätte, kaikki verkkosivut noudattavat laatikkomallia. Siten jokainen elementti on laatikko, jossa on jonkinlaista sisältöä ja valinnainen pehmuste, reunus ja marginaalialue. Voit käyttää taustaväri omaisuutta, kun etualalla ei ole sisältöä. Kun piirrät viivaa erottaaksesi tekstin sarakkeet, voit käyttää sarake-sääntö-väri omaisuutta sille. Siellä on ääriviivat-väri ominaisuus värittää ääriviivat. Huomaa, että ääriviivat eroavat reunasta - ne toimivat tarkennusindikaattorina.

Reunojen väriominaisuus

Millä tahansa HTML -elementillä voi olla reunus. Voit asettaa reunuksen väri omaisuus kuten reunan yläosan väri, reunus-oikea-väri, reunus-pohja-värija reunus-vasen-väri asettaaksesi vastaavien sivujen reunan värin. Pikakirjoitusominaisuuden käyttäminen on kuitenkin hyvä käytäntö.

The border-inline-start-color ominaisuuden avulla voit värittää reunan reunat, jotka ovat lähimpänä alkua. Toisaalta,. reuna-inline-end-väri ominaisuuden avulla voit värittää ruudun tekstirivien alun lopun. Vaikka se vaihtelee riippuen kirjoitustila, tekstisuuntautumistaja suunta.

Kääriminen: Väri ja helppokäyttöisyys

Vaikka kauniisti suunniteltu verkkosivusto vaikuttaa voimakkaasti käytettyyn väriin, sinun on aina varmistettava, että se on käytettävissä. Virheellinen värin käyttö voi johtaa merkittävän liikenteen menetykseen verkkosivustollasi.

Heksadesimaalisten merkkijonojen, värinimien tai RGB -arvojen käyttäminen on täysin sinun tehtäväsi. Varmista vain, että käytät värejä nykyisen tekstin vahvistamiseen ja että se noudattaa määritettyä visuaalista hierarkiaa. Opi lisää väriteoriasta ja oman paletin luominen on erinomainen idea, jos olet aloitteleva web -kehittäjä. Siihen asti onnellista ja värikästä koodausta!

Väriteorian käyttäminen luovien projektien nostamiseen

Käyttämällä oikeita värejä oikealla tavalla voit viedä luovat projektisi aivan uudelle tasolle.

Lue seuraava

Kirjailijasta