CSS pagrindai: darbas su spalvomis

Kuriant svetainę reikia atsižvelgti į daugelį veiksnių; šriftą, UX srautą ir daug daugiau. Vienas labai svarbus dizaino elementas yra spalva. Net ir tokie paprasti sprendimai, kaip prekės ženklo spalva, apvado spalva ir fono spalva, daro aiškų ir pastebimą poveikį.

Šiame straipsnyje aptarsime CSS spalvų pagrindus ir sužinosime, kaip HTML svetainę paversti nepriekaištingai atrodančia svetaine.

Darbo su CSS spalvomis pradžia

Yra tam tikras būdas apibūdinti CSS spalvas, kurias gali suprasti kompiuteris. Paprastai tai daroma suskaidant spalvą į įvairius komponentus, apskaičiuojant sumaišytą pagrindinių spalvų rinkinį, kad susidarytų norima spalva. Yra keletas skirtingų būdų apibūdinti spalvą CSS.

Spalvų pavadinimų naudojimas kaip raktiniai žodžiai

Šiuolaikinės naršyklės palaiko maždaug 140 CSS spalvų pavadinimų. Tai gali būti taip paprasta, kaip raudona arba žalsvai mėlyna spalvos raktiniam žodžiui. Nors tai padeda su vidutiniu spalvų diapazonu, apsiribojate keliomis nustatytomis spalvomis ir visiškai nekontroliuojate atspalvių ir atspalvių. Čia turėsite pereiti prie didesnio CSS spalvų pasirinkimo diapazono.

/*Syntax*/
spalva: raudona;
spalva: raudona;
spalva: šiferio mėlyna;

RGB reikšmių naudojimas

Kurdami svetainę ar programą, spalvų schema turi daug reikšmės - tai tikrai neturėtų būti paskutinis dalykas, kurį svarstote. CSS galite naudoti tris RGB spalvos vaizdavimo metodus. Tai šešioliktainiai eilutės, RGB funkciniai ir HSL funkciniai žymėjimai. Štai atidžiau pažvelkite į kiekvieną iš jų.

Šešioliktainis eilutės žymėjimas

Šešioliktainis eilutės žymėjimas visada prasideda simboliu #. Po šio simbolio spalvas nurodote naudodami šešioliktainius konkretaus spalvų kodo skaitmenis. Eilutė neskiria didžiųjų ir mažųjų raidžių, tačiau įprasta naudoti mažąsias raides. Štai keletas naudojimo atvejų:

#rrggbb

Tai yra labiausiai paplitęs būdas apibūdinti skaitinę spalvą. Tai visiškai nepermatoma spalva su raudonais, žaliais ir mėlynais komponentais 0xrr, 0xgg, ir 0xbb atitinkamai.

#rrggbbaa

Tai atitinka aukščiau išdėstytus RGB kriterijus su alfa kanalu, kuris tvarko spalvos šviesumą. Kuo žemesnis 0xaa vertė yra, tuo spalva tampa skaidresnė.

#rgb

Jei turite spalvą #556677, galite tiesiog parašyti kaip #567 nes jis atstovauja 0xrr, 0xgg, ir 0xbb atitinkamai. Pavyzdžiui, #000 (arba #000000) yra juoda #fff (arba #ffffff) yra balta.

#rgba

Tai atitinka aukščiau nurodytus kriterijus, nurodant alfa kanalą 0xaa kontroliuoti neskaidrumą.

Funkcinis RGB žymėjimas

Funkcinis RGB žymėjimas reiškia spalvas naudojant raudonus, žalius ir mėlynus komponentus. Jis apibrėžtas naudojant rgb () funkcija kuri priima įvesties parametrus pirminių raudonų, žalių ir mėlynų komponentų pavidalu (ir pasirenkamą alfa kanalą). Raudonos, žalios ir mėlynos vertės turi būti sveikasis skaičius 0 į 255 (imtinai), arba procentas kinta nuo 0% iki 100%. Kita vertus, alfa kanalas priima reikšmes nuo 0,0 (visiškai skaidrus) iki 1,0 (visiškai nepermatomas). Ji taip pat priima procentinę vertę nuo 0% (tokia pati kaip 0,0) ir 100% (tokia pati kaip 1,0).

/*Syntax*/
spalva: rgb (rr, gg, bb);
spalva: rgba (rr, gg, bb, a);

HSL funkcinis žymėjimas

HSL funkcinis žymėjimas reiškia spalvą, naudojant atspalvį, sodrumą ir ryškumą. Tai labai panašu į rgb () funkcija naudojimo požiūriu. Jūs galite lengvai Raskite bet kokios spalvos šešiakampę vertę kompiuterio ekrane. Taikant šį spalvų metodą, atspalvis apibrėžia tikrąją spalvą pagal spalvų rato padėtį. Sodrumas yra pilkos spalvos procentas su didžiausiu įmanomu atspalviu. Šviesumas keičia spalvą nuo tamsiausios iki ryškiausios, kai ji didėja.

Atspalvio reikšmę (H) nurodo palaikomas kampo vienetas CSS. Tai įeina deg, rad, grad, ir pasukti. Sodrumas (S) nurodo galutinės spalvos, kurią sudaro atspalvis, procentą. Šviesumo (L) komponentas apibrėžia pilką lygį.

/*Syntax*/
spalva: hsl (XXdeg, XX%, XX%);
spalva: hsl (XX apsisukimas, XX%, XX%);

Spalvų pritaikymas HTML elementams

CSS, spalva nuosavybė apibrėžia turinio priekinio plano spalvą ir fono spalva apibrėžia HTML struktūrinio turinio fono spalvą. Kai elementas atvaizduojamas, galite naudoti spalvų ypatybes, kad sukurtumėte stilių.

Spalvų savybė tekstams

The spalva Ši savybė naudojama piešiant tekstą ir kai jums reikia bet kokių teksto dekoracijų. Galite naudoti teksto dekoravimo spalva savybė, kad būtų paryškintos, perbrauktos ar perbrauktos skirtingų spalvų linijos. Galite pakeisti teksto fono spalvą naudodami fono spalva nuosavybė. Galite taikyti šešėlio efektą tekstui naudodami teksto šešėlis nuosavybė. Galite pasirinkti teksto kirčiavimas-spalva piešdami kirčiavimo simbolius teksto laukuose.

Spalvų savybė dėžėms

Kaip žinote, viskas tinklalapyje atitinka dėžutės modelį. Taigi kiekvienas elementas yra dėžutė su tam tikru turiniu ir pasirinktiniu užpildymu, kraštine ir paraštės sritimi. Galite naudoti fono spalva nuosavybė, kai nėra pirmojo turinio. Kai piešiate liniją, norėdami atskirti teksto stulpelius, galite naudoti stulpelis-taisyklė-spalva turtą už tai. Yra an kontūro spalva savybė nuspalvinti kontūrą. Atminkite, kad kontūras skiriasi nuo kraštinės - jis veikia kaip fokusavimo indikatorius.

Sienų spalvų savybė

Bet kuris HTML elementas gali turėti kraštinę. Galite nustatyti kraštinės spalva turtas kaip border-top-color, kraštinė-dešinė spalva, apvado apačios spalva, ir riba-kairė-spalva nustatyti atitinkamų kraštų kraštinės spalvą. Tačiau trumpojo turto naudojimas yra gera praktika.

The border-inline-start-color ypatybė leidžia nuspalvinti kraštines, esančias arčiausiai pradžios. Kita vertus, border-inline-end-color ypatybė leidžia nuspalvinti lauko teksto eilučių pabaigos pabaigą. Nors tai priklauso nuo jūsų rašymo režimas, orientacija į tekstą, ir kryptis.

Apvyniojimas: spalva ir prieinamumas

Nors gražiai suprojektuota svetainė yra labai paveikta naudojamos spalvos, visada turėtumėte įsitikinti, kad ji yra prieinama. Netinkamas spalvų naudojimas gali prarasti didelį srautą jūsų svetainėje.

Naudoti šešioliktainius eilutes, spalvų pavadinimus ar RGB reikšmes visiškai priklauso nuo jūsų. Tiesiog įsitikinkite, kad naudojate spalvas, kad sustiprintumėte esamą tekstą, ir kad jis atitiktų nustatytą vizualinę hierarchiją. Jei esate pradedantysis interneto kūrėjas, sužinoti daugiau apie spalvų teoriją ir sukurti savo paletę yra puiki idėja. Iki tol laimingas ir spalvingas kodavimas!

Kaip panaudoti spalvų teoriją savo kūrybiniams projektams pakelti

Naudodami tinkamas spalvas, galite perkelti savo kūrybinius projektus į visiškai naują lygį.

Skaityti toliau

Apie autorių