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 dosbarth display: flex i alluogi modd gosodiad flexbox. Mae'r justify-content eiddo wedi ei osod i center canoli'r elfen plentyn yn llorweddol yn y cynhwysydd. Mae'r align-items eiddo wedi ei osod i center 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 dosbarth display: grid i alluogi modd gosodiad grid. Mae'r grid-template-columns eiddo wedi ei osod i repeat(2, 1fr) i greu dwy golofn o led cyfartal. Mae'r gap 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'r transition eiddo wedi ei osod i background-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!
  • 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, y spin cymhwysir animeiddiad i gylchdroi'r blwch. Mae'r animation-fill-mode eiddo wedi ei osod i forwards 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!
  • 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 y background-color eiddo elfen botwm, trwy ddefnyddio'r var() 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 a blue.png, sy'n cael eu llwytho gan ddefnyddio'r background-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'r background-position defnyddir eiddo i reoli lleoliad pob delwedd. Mae'r background-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;
    }

    Canlyniad

    Douglas Karr

    Douglas Karr yn CMO o AGOREDION a sylfaenydd y Martech Zone. Mae Douglas wedi helpu dwsinau o fusnesau newydd llwyddiannus MarTech, wedi cynorthwyo gyda diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac yn parhau i gynorthwyo cwmnïau i weithredu ac awtomeiddio eu strategaethau gwerthu a marchnata. Mae Douglas yn arbenigwr trawsnewid digidol ac yn siaradwr MarTech a gydnabyddir yn rhyngwladol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

    Erthyglau Perthnasol

    Yn ôl i'r brig botwm
    Cau

    Adblock Wedi'i Ganfod

    Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.