Kontenta Merkatumado
CSS3-Trajtoj pri kiuj Vi Eble Ne Konsciu: Flexbox, Kradaj Aranĝoj, Propraj Propraĵoj, Transiroj, Animacioj kaj Multoblaj Fonoj
Kaskadaj stilfolioj (CSS) daŭre evoluas kaj la plej novaj versioj eble havas kelkajn funkciojn, pri kiuj vi eble eĉ ne konscias. Jen kelkaj el la ĉefaj plibonigoj kaj metodaroj enkondukitaj kun CSS3, kune kun kodaj ekzemploj:
- Fleksebla Skatolo Aranĝo (Flexbox): aranĝa reĝimo, kiu ebligas al vi krei flekseblajn kaj respondemajn aranĝojn por retpaĝoj. Kun flexbox, vi povas facile vicigi kaj distribui elementojn ene de ujo. n ĉi tiu ekzemplo, la
.container
klasaj uzojdisplay: flex
por ebligi flekskestan aranĝan reĝimon. Lajustify-content
posedaĵo estas agordita alcenter
por horizontale centri la infanan elementon ene de la ujo. Laalign-items
posedaĵo estas agordita alcenter
por vertikale centri la infanan elementon. La.item
klaso fiksas la fonkoloron kaj kompletigo por la infana elemento.
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;
}
rezulto
Centrita Elemento
- Krada aranĝo: alia aranĝa reĝimo, kiu ebligas al vi krei kompleksajn krad-bazitajn aranĝojn por retpaĝoj. Kun krado, vi povas specifi vicojn kaj kolumnojn, kaj poste meti elementojn ene de specifaj ĉeloj de la krado. En ĉi tiu ekzemplo, la
.grid-container
klasaj uzojdisplay: grid
por ebligi kradan aranĝan reĝimon. Lagrid-template-columns
posedaĵo estas agordita alrepeat(2, 1fr)
krei du kolumnojn de egala larĝo. Lagap
posedaĵo fiksas la interspacon inter kradaj ĉeloj. La.grid-item
klaso fiksas la fonkoloron kaj kompletigo por la kradaj eroj.
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;
}
rezulto
Item 1
Item 2
Item 3
Item 4
- Transiroj: CSS3 enkondukis kelkajn novajn trajtojn kaj teknikojn por krei transirojn sur retpaĝoj. Ekzemple, la
transition
posedaĵo povas esti uzata por animi ŝanĝojn en CSS-ecoj laŭlonge de la tempo. En ĉi tiu ekzemplo, la.box
klaso fiksas la larĝon, altecon kaj komencan fonkoloron por la elemento. Latransition
posedaĵo estas agordita albackground-color 0.5s ease
por vigligi ŝanĝojn al la fonkoloro-posedaĵo dum duona sekundo kun facil-en-elira tempofunkcio. La.box:hover
klaso ŝanĝas la fonkoloron de la elemento kiam la musmontrilo estas super ĝi, ekigante la transiran animacion.
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;
}
rezulto
Ŝvebi
Jen!
Jen!
- Animacioj: CSS3 lanĉis kelkajn novajn trajtojn kaj teknikojn por krei animaciojn sur retpaĝoj. En ĉi tiu ekzemplo, ni aldonis animacion uzante la
animation
posedaĵo. Ni difinis a@keyframes
regulo por la animacio, kiu specifas, ke la skatolo devas turni de 0 gradoj ĝis 90 gradoj dum daŭro de 0.5 sekundoj. Kiam la skatolo ŝvebas super, laspin
animacio estas aplikata por turni la skatolon. Laanimation-fill-mode
posedaĵo estas agordita alforwards
por certigi ke la fina stato de la animacio estas konservita post kiam ĝi finiĝas.
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;
}
rezulto
Ŝvebi
Jen!
Jen!
- CSS Propraj Propraĵoj: Ankaŭ konata kiel CSS-variabloj, kutimaj propraĵoj estis enkondukitaj en CSS3. Ili permesas vin difini kaj uzi viajn proprajn kutimajn ecojn en CSS, kiuj povas esti uzataj por stoki kaj reuzi valorojn tra viaj stilfolioj. CSS-variabloj estas identigitaj per nomo, kiu komenciĝas per du streketoj, kiel ekzemple
--my-variable
. En ĉi tiu ekzemplo, ni difinas CSS-variablon nomatan –primary-color kaj donas al ĝi valoron de#007bff
, kiu estas blua koloro ofte uzata kiel primara koloro en multaj dezajnoj. Ni uzis ĉi tiun variablon por agordi labackground-color
posedaĵo de butonelemento, uzante lavar()
funkcio kaj eniranta la variablonomon. Ĉi tio uzos la valoron de la variablo kiel la fonkoloron por la butono.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Multoblaj Fonoj: CSS3 permesas vin specifi plurajn fonbildojn por elemento, kun la kapablo kontroli ĝian poziciigon kaj stakordon. La fono estas kunmetita de du bildoj,
red.png
kajblue.png
, kiuj estas ŝarĝitaj uzante labackground-image
posedaĵo. La unua bildo,red.png
, estas poziciigita ĉe la dekstra malsupra angulo de la elemento, dum la dua bildo,blue.png
, estas poziciigita ĉe la maldekstra supra angulo de la elemento. Labackground-position
posedaĵo estas uzata por kontroli la poziciigon de ĉiu bildo. Labackground-repeat
posedaĵo estas uzata por kontroli kiel la bildoj ripetas. La unua bildo,red.png
, estas agordita por ne ripeti (no-repeat
), dum la dua bildo,blue.png
, estas agordita por ripeti (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;
}