Cynnwys Marchnata
Nodweddion CSS3 Mae'n Efallai Na Fyddech Yn Ymwybodol Ohonynt: Flexbox, Cynlluniau Grid, Priodweddau Personol, Trawsnewidiadau, Animeiddiadau, a Chefndir Lluosog
Dalennau Arddull Rhaeadrol (CSS) parhau i esblygu ac efallai y bydd gan y fersiynau diweddaraf rai nodweddion efallai nad ydych hyd yn oed yn ymwybodol ohonynt. Dyma rai o'r prif welliannau a methodolegau a gyflwynwyd gyda CSS3, ynghyd ag enghreifftiau cod:
- Cynllun Blwch Hyblyg (Flexbox): modd gosodiad sy'n eich galluogi i greu cynlluniau hyblyg ac ymatebol ar gyfer tudalennau gwe. Gyda flexbox, gallwch chi alinio a dosbarthu elfennau yn hawdd o fewn cynhwysydd. n enghraifft hon, y
.container
defnyddiau dosbarthdisplay: flex
i alluogi modd gosodiad flexbox. Mae'rjustify-content
eiddo wedi ei osod icenter
canoli'r elfen plentyn yn llorweddol yn y cynhwysydd. Mae'ralign-items
eiddo wedi ei osod icenter
canoli'r elfen plentyn yn fertigol. Mae'r.item
dosbarth yn gosod y lliw cefndir a phadin ar gyfer yr elfen plentyn.
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;
}
Canlyniad
Elfen Ganolog
- Cynllun grid: modd gosodiad arall sy'n eich galluogi i greu cynlluniau grid cymhleth ar gyfer tudalennau gwe. Gyda grid, gallwch chi nodi rhesi a cholofnau, ac yna gosod elfennau o fewn celloedd penodol y grid. Yn yr enghraifft hon, mae'r
.grid-container
defnyddiau dosbarthdisplay: grid
i alluogi modd gosodiad grid. Mae'rgrid-template-columns
eiddo wedi ei osod irepeat(2, 1fr)
i greu dwy golofn o led cyfartal. Mae'rgap
eiddo sy'n gosod y gofod rhwng celloedd grid. Mae'r.grid-item
dosbarth yn gosod y lliw cefndir a phadin ar gyfer yr eitemau 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;
}
Canlyniad
Eitem 1
Eitem 2
Eitem 3
Eitem 4
- Trawsnewidiadau: Cyflwynodd CSS3 nifer o briodweddau a thechnegau newydd ar gyfer creu trawsnewidiadau ar dudalennau gwe. Er enghraifft, mae'r
transition
gellir defnyddio eiddo i animeiddio newidiadau mewn eiddo CSS dros amser. Yn yr enghraifft hon, mae'r.box
dosbarth yn gosod lled, uchder, a lliw cefndir cychwynnol ar gyfer yr elfen. Mae'rtransition
eiddo wedi ei osod ibackground-color 0.5s ease
i animeiddio newidiadau i briodwedd lliw cefndir dros hanner eiliad gyda swyddogaeth amseru rhwyddineb i mewn. Mae'r.box:hover
dosbarth yn newid lliw cefndir yr elfen pan fydd pwyntydd y llygoden drosto, gan sbarduno'r animeiddiad trawsnewid.
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;
}
Canlyniad
hofran
Yma!
Yma!
- animeiddiadau: Cyflwynodd CSS3 nifer o briodweddau a thechnegau newydd ar gyfer creu animeiddiadau ar dudalennau gwe. Yn yr enghraifft hon, rydym wedi ychwanegu animeiddiad gan ddefnyddio'r
animation
eiddo. Rydym wedi diffinio a@keyframes
rheol ar gyfer yr animeiddiad, sy'n nodi y dylai'r blwch gylchdroi o 0 gradd i 90 gradd dros gyfnod o 0.5 eiliad. Pan fydd y blwch yn hofran drosodd, yspin
cymhwysir animeiddiad i gylchdroi'r blwch. Mae'ranimation-fill-mode
eiddo wedi ei osod iforwards
i sicrhau bod cyflwr terfynol yr animeiddiad yn cael ei gadw ar ôl iddo ddod i ben.
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;
}
Canlyniad
hofran
Yma!
Yma!
- Priodweddau Personol CSS: Fe'i gelwir hefyd yn Newidynnau CSS, cyflwynwyd eiddo arfer yn CSS3. Maent yn caniatáu ichi ddiffinio a defnyddio'ch priodweddau arfer eich hun yn CSS, y gellir eu defnyddio i storio ac ailddefnyddio gwerthoedd trwy gydol eich dalennau arddull. Mae newidynnau CSS yn cael eu hadnabod gan enw sy'n dechrau gyda dau doriad, fel
--my-variable
. Yn yr enghraifft hon, rydym yn diffinio newidyn CSS o'r enw -primary-color ac yn rhoi gwerth iddo#007bff
, sef lliw glas a ddefnyddir yn gyffredin fel lliw cynradd mewn llawer o ddyluniadau. Rydym wedi defnyddio'r newidyn hwn i osod ybackground-color
eiddo elfen botwm, trwy ddefnyddio'rvar()
swyddogaeth a phasio yn yr enw newidyn. Bydd hyn yn defnyddio gwerth y newidyn fel lliw cefndir y botwm.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Cefndir Lluosog: Mae CSS3 yn caniatáu ichi nodi delweddau cefndir lluosog ar gyfer elfen, gyda'r gallu i reoli ei leoliad a'i drefn stacio. Mae'r cefndir yn cynnwys dwy ddelwedd,
red.png
ablue.png
, sy'n cael eu llwytho gan ddefnyddio'rbackground-image
eiddo. Y llun cyntaf,red.png
, wedi'i leoli ar gornel dde isaf yr elfen, tra bod yr ail ddelwedd,blue.png
, wedi'i leoli ar gornel chwith uchaf yr elfen. Mae'rbackground-position
defnyddir eiddo i reoli lleoliad pob delwedd. Mae'rbackground-repeat
defnyddir eiddo i reoli sut mae'r delweddau'n ailadrodd. Y llun cyntaf,red.png
, wedi'i osod i beidio ag ailadrodd (no-repeat
), tra bod yr ail ddelwedd,blue.png
, wedi'i osod i ailadrodd (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;
}