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 Simulizi za Hadithi Audio 👉2 Kitau cha Fiqh 👉3 kitabu cha Simulizi 👉4 web hosting 👉5 Dua za Mitume na Manabii 👉6 Sira ya Mtume Muhammad (s.a.w)
Post zinazofanana:
CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 32: Custom Fonts na @font-face
Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
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 16: Flexbox Basics
Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
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 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...