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.
📘 Utangulizi
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.
✅ 1. calc() – Mahesabu ya moja kwa moja
Function ya calc() hutumika kufanya hesabu ya vipimo vya CSS.
🔹 Syntax:
width: calc(100% - 50px);
🔹 Mfano kamili:
.container {
width: calc(100% - 2rem);
padding: 1rem;
}
Unaruhusiwa kutumia:
-
+,-,*,/ -
Thamani zenye aina tofauti (%, px, rem)
✅ 2. clamp() – Kuweka kima cha chini, cha kati, na cha juu
clamp() hutumika kuweka thamani inayobadilika kati ya kiwango cha chini na cha juu kulingana na ukubwa wa skrini.
🔹 Syntax:
font-size: clamp(1rem, 2vw, 2rem);
Maana: font haitashuka chini ya
1rem, itakua hadi2rem, ikifuata 2% ya viewport width (2vw)
✅ 3. var() – Kutumia CSS Variables
var() hutumika kuchukua thamani kutoka kwenye CSS variable (--custom-property)
🔹 Mfano:
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
}
Hii huruhusu reuse ya rangi, padding, margin, n.k. kwa urahisi.
✅ 4. min() – Kuchukua thamani ndogo
Hufanya kazi kama ilivyo kwenye hesabu: huchagua thamani ndogo zaidi kati ya zinazotolewa.
🔹 Mfano:
width: min(80%, 400px);
Kipengele kitakuwa na width ya 80% ya mzazi au px 400 — chochote kilicho kidogo.
✅ 5. max() – Kuchukua thamani kubwa
Hufanya kazi kinyume na min() — huchagua thamani kubwa zaidi.
🔹 Mfano:
width: max(300px, 50%);
Hapa, kipengele kitaepuka kuwa kidogo sana — kitaanza kwenye 300px au 50%, yoyote iliyo kubwa.
✅ 6. Jinsi ya Kutengeneza Custom Function (kwa kutumia variables)
Ingawa CSS haina functions halisi kama JavaScript, unaweza kuunda reusable behavior kwa kutumia var() na combining functions:
🔹 Mfano:
: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.
✅ Hitimisho
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.
🔜 Somo Linalofuata: SOMO LA 31 – CSS Filters (blur, brightness, contrast, etc.)
Tutajifunza jinsi ya kutumia filters katika picha, backgrounds, na elementi nyingine kwa madhumuni ya kuifanya UI yako ionekane kisasa.
🧠 Maswali ya Kujitathmini
-
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)@mediapekee
c)var()+calc()
d)animation-name
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 web hosting 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Simulizi za Hadithi Audio 👉4 Kitau cha Fiqh 👉5 Kitabu cha Afya 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
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 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 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 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
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...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
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...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...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 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 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...