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.
CSS functions ni kama “tools” maalum zinazoruhusu utendaji wa kisasa zaidi ndani ya styles zako. Kwa kutumia functions hizi, unaweza kufanya mahesabu, kuingiza thamani kutoka kwenye variables, kudhibiti ukubwa kulingana na mazingira ya kifaa, na zaidi — yote haya bila JavaScript.
calc()
– Mahesabu ya moja kwa mojaFunction ya calc()
hutumika kufanya hesabu ya vipimo vya CSS.
width: calc(100% - 50px);
.container {
width: calc(100% - 2rem);
padding: 1rem;
}
Unaruhusiwa kutumia:
+
, -
, *
, /
Thamani zenye aina tofauti (%, px, rem)
clamp()
– Kuweka kima cha chini, cha kati, na cha juuclamp()
hutumika kuweka thamani inayobadilika kati ya kiwango cha chini na cha juu kulingana na ukubwa wa skrini.
font-size: clamp(1rem, 2vw, 2rem);
Maana: font haitashuka chini ya
1rem
, itakua hadi2rem
, ikifuata 2% ya viewport width (2vw
)
var()
– Kutumia CSS Variablesvar()
hutumika kuchukua thamani kutoka kwenye CSS variable (--custom-property
)
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
}
Hii huruhusu reuse ya rangi, padding, margin, n.k. kwa urahisi.
min()
– Kuchukua thamani ndogoHufanya kazi kama ilivyo kwenye hesabu: huchagua thamani ndogo zaidi kati ya zinazotolewa.
width: min(80%, 400px);
Kipengele kitakuwa na width ya 80% ya mzazi au px 400 — chochote kilicho kidogo.
max()
– Kuchukua thamani kubwaHufanya kazi kinyume na min()
— huchagua thamani kubwa zaidi.
width: max(300px, 50%);
Hapa, kipengele kitaepuka kuwa kidogo sana — kitaanza kwenye 300px au 50%, yoyote iliyo kubwa.
Ingawa CSS haina functions halisi kama JavaScript, unaweza kuunda reusable behavior kwa kutumia var()
na combining functions:
:root {
--spacing: 2rem;
--button-size: calc(var(--spacing) * 3);
}
.btn {
width: var(--button-size);
height: var(--spacing);
}
Kwa kutumia
calc()
navar()
pamoja, unaweza kutengeneza logic kama function.
Functions katika CSS hutoa nguvu ya kipekee kufanya styles zako ziwe flexible, dynamic, na rahisi kusimamia. Kutumia calc()
, clamp()
, var()
, min()
, na max()
hukuwezesha kupunguza reliance kwa media queries au JavaScript. Ni njia bora ya kuandika CSS ya kisasa.
Tutajifunza jinsi ya kutumia filters katika picha, backgrounds, na elementi nyingine kwa madhumuni ya kuifanya UI yako ionekane kisasa.
Kazi ya calc()
ni ipi?
a) Kuongeza opacity
b) Kufanya hesabu kwenye vipimo
c) Kuweka rangi
d) Kuunda animation
clamp(1rem, 2vw, 3rem)
ina maana gani?
a) Thamani ya font haitabadilika
b) Font itabaki 2rem tu
c) Font itakuwa kati ya 1rem hadi 3rem kulingana na screen
d) Font itapungua kila wakati
Kipi kinaweza kuchukua thamani ya CSS Variable?
a) calc()
b) min()
c) var()
d) font-family
min(500px, 80%)
inamaanisha nini?
a) Chukua kubwa kati ya hizo
b) Chukua ndogo kati ya hizo
c) Weka margin 500px
d) Tumia opacity ya 80%
Je, unaweza kutengeneza custom logic katika CSS kwa kutumia:
a) JavaScript tu
b) @media
pekee
c) var()
+ calc()
d) animation-name
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
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...Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...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...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.
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...katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...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...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...