-susbaint Margaideachd

Feartan CSS3 air nach fhaod thu a bhith mothachail: Bogsa Flex, Cruth Clèithe, Feartan Custom, Eadar-ghluasadan, Beothachaidhean, agus Ioma Cùl-fhiosrachadh

Bileagan stoidhle cascading (CSS) leantainn air adhart a’ tighinn air adhart agus dh’ fhaodadh gu bheil cuid de fheartan aig na dreachan as ùire air nach eil thu eadhon mothachail. Seo cuid de na prìomh leasachaidhean agus dòighean-obrach a chaidh a thoirt a-steach le CSS3, còmhla ri eisimpleirean còd:

  • Cruth bogsa sùbailte (Flexbox): modh cruth a leigeas leat cruth sùbailte agus freagairteach a chruthachadh airson duilleagan lìn. Le flexbox, is urrainn dhut gu furasta eileamaidean a cho-thaobhadh agus a chuairteachadh taobh a-staigh soitheach. n eisimpleir seo, an .container cleachdadh clas display: flex gus modh cruth flexbox a chomasachadh. Tha an justify-content seilbh air a shuidheachadh gu center gus an eileamaid leanabh taobh a-staigh an t-soithich a mheadhanachadh gu còmhnard. Tha an align-items seilbh air a shuidheachadh gu center gus eileamaid na cloinne a mheadhanachadh gu dìreach. Tha an .item clas a’ suidheachadh dath cùl-raoin agus pleadhag airson eileamaid na cloinne.

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;
}

toradh

Earrann Meadhanach
  • Cruth clèithe: modh cruth eile a leigeas leat dealbhadh iom-fhillte stèidhichte air cliath a chruthachadh airson duilleagan lìn. Le cliath, faodaidh tu sreathan agus colbhan a shònrachadh, agus an uairsin cuir eileamaidean taobh a-staigh ceallan sònraichte den ghriod. Anns an eisimpleir seo, tha an .grid-container cleachdadh clas display: grid gus modh cruth clèithe a chomasachadh. Tha an grid-template-columns seilbh air a shuidheachadh gu repeat(2, 1fr) gus dà cholbh den aon leud a chruthachadh. Tha an gap bidh seilbh a’ suidheachadh a’ bheàrn eadar ceallan clèithe. Tha an .grid-item clas a’ suidheachadh dath cùl-raoin agus pleadhag airson nithean clèithe.

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;
}

toradh

Nì 1
Nì 2
Nì 3
Nì 4
  • Eadar-ghluasadan: Thug CSS3 a-steach grunn fheartan agus dhòighean ùra airson eadar-ghluasadan a chruthachadh air duilleagan lìn. Mar eisimpleir, an transition faodar seilbh a chleachdadh gus atharrachaidhean ann an togalaichean CSS a bheothachadh thar ùine. Anns an eisimpleir seo, tha an .box clas a’ suidheachadh leud, àirde, agus dath cùl-raoin tùsail an eileamaid. Tha an transition seilbh air a shuidheachadh gu background-color 0.5s ease gus atharrachaidhean ann an seilbh dath cùl-raoin a bheothachadh thairis air leth diog le gnìomh ùineachaidh furasta a-steach. Tha an .box:hover bidh clas ag atharrachadh dath cùl-raoin na h-eileamaid nuair a tha puing na luchaige thairis air, a’ piobrachadh beothachadh gluasaid.

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;
}

toradh

iadhadh
An seo!
  • beòthachaidhean: Thug CSS3 a-steach grunn fheartan agus dhòighean ùra airson beòthachaidhean a chruthachadh air duilleagan lìn. San eisimpleir seo, tha sinn air beòthalachd a chuir ris a’ cleachdadh an animation seilbh. Tha sinn air mìneachadh a @keyframes riaghailt airson a’ bheothachadh, a tha a’ sònrachadh gum bu chòir don bhogsa a bhith a’ tionndadh bho 0 ceum gu 90 ceum thairis air 0.5 diog. Nuair a tha am bogsa air a dhol thairis air, bidh an spin beothachadh ga chuir an sàs gus am bogsa a thionndadh. Tha an animation-fill-mode seilbh air a shuidheachadh gu forwards gus dèanamh cinnteach gu bheilear a 'gleidheadh ​​​​staid mu dheireadh a' bheothachadh an dèidh dha crìochnachadh.

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;
}

