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!
Käyttämällä oikeita värejä oikealla tavalla voit viedä luovat projektisi aivan uudelle tasolle.
Lue seuraava
- Ohjelmointi
- CSS
- Web-suunnittelu
- Verkkokehitys
- HTML
Naincy on erikoistunut rakentamaan erittäin reagoivia verkkosivustoja ja tehokasta sisältöstrategiaa sekä verkkokopioita. Hän on freelance -tekniikan kirjailija, joka seuraa terävästi trenditekniikoita.
tilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi