Kubainisha Rangi Kupitia rgb katika CSS
Mwanzoni kabisa mwa kitabu cha maongozo, tulipokuwa tunasoma
rangi, niliwaambia kuwa rangi inaweza kubainishwa
ama kwa neno la Kiingereza, ama kupitia rgb,
ama kupitia #. Miundo miwili ya mwisho
inakuwezesha kupata rangi ya kiwango chochote cha ukoo. Hebu
tuchambue jinsi miundo hii inavyofanya kazi haswa.
Ili kuelewa njia hizi, kwanza kabisa tunahitaji kuchambua jinsi rangi inayohitajika inavyopatikana kwenye skrini ya kompyuta.
Kwa kweli nukta tofauti ya skrini (pikseli) haiwezi kung'aa kwa rangi zote zinazohitajika, kwani hii kikitamaduni ingekuwa ngumu sana. Kila nukta ya skrini inaweza kung'aa kwa rangi tatu tu: nyekundu, kijani na bluu. Lakini wakati huo huo na kwa viwango tofauti.
Kuchanganya rangi hizi tunaweza kupata rangi yoyote tunayohitaji sawa na jinsi wachoraji wanavyofanya kwa rangi: wakichanganya rangi kadhaa wanapata nyingine mpya.
Kuchanganya rangi katika CSS unahitaji kwa thamani
ya sifa onyesha neno kuu rgb,
baada ya hapo orodhesha kwa kutumia koma
ikiwaonyesha kwa viwango gani inahitajika kuchukua hizi
rangi tatu za msingi. Rangi zenyewe zinaweza kubadilika
kutoka 0 hadi 255. Na sifuri -
ni ukosefu wa rangi, na 255 ni
rangi safi (kwa mfano,
nyekundu safi).
Herufi zenyewe rgb zinafasiriwa kama
red, green, blue.
Tutaangalia kwa mifano.
Mfano
Wacha tuchanganye rangi nyekundu safi na bluu safi.
Kwa kufanya hivyo thamani ya kwanza tunaweka kuwa
255, ya pili 0, na ya tatu -
255. Tutapata
rangi ya zambarau:
<p>
maandishi
</p>
p {
color: rgb(255, 0, 255);
}
:
Mfano
Sasa tuweke thamani ya kwanza
kuwa 255, na zote zingine - kuwa sifuri. Kwa
matokeo tutapata rangi nyekundu safi:
<p>
maandishi
</p>
p {
color: rgb(255, 0, 0);
}
:
Mfano
Hivi ndivyo tutakavyopata rangi kijani safi:
<p>
maandishi
</p>
p {
color: rgb(0, 255, 0);
}
:
Mfano
Na kama kwa kijani hutaki 255,
bali 100, basi itatokea
rangi kijani kwa sehemu:
<p>
maandishi
</p>
p {
color: rgb(0, 100, 0);
}
:
Mfano
Wacha tuchanganye rangi zote tatu kwa viwango vya kiholela. Angalia, nini kilichotokea:
<p>
maandishi
</p>
p {
color: rgb(200, 100, 125);
}
:
Mfano
Kama ukiweka thamani zote kuwa 255,
basi utapata rangi nyeupe safi:
p {
color: rgb(255, 255, 255);
}
Mfano
Kama ukiweka thamani zote kuwa 0, basi
utapata rangi nyeusi safi:
p {
color: rgb(0, 0, 0);
}
Kazi za Vitendo
Kwa kubainisha rangi kupitia rgb fanya
aya zote ziwe na rangi nyekundu.
Kwa kubainisha rangi kupitia rgb fanya
h2 zote ziwe na rangi kijani.
Kwa kubainisha rangi kupitia rgb fanya
h3 zote ziwe na rangi ya bluu.
Changanya nyekundu safi na kijani safi. Ni rangi gani itatokea?