CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)

? 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

1. Kazi ya filter: blur(5px) ni ipi?
   a) Kupunguza ukubwa wa maandishi
   b) Kuongeza mwanga
   c) Kufifisha muonekano
   d) Kupunguza opacity

2. grayscale(100%) hufanya nini?
   a) Huongeza rangi
   b) Hufanya picha kuwa nyeusi na nyeupe
   c) Huongeza contrast
   d) Hupunguza mwanga

3. Filter ipi hubadilisha rangi kuwa kinyume chake?
   a) sepia
   b) grayscale
   c) invert
   d) saturate

4. Kipi kati ya hivi si filter halali ya CSS?
   a) blur
   b) zoom
   c) contrast
   d) brightness

5. 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