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.
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.
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%);
}
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);
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.
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.
@font-face
Tutajifunza jinsi ya kutumia fonts tofauti kutoka kwenye Google Fonts au fonts zako mwenyewe kwa kutumia @font-face
.
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.. ?
Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...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...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...Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...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...Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...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...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...