Tumesha jifunza katika masomo ya nyuma jinsi ya kuweka rangi. Rangi inaweza kuwa ni kwa ajilia backround ama kwa ajii ya text. Kama tulivyojifunza huko awali, property background hutumika kwa ajili ya ku set rangi kwa ajili ya background, na propert ya color hutumika ku set rangi ya text
p{
background: black;
color: blue;
}
Tofauti na hizo mbili kuna nyingine ya kuweka rangi kwenye borders. Hii inaitwa border
Mfano:
p{
border: solid #d00c0c;
}
Namna za uwekaji warangi
Katika css kuna aina tano za kuweka rangi kwenye faii la html. Njia hizo ni :-
- Kwa kutumia jina la rangi
- Kwa kutumia Hex color
- Kwa kutumia RGB
- Kwa kutumia HSL
- Kwa kutumia HSLA
- Kwa kutumia jina la rangi:
Kwa kutumia jina la rangi ni kama tulivyofanya hapo juu. Utaitaja rangi hyo kwa jina. Jambo la msingi ni kujuwa tu majina ya hizo rangi kwa ufasaha. Mfano red, blue, black, yellow, green, purple n.k. Nikama tulivyofanya hapo juu.
p{
background: black;
color: blue;
}
2. Kwa kutumia Hex color
Kuna baadhi ya rangi majina yake huyajui, saa utatumia thamani zake za hex color. Hex color zipo katika namna mbili ambzo ni kwa kutumia herufi ama kwa kutumia namba. Njia yeyote utakayotumia utaanza na alama ya reli yaani hash #. Baada ya kuandika # itafuatiwa na character 6 kama ni herufi ziwe 6 na kama ni namba ziwe 6.
Mfano:
p{
background: #000000;
color: #160ee7;
}
Unaweza kuzi generate mwenyewe kwenye text editor. Ama w3schools wanayo system ya ku generate hex color free.
3. Kwa kutumia RGB
RGB ni kifupisho cha maneno Red, Green, Blue. kwa hiyo ni kitendo cha kuchanganya rangi hizo tatu ili kupata rangi nyingine. Kwa mfano ukicanganya rangi nyekundu, ya kijani na buluu kwa uwiano sawa utapata rangi nyeupe.
p{
background: rgb(255, 255, 255);
color: rgb(0,0,0);
}
Kwenye css editor itaonekana hivyo
Thamani za RGB huwekwa kutoka 0 hadi 255. Yeyote itakayokuwa kubwa kuliko wenzie ndio itaonekana sana. Kwa mfano kama unataka rangi iwe nyekundu tu unaweza kuweka hivi
color: rgb(255,0,0);
Kadiri itakavyopunguwa kutoka 255 kuja chini ndivyo rangi itaendelea kubadilika. Mfano kama itashuka hapo kutoka 255 kuwa 100 utaona itabadilika, kuwa nyekundu iliyofanana na weusi color: rgb(100,0,0);
Baadhi ya rangi na thamani zao cheki w3schools
4. Kwa kutumia HSL
HSL ni kifupisho cha maneno Hue, Saturation, Lightness. Wacha tuone kila moja inamaanisha nini:
- Hue ni kiwango cha rangi kutoka 0 hadi 360. Nia sawa na mzunguruko wa duara.hili ji jiduara lenye nyuzi 360, na kila nyuzi katika hilo duara linamaanisha rangi fuani. Kwa mfano rangi ya kijani ni nyuzi 120 na rangi ya buluu ni nyuzi 240. Kwaiyo hue hupimwa kwa ktumia nyuzi. Ndogo ni 0 na kubwa zaidi ni 360
- Saturation humaanisha asilimia ya kiwango cha kuangaza kwa rangi (intensity). Yenyewe inapimwa kwa asilimia kutoka 0 hadi 100. Ikiwa 0 maana yake ni gray ambao hakuna mng’ao wa rangi, ila 100 inakuwa i full. Hii utapima je rangi ulioiweka kwa kutumia Hue unahitaji itokeze yote ama kwa kiasi maalumu. Kwahyo saturation inaeza kubadili rangi iliyowekwa hapo awali.
- Lightness ni kiwango cha uwepo wa mwangaza kwenye hiyo rangi, nayo hupimwa kwa asilimia. Kwa mfano ikiwa ni 0 hakuna mwanga hivyo rangi itaonekana ni nyeusi, na ikiwa 100 rangi itaonekano yote.
Jinsi ya kutumia HSL:
Ili uweze kuitumia utaanaza na kuandika hsl ikifatiwa na mabano, ndani ya hayo mabano utaweka value zake.
p{
color: hsl(244, 59%, 81%);
}
5. Kwa kutumia HLSA
Hii ni sawa na HLS ila hapa kumeongezeka A ambayo inamaanisha Alpha. Alpha huwakilisha kiwango cha opacity. Ili uweze kuelewa opacity chukulia mfano karatasi ukaliweka mafuta, utaona linaweza kuonyesha upande wa pili na lupitisha mwanga. Hii ndio opacity.
Alpha huandikwa kwa kiwango kutoka 0.0 hadi 1. Ikiwa ni 1 hapo inakuwa haionyeshi kabisa na ikiwa 0.0 hapo itakuwa inaonyesha kabisa.
Mfano:
p{
color: hsla(130, 53%, 83%, 0.7)
}
Je unahitaji kufanya mazoezi zaidi ya rangi? Cheki link hii kutoka w3schools
Mwisho:
Katika somo linalofuata tutakwenda kujifunza kuhusu background activities.