toradh

iadhadh
An seo!
  • Feartan gnàthaichte CSS: Cuideachd aithnichte mar Caochlaidhean CSS, chaidh feartan àbhaisteach a thoirt a-steach ann an CSS3. Leigidh iad leat na feartan gnàthaichte agad fhèin a mhìneachadh agus a chleachdadh ann an CSS, a ghabhas cleachdadh gus luachan a stòradh agus ath-chleachdadh air feadh do dhuilleagan stoidhle. Tha caochladairean CSS air an comharrachadh le ainm a tha a’ tòiseachadh le dà dhreach, leithid
    --my-variable. San eisimpleir seo, bidh sinn a’ mìneachadh caochladair CSS ris an canar -bun-dath agus bheir sinn luach dha #007bff, a tha na dath gorm air a chleachdadh gu cumanta mar phrìomh dhath ann an iomadh dealbhadh. Chleachd sinn an caochladair seo gus am faidhle a shuidheachadh background-color seilbh eileamaid putan, le bhith a 'cleachdadh an var() gnìomh agus a’ dol seachad san ainm caochlaideach. Cleachdaidh seo luach an caochladair mar an dath cùl airson a’ phutan.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Ioma chùl-fhiosrachadh: Leigidh CSS3 leat grunn dhealbhan cùl-fhiosrachaidh a shònrachadh airson eileamaid, leis a’ chomas smachd a chumail air an òrdugh suidheachaidh agus cruachadh aige. Tha an cùl air a dhèanamh suas de dhà ìomhaigh, red.png agus blue.png, a tha air an luchdachadh le bhith a’ cleachdadh an background-image seilbh. A’ chiad dealbh, red.png, suidhichte aig oisean gu h-ìosal air an làimh dheis den eileamaid, agus an dàrna ìomhaigh, blue.png, suidhichte aig oisean gu h-àrd air an taobh chlì den eileamaid. Tha an background-position tha seilbh air a chleachdadh gus smachd a chumail air suidheachadh gach ìomhaigh. Tha an background-repeat Tha seilbh air a chleachdadh gus smachd a chumail air mar a bhios na h-ìomhaighean ag ath-aithris. A’ chiad dealbh, red.png, air a shuidheachadh gun ath-aithris (no-repeat), agus an dara dealbh, blue.png, deiseil airson ath-aithris (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;
    }

    toradh

    Douglas Karr

    Douglas Karr tha CMO de OSNAIDHEAN BHO IFRINN agus am fear a stèidhich an Martech Zone. Tha Douglas air dusanan de luchd-tòiseachaidh soirbheachail MarTech a chuideachadh, air cuideachadh le dìcheall iomchaidh de chòrr air $ 5 billean ann an togail agus tasgaidhean Martech, agus a’ leantainn air adhart a ’cuideachadh chompanaidhean ann a bhith a’ buileachadh agus ag fèin-ghluasad an ro-innleachdan reic is margaidheachd. Tha Douglas na chruth-atharrachadh didseatach a tha aithnichte gu h-eadar-nàiseanta agus eòlaiche agus neach-labhairt MarTech. Tha Dùbhghlas cuideachd na ùghdar foillsichte air iùl Dummie agus leabhar stiùireadh gnìomhachais.

    artaigealan co-cheangailte

    Putan air ais dhan mhullach
    Dùin

    Adblock air a lorg

    Martech Zone comasach air an t-susbaint seo a thoirt dhut gun chosgais sam bith oir bidh sinn a’ dèanamh airgead air an làrach againn tro theachd-a-steach sanasachd, ceanglaichean ceangailte, agus urrasachd. Bhithinn toilichte nan toireadh tu air falbh an neach-bacadh sanasachd agad fhad ‘s a tha thu a’ coimhead air an làrach againn.