CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
📘 Utangulizi
Filters hutumika zaidi kwa ajili ya kuleta athari za kimuonekano kwenye elementi. Unaweza kuzitumia kwa:
-
Picha (
<img>) -
Divs au background zenye content
-
Text (kwa baadhi ya filters)
CSS filters zinafanya kazi kama “kamera” inayopita kwenye lenzi maalum kabla ya kuonyesha kitu kwa mtumiaji.
✅ 1. Jinsi ya kutumia filter
Filter huandikwa kwenye CSS kwa kutumia property ya filter.
.element {
filter: blur(5px);
}
Unaweza pia kuchanganya filters nyingi:
.element {
filter: brightness(0.9) contrast(120%) grayscale(50%);
}
✅ 2. Aina Kuu za CSS Filters
🔹 blur(px)
Hufanya elementi au picha ionekane iliyofifia au haijawa wazi.
filter: blur(3px);
🔹 brightness(%)
Hutawala mwangaza wa picha. 100% ni kawaida, zaidi ya hapo ni mwangaza zaidi.
filter: brightness(150%);
🔹 contrast(%)
Hudhibiti utofauti wa rangi. 100% ni kawaida. Chini ya hapo hufanya rangi kufifia.
filter: contrast(80%);
🔹 grayscale(%)
Hubadilisha picha kuwa nyeusi na nyeupe. 100% ni black & white.
filter: grayscale(100%);
🔹 invert(%)
Hubadilisha rangi kuwa kinyume chake. 100% ni full invert.
filter: invert(100%);
🔹 opacity(%)
Hufanya kipengele kuwa na uwazi (transparent). 0% ni kutoonekana kabisa.
filter: opacity(60%);
🔹 saturate(%)
Hudhibiti nguvu ya rangi. 100% ni kawaida, chini ya hapo hupunguza saturation.
filter: saturate(120%);
🔹 sepia(%)
Hutoa athari ya rangi za kahawia (rangi za zamani/kale).
filter: sepia(100%);
🔹 hue-rotate(deg)
Huzungusha rangi kama kwenye duara la HSL. 180deg hubadilisha rangi kikamilifu.
filter: hue-rotate(180deg);
✅ 3. Matumizi ya filter kwa Hover Effect
img {
filter: grayscale(100%);
transition: filter 0.5s ease;
}
img:hover {
filter: grayscale(0%);
}
➡️ Hapa, picha itaonekana nyeusi na nyeupe, lakini ikipigwa hover itarudi kwenye rangi zake halisi.
✅ Hitimisho
CSS filters ni njia nzuri ya kubadilisha mwonekano wa picha au vipengele kwa haraka na bila kutumia programu ya picha. Ni muhimu kutumia filters kwa kiasi ili zisilete usumbufu kwa watumiaji.
🔜 Somo Linalofuata: SOMO LA 32 – Custom Fonts na @font-face
Tutajifunza jinsi ya kutumia fonts tofauti kutoka kwenye Google Fonts au fonts zako mwenyewe kwa kutumia @font-face.
🧠 Maswali ya Kujitathmini
-
Kazi ya
filter: blur(5px)ni ipi?
a) Kupunguza ukubwa wa maandishi
b) Kuongeza mwanga
c) Kufifisha muonekano
d) Kupunguza opacity -
grayscale(100%)hufanya nini?
a) Huongeza rangi
b) Hufanya picha kuwa nyeusi na nyeupe
c) Huongeza contrast
d) Hupunguza mwanga -
Filter ipi hubadilisha rangi kuwa kinyume chake?
a) sepia
b) grayscale
c) invert
d) saturate -
Kipi kati ya hivi si filter halali ya CSS?
a) blur
b) zoom
c) contrast
d) brightness -
Ili kutumia filters nyingi kwa kipengele kimoja, unafanyaje?
a) Unaandika mara mbili
b) Unaweka filter zote ndani ya bracket
c) Unaziandika kwa nafasi moja moja
d) Hutakiwi kuchanganya filters
Umeionaje Makala hii.. ?
👉1 Tafasiri ya Riyadh Swalihina 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Madrasa kiganjani 👉4 web hosting 👉5 Kitabu cha Afya 👉6 Kitau cha Fiqh
Post zinazofanana:
CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...CSS - SOMO LA 29: CSS z-index na Stacking Context
Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
Soma Zaidi...CSS - somo la 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...CSS - SOMO LA 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...