Content Marketing

CSS3 eiginleikar sem þú gætir ekki verið meðvitaðir um: Flexbox, Grid Layouts, Custom Properties, Transitions, Animation og Margfeldi bakgrunnur

Cascading stílblöð (CSS) halda áfram að þróast og nýjustu útgáfurnar kunna að hafa nokkra eiginleika sem þú gætir ekki einu sinni verið meðvitaður um. Hér eru nokkrar af helstu endurbótum og aðferðum sem kynntar eru með CSS3, ásamt kóðadæmum:

  • Sveigjanlegt kassaskipulag (Flexbox): útlitsstilling sem gerir þér kleift að búa til sveigjanlegt og móttækilegt skipulag fyrir vefsíður. Með flexbox geturðu auðveldlega stillt og dreift hlutum innan íláts. n þessu dæmi, the .container bekk notar display: flex til að virkja flexbox skipulagsham. The justify-content eign er stillt á center til að miðja undirhlutann lárétt innan ílátsins. The align-items eign er stillt á center til að miðja undireininguna lóðrétt. The .item bekkur setur bakgrunnslit og bólstrun fyrir barnaþáttinn.

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

Niðurstaða

Miðað frumefni
  • Skipulag hnitanets: annar útlitshamur sem gerir þér kleift að búa til flókin rist-undirstaða skipulag fyrir vefsíður. Með hnitaneti geturðu tilgreint línur og dálka og síðan sett þætti innan tiltekinna reita hnitanetsins. Í þessu dæmi er .grid-container bekk notar display: grid til að virkja útlitsstillingu fyrir rist. The grid-template-columns eign er stillt á repeat(2, 1fr) til að búa til tvo dálka jafn breiða. The gap eiginleiki setur bilið á milli ristfruma. The .grid-item bekkur setur bakgrunnslit og fyllingu fyrir rist atriðin.

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

Niðurstaða

Liður 1
Liður 2
Liður 3
Liður 4
  • Umskipti: CSS3 kynnti fjölda nýrra eiginleika og tækni til að búa til umbreytingar á vefsíðum. Til dæmis, the transition eign er hægt að nota til að lífga breytingar á CSS eignum með tímanum. Í þessu dæmi er .box bekk setur breidd, hæð og upphafsbakgrunnslit fyrir frumefni. The transition eign er stillt á background-color 0.5s ease til að lífga breytingar á bakgrunnslitareiginleikum á hálfri sekúndu með tímastillingu sem auðvelt er að taka inn. The .box:hover class breytir bakgrunnslit frumefnisins þegar músarbendillinn er yfir honum og kveikir á umbreytingarhreyfingunni.

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

Niðurstaða

Sveima
Hérna!
  • Teiknimyndir: CSS3 kynnti fjölda nýrra eiginleika og tækni til að búa til hreyfimyndir á vefsíðum. Í þessu dæmi höfum við bætt við hreyfimynd með því að nota animation eign. Við höfum skilgreint a @keyframes regla fyrir hreyfimyndina, sem tilgreinir að kassinn ætti að snúa úr 0 gráðum í 90 gráður á 0.5 sekúndum tíma. Þegar kassi er sveima yfir, the spin hreyfimynd er notuð til að snúa kassanum. The animation-fill-mode eign er stillt á forwards til að tryggja að endanlegt ástand hreyfimyndarinnar haldist eftir að því lýkur.

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

Niðurstaða

Sveima
Hérna!
  • CSS sérsniðnar eiginleikar: Einnig þekkt sem CSS breytur, sérsniðnir eiginleikar voru kynntir í CSS3. Þeir gera þér kleift að skilgreina og nota þína eigin sérsniðnu eiginleika í CSS, sem hægt er að nota til að geyma og endurnýta gildi í gegnum stílblöðin þín. CSS breytur eru auðkenndar með nafni sem byrjar á tveimur strikum, svo sem
    --my-variable. Í þessu dæmi skilgreinum við CSS breytu sem kallast –primary-color og gefum henni gildið #007bff, sem er blár litur sem almennt er notaður sem aðallitur í mörgum hönnunum. Við höfum notað þessa breytu til að stilla background-color eiginleiki hnappaeiningar, með því að nota var() fall og að senda inn breytuheitið. Þetta mun nota gildi breytunnar sem bakgrunnslit fyrir hnappinn.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Margfaldur bakgrunnur: CSS3 gerir þér kleift að tilgreina margar bakgrunnsmyndir fyrir frumefni, með getu til að stjórna staðsetningu hans og stöflun. Bakgrunnurinn er samsettur úr tveimur myndum, red.png og blue.png, sem eru hlaðnir með því að nota background-image eign. Fyrsta myndin, red.png, er staðsett neðst í hægra horni frumefnisins, en önnur myndin, blue.png, er staðsett efst í vinstra horni frumefnisins. The background-position eign er notuð til að stjórna staðsetningu hverrar myndar. The background-repeat eiginleiki er notaður til að stjórna því hvernig myndirnar endurtaka sig. Fyrsta myndin, red.png, er stillt á að endurtaka ekki (no-repeat), en önnur myndin, blue.png, er stillt á að endurtaka (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;
    }

    Niðurstaða

    Douglas Karr

    Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

    tengdar greinar

    Til baka efst á hnappinn
    Loka

    Auglýsingablokk greind

    Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.