picha

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:

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

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-07-03 Topic: CSS Main: ICT File: Download PDF Views 489

Share On:

Facebook WhatsApp
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina    👉2 Madrasa kiganjani    👉3 Kitau cha Fiqh    👉4 ai web app    👉5 Kitabu cha Afya    👉6 Simulizi za Hadithi Audio   

Post zinazofanana:

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...
CSS - SOMO LA 11: Mitindo ya Border (Border Styles)

Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...
CSS - SOMO LA 22: CSS Transition na Animation

Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.

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 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

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 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

Soma Zaidi...
CSS - SOMO LA 13: Display Property

Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.

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