Maudhui ya masoko
Vipengele vya CSS3 Ambavyo Huwezi Kuvifahamu: Flexbox, Miundo ya Gridi, Sifa Maalum, Mipito, Uhuishaji, na Mandhari Nyingi.
Laha za Mtindo wa Kuachia (CSS) endelea kubadilika na matoleo mapya zaidi yanaweza kuwa na baadhi ya vipengele ambavyo huenda hata hujui. Hapa kuna baadhi ya maboresho na mbinu kuu zilizoletwa na CSS3, pamoja na mifano ya msimbo:
- Mpangilio wa Sanduku Inayobadilika (Flexbox): hali ya mpangilio inayokuruhusu kuunda mipangilio inayoweza kunyumbulika na sikivu kwa kurasa za wavuti. Ukiwa na flexbox, unaweza kupanga na kusambaza vipengele kwa urahisi ndani ya kontena. n mfano huu,
.container
matumizi ya darasadisplay: flex
kuwezesha hali ya mpangilio wa flexbox. Thejustify-content
mali imewekwacenter
kuweka kipengee cha mtoto kwa usawa ndani ya chombo. Thealign-items
mali imewekwacenter
kuweka kipengee cha mtoto kiwima. The.item
darasa huweka rangi ya mandharinyuma na pedi kwa kipengele cha mtoto.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Matokeo yake
Kipengele kilicho katikati
- Muundo wa gridi: hali nyingine ya mpangilio ambayo hukuruhusu kuunda mipangilio changamano ya msingi wa gridi ya kurasa za wavuti. Kwa gridi ya taifa, unaweza kutaja safu na safu, na kisha kuweka vipengele ndani ya seli maalum za gridi ya taifa. Katika mfano huu,
.grid-container
matumizi ya darasadisplay: grid
kuwezesha hali ya mpangilio wa gridi. Thegrid-template-columns
mali imewekwarepeat(2, 1fr)
kuunda safu mbili za upana sawa. Thegap
mali huweka nafasi kati ya seli za gridi ya taifa. The.grid-item
class huweka rangi ya usuli na pedi za vipengee vya gridi ya taifa.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Matokeo yake
Item 1
Item 2
Item 3
Item 4
- Mpito: CSS3 ilianzisha idadi ya sifa mpya na mbinu za kuunda mabadiliko kwenye kurasa za wavuti. Kwa mfano,
transition
mali inaweza kutumika kuhuisha mabadiliko katika sifa za CSS kwa wakati. Katika mfano huu,.box
class huweka upana, urefu, na rangi ya asili ya mandharinyuma kwa kipengele. Thetransition
mali imewekwabackground-color 0.5s ease
ili kuhuisha mabadiliko kwenye kipengele cha rangi ya usuli kwa zaidi ya nusu sekunde kwa kutumia muda wa kuingia kwa urahisi. The.box:hover
class hubadilisha rangi ya usuli ya kipengele wakati kielekezi cha kipanya kiko juu yake, na kusababisha uhuishaji wa mpito.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Matokeo yake
hover
Hapa!
Hapa!
- Mifano: CSS3 ilianzisha idadi ya sifa na mbinu mpya za kuunda uhuishaji kwenye kurasa za wavuti. Katika mfano huu, tumeongeza uhuishaji kwa kutumia
animation
mali. Tumefafanua a@keyframes
sheria ya uhuishaji, ambayo inabainisha kuwa kisanduku kinapaswa kuzunguka kutoka digrii 0 hadi digrii 90 kwa muda wa sekunde 0.5. Wakati kisanduku kimewekwa juu,spin
uhuishaji unatumika kuzungusha kisanduku. Theanimation-fill-mode
mali imewekwaforwards
ili kuhakikisha kuwa hali ya mwisho ya uhuishaji inahifadhiwa baada ya kukamilika.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Matokeo yake
hover
Hapa!
Hapa!
- Sifa Maalum za CSS: Pia inajulikana kama Vigezo vya CSS, sifa maalum zilianzishwa katika CSS3. Zinakuruhusu kufafanua na kutumia sifa zako maalum katika CSS, ambazo zinaweza kutumika kuhifadhi na kutumia tena thamani katika laha zako zote za mitindo. Vigezo vya CSS vinatambuliwa kwa jina linaloanza na deshi mbili, kama vile
--my-variable
. Katika mfano huu, tunafafanua tofauti ya CSS inayoitwa -primary-color na kuipa thamani ya#007bff
, ambayo ni rangi ya samawati inayotumika sana kama rangi ya msingi katika miundo mingi. Tumetumia utaftaji huu kuweka faili yabackground-color
mali ya kipengele cha kifungo, kwa kutumiavar()
kazi na kupita kwa jina la kutofautisha. Hii itatumia thamani ya kutofautisha kama rangi ya usuli ya kitufe.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Mandhari Nyingi: CSS3 hukuruhusu kubainisha picha nyingi za mandharinyuma za kipengele, chenye uwezo wa kudhibiti upangaji wake na mpangilio wa mrundikano. Usuli unajumuisha picha mbili,
red.png
nablue.png
, ambazo hupakiwa kwa kutumiabackground-image
mali. Picha ya kwanza,red.png
, imewekwa kwenye kona ya chini ya kulia ya kipengele, wakati picha ya pili,blue.png
, imewekwa kwenye kona ya juu ya kushoto ya kipengele. Thebackground-position
mali hutumika kudhibiti uwekaji wa kila picha. Thebackground-repeat
mali hutumika kudhibiti jinsi picha zinavyojirudia. Picha ya kwanza,red.png
, imewekwa kutorudia (no-repeat
), wakati picha ya pili,blue.png
, imewekwa kurudia (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}