ynhâld Marketing
CSS3-funksjes wêrfan jo miskien net bewust binne: Flexbox, Grid-layouts, oanpaste eigenskippen, transysjes, animaasjes en meardere eftergrûnen
Cascading Style Sheets (CSS) trochgean te ûntwikkeljen en de lêste ferzjes kinne guon funksjes hawwe wêrfan jo miskien net iens bewust binne. Hjir binne guon fan 'e grutte ferbetterings en metodologyen yntrodusearre mei CSS3, tegearre mei koadefoarbylden:
- Fleksibele doaze-yndieling (Flexbox): in opmaak modus wêrmei jo te meitsjen fleksibele en responsive layouts foar websiden. Mei flexbox kinne jo eleminten maklik ôfstimme en fersprieden binnen in kontener. n dit foarbyld, de
.container
klasse brûktdisplay: flex
om flexbox-yndielingsmodus yn te skeakeljen. Dejustify-content
eigendom is ynsteld opcenter
om it bernelemint horizontaal yn 'e kontener te sintrum. Dealign-items
eigendom is ynsteld opcenter
om it bernelemint fertikaal te sintrum. De.item
klasse stelt de eftergrûnkleur en padding foar it bernelemint.
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;
}
Resultaat
Centered elemint
- Grid layout: in oare opmaakmodus wêrmei jo komplekse rasterbasearre opmaak foar websiden kinne meitsje. Mei raster kinne jo rigen en kolommen opjaan, en dan eleminten pleatse binnen spesifike sellen fan it raster. Yn dit foarbyld, de
.grid-container
klasse brûktdisplay: grid
om de rasteryndielingsmodus yn te skeakeljen. Degrid-template-columns
eigendom is ynsteld oprepeat(2, 1fr)
om twa kolommen fan gelikense breedte te meitsjen. Degap
eigenskip stelt de ôfstân tusken grid sellen. De.grid-item
klasse stelt de eftergrûnkleur en padding foar de rasteritems yn.
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;
}
Resultaat
Artikel 1
Artikel 2
Artikel 3
Artikel 4
- Oergongen: CSS3 yntrodusearre in oantal nije eigenskippen en techniken foar it meitsjen fan transysjes op websiden. Bygelyks, de
transition
eigendom kin brûkt wurde om feroarings yn CSS-eigenskippen oer tiid te animearjen. Yn dit foarbyld, de.box
klasse stelt de breedte, hichte en earste eftergrûnkleur foar it elemint yn. Detransition
eigendom is ynsteld opbackground-color 0.5s ease
om feroarings oan 'e eftergrûnkleureigenskip oer in heale sekonde te animearjen mei in maklik-yn-út timingfunksje. De.box:hover
klasse feroaret de eftergrûn kleur fan it elemint as de mûsoanwizer is oer it, trigger de oergong animaasje.
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;
}
Resultaat
Hover
Hjir!
Hjir!
- animaasjes: CSS3 yntrodusearre in oantal nije eigenskippen en techniken foar it meitsjen fan animaasjes op websiden. Yn dit foarbyld hawwe wy in animaasje tafoege mei de
animation
besit. Wy hawwe definiearre a@keyframes
regel foar de animaasje, dy't spesifisearret dat it fak moat draaie fan 0 graden nei 90 graden oer in doer fan 0.5 sekonden. As de doaze wurdt hovered oer, despin
animaasje wurdt tapast om it fak te draaien. Deanimation-fill-mode
eigendom is ynsteld opforwards
om te soargjen dat de definitive steat fan 'e animaasje wurdt behâlden neidat it klear is.
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;
}
Resultaat
Hover
Hjir!
Hjir!
- CSS oanpaste eigenskippen: Ek bekind as CSS fariabelen, oanpaste eigenskippen waarden yntrodusearre yn CSS3. Se kinne jo jo eigen oanpaste eigenskippen definiearje en brûke yn CSS, dy't kinne wurde brûkt om wearden yn jo stylblêden op te slaan en opnij te brûken. CSS-fariabelen wurde identifisearre troch in namme dy't begjint mei twa streepkes, lykas
--my-variable
. Yn dit foarbyld definiearje wy in CSS-fariabele neamd -primary-color en jouwe it in wearde fan#007bff
, dat is in blauwe kleur dy't faak brûkt wurdt as primêre kleur yn in protte ûntwerpen. Wy hawwe dizze fariabele brûkt om debackground-color
eigendom fan in knop elemint, mei help fan devar()
funksje en trochjaan yn de fariabele namme. Dit sil de wearde fan 'e fariabele brûke as de eftergrûnkleur foar de knop.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Meardere eftergrûnen: CSS3 kinne jo opjaan meardere eftergrûn ôfbyldings foar in elemint, mei de mooglikheid om te kontrolearjen syn posisjonearring en Stacking folchoarder. De eftergrûn is gearstald út twa bylden,
red.png
enblue.png
, dy't laden wurde mei debackground-image
besit. De earste ôfbylding,red.png
, is pleatst oan 'e rjochter ûnderkant fan it elemint, wylst de twadde ôfbylding,blue.png
, is pleatst oan de linker boppeste hoeke fan it elemint. Debackground-position
eigendom wurdt brûkt om de posisjonearring fan elke ôfbylding te kontrolearjen. Debackground-repeat
eigendom wurdt brûkt om te kontrolearjen hoe't de ôfbyldings werhelje. De earste ôfbylding,red.png
, is ynsteld om net te werheljen (no-repeat
), wylst de twadde ôfbylding,blue.png
, is ynsteld om te werheljen (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;
}