Marketing Content
Likarolo tsa CSS3 O kanna oa se Tseba ka tsona: Flexbox, Libopeho tsa Grid, Maemo a Tloaelehileng, Liphetoho, Lipopae, le Mehato e mengata.
Cascading Style Sheets (CSS) tsoela pele ho fetoha 'me liphetolelo tsa morao-rao li ka ba le likarolo tseo mohlomong u sa li tsebeng. Mona ke tse ling tsa lintlafatso tse kholo le mekhoa e hlahisitsoeng ka CSS3, hammoho le mehlala ea likhoutu:
- Sebopeho sa Lebokose la Flexible (Flexbox): mokhoa oa ho beakanya o o lumellang ho theha meralo e feto-fetohang le e arabelang bakeng sa maqephe a tepo. Ka flexbox, o ka ikamahanya habonolo le ho aba likarolo ka har'a setshelo. n mohlala ona, the
.container
lisebelisoa tsa sehlophadisplay: flex
ho nolofalletsa mokhoa oa sebopeho sa flexbox. Thejustify-content
thepa e behiloe hocenter
ho tsepama setsing sa ngoana element ka har'a setshelo. Thealign-items
thepa e behiloe hocenter
ho thethefatsa hare ho element ya ngoana. The.item
sehlopha se beha bokamorao ba 'mala le padding bakeng sa karolo ea ngoana.
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;
}
Phello
Centered Element
- Sebopeho sa grid: mokhoa o mong oa tlhophiso o o lumellang ho theha meralo e rarahaneng e thehiloeng ho grid bakeng sa maqephe a tepo. Ka grid, o ka hlakisa mela le litšiea, ebe o beha likarolo ka har'a lisele tse itseng tsa grid. Mohlala ona, the
.grid-container
lisebelisoa tsa sehlophadisplay: grid
ho nolofalletsa mokhoa oa sebopeho sa grid. Thegrid-template-columns
thepa e behiloe horepeat(2, 1fr)
ho bopa dikholomo tse pedi tsa bophara bo lekanang. Thegap
thepa e beha sebaka pakeng tsa lisele tsa grid. The.grid-item
sehlopha se beha bokamorao ba 'mala le padding bakeng sa lintho tsa grid.
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;
}
Phello
Ntho ea 1
Ntho ea 2
Ntho ea 3
Ntho ea 4
- Liphetoho: CSS3 e hlahisitse mefuta e mengata e mecha le mekhoa ea ho etsa liphetoho maqepheng a tepo. Ka mohlala, the
transition
thepa e ka sebelisoa ho phelisa liphetoho tsa thepa ea CSS ha nako e ntse e ea. Mohlala ona, the.box
sehlopha se beha bophara, bophahamo, le 'mala oa bokamorao ba element. Thetransition
thepa e behiloe hobackground-color 0.5s ease
ho phelisa liphetoho tsa bokamorao ba 'mala ka nako e fetang halofo ea motsotsoana ka ts'ebetso ea nako ea boiketlo ba ho tsoa. The.box:hover
class e fetola 'mala oa bokamorao ba ntho ha pointer ea mouse e le holim'a eona, e etsa hore ho be le animation ea phetoho.
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;
}
Phello
okaokele
Mona!
Mona!
- Litšoantšo: CSS3 e hlahisitse mefuta e mengata e mecha le mekhoa ea ho etsa lipopae maqepheng a tepo. Mohlaleng ona, re kentse animation ka ho sebelisa
animation
thepa. Re hlalositse a@keyframes
molao bakeng sa animation, e bolelang hore lebokose le lokela ho potoloha ho tloha ho likhato tse 0 ho isa ho tse 90 nakong ea metsotsoana e 0.5. Ha lebokose le hovered ka holimo, thespin
animation e sebelisoa ho potoloha lebokose. Theanimation-fill-mode
thepa e behiloe hoforwards
ho etsa bonnete ba hore boemo ba ho qetela ba animation bo a bolokoa ha bo qeta.
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;
}
Phello
okaokele
Mona!
Mona!
- CSS Custom Properties: E boetse e tsejoa e le Mefuta e fapaneng ea CSS, thepa ea tloaelo e ile ea hlahisoa ho CSS3. Li u lumella ho hlalosa le ho sebelisa thepa ea hau ea tloaelo ho CSS, e ka sebelisoang ho boloka le ho sebelisa boleng bocha maqepheng a hau a setaele. Mefuta-futa ea CSS e khetholloa ka lebitso le qalang ka li-dashe tse peli, joalo ka
--my-variable
. Mohlala ona, re hlalosa mofuta oa CSS o bitsoang -primary-color mme o o fa boleng ba#007bff
, e leng 'mala o moputsoa o atisang ho sebelisoa e le' mala o ka sehloohong meralong e mengata. Re sebelisitse phetoho ena ho thehabackground-color
thepa ea konopo element, ka ho sebelisavar()
tshebetso le ho fetisa lebitsong la phetoho. Sena se tla sebelisa boleng ba ho feto-fetoha joalo ka bokamorao ba 'mala oa konopo.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Mehaho e Mengata: CSS3 e u lumella ho hlakisa litšoantšo tse ngata tsa bokamorao bakeng sa element, ka bokhoni ba ho laola boemo ba eona le tatellano ea ho e bokella. Bokamorao bo entsoe ka litšoantšo tse peli,
red.png
'meblue.png
, tse kenngoeng ka ho sebelisabackground-image
thepa. Setšoantšo sa pele,red.png
, e behiloe hukung e ka tlase e ka tlase ea element, ha setšoantšo sa bobeli,blue.png
, e behiloe hukung e kaholimo ho le letšehali ea element. Thebackground-position
thepa e sebelisoa ho laola boemo ba setšoantšo ka seng. Thebackground-repeat
thepa e sebelisoa ho laola hore na litšoantšo li ipheta joang. Setšoantšo sa pele,red.png
, e behiloe hore e se ke ea pheta (no-repeat
), ha setšoantšo sa bobeli,blue.png
, e hlophiselitsoe ho pheta-pheta (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;
}