CSS3 funktsioonid, millest te ei pruugi teadlik olla: Flexbox, ruudustiku paigutused, kohandatud atribuudid, üleminekud, animatsioonid ja mitu tausta

Kaskaadlaaditabelid (CSS) arenevad edasi ja uusimatel versioonidel võivad olla mõned funktsioonid, millest te ei pruugi isegi teadlik olla. Siin on mõned CSS3-ga kasutusele võetud peamised täiustused ja metoodikad koos koodinäidetega:

• Paindliku kasti paigutus (Flexbox): küljendusrežiim, mis võimaldab luua veebilehtedele paindlikke ja reageerivaid paigutusi. Flexboxi abil saate elemente konteineris hõlpsalt joondada ja jaotada. selles näites .container klassikasutusi display: flex flexboxi paigutusrežiimi lubamiseks. The justify-content atribuut on seatud center alamelemendi horisontaalseks tsentreerimiseks konteineris. The align-items atribuut on seatud center alamelemendi vertikaalseks tsentreerimiseks. The .item klass määrab alamelemendi taustavärvi ja polstri.

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• Võrgu paigutus: teine ​​paigutusrežiim, mis võimaldab luua veebilehtede jaoks keerulisi ruudustikupõhiseid paigutusi. Ruudustikuga saate määrata ridu ja veerge ning seejärel paigutada elemente ruudustiku kindlatesse lahtritesse. Selles näites on .grid-container klassikasutusi display: grid ruudustiku paigutuse režiimi lubamiseks. The grid-template-columns atribuut on seatud repeat(2, 1fr) luua kaks võrdse laiusega veergu. The gap atribuut määrab ruudustiku lahtrite vahelise vahemaa. The .grid-item klass määrab ruudustiku üksuste taustavärvi ja polstri.

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• Üleminekud: CSS3 tutvustas mitmeid uusi omadusi ja tehnikaid üleminekute loomiseks veebilehtedel. Näiteks transition atribuuti saab kasutada CSS-i atribuutide muutuste animeerimiseks aja jooksul. Selles näites on .box klass määrab elemendi laiuse, kõrguse ja algse taustavärvi. The transition atribuut on seatud background-color 0.5s ease taustavärvi omaduste muutuste animeerimiseks poole sekundi jooksul, kasutades ajastusfunktsiooni "lihtsus sisse-välja". The .box:hover klass muudab elemendi taustavärvi, kui hiirekursor on selle kohal, käivitades üleminekuanimatsiooni.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• Animatsioonid: CSS3 tutvustas mitmeid uusi omadusi ja tehnikaid veebilehtedel animatsioonide loomiseks. Selles näites oleme lisanud animatsiooni, kasutades animation vara. Oleme määratlenud a @keyframes animatsiooni reegel, mis määrab, et kast peaks 0 sekundi jooksul pöörlema ​​90 kraadist 0.5 kraadini. Kui kasti kohal hõljutatakse, kuvatakse spin kasti pööramiseks rakendatakse animatsiooni. The animation-fill-mode atribuut on seatud forwards et tagada animatsiooni lõppoleku säilimine pärast selle lõppemist.

<div class="rotate"></div>

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

• CSS-i kohandatud atribuudid: Tuntud ka kui CSS-i muutujad, võeti CSS3-s kasutusele kohandatud atribuudid. Need võimaldavad teil määratleda ja kasutada CSS-is oma kohandatud atribuute, mida saab kasutada väärtuste salvestamiseks ja taaskasutamiseks kogu stiilitabelites. CSS-i muutujad identifitseeritakse nime järgi, mis algab kahe kriipsuga, näiteks --my-variable. Selles näites määratleme CSS-i muutuja nimega –primary-color ja anname sellele väärtuse #007bff, mis on sinine värv, mida tavaliselt kasutatakse paljude kujunduste põhivärvina. Oleme kasutanud seda muutujat, et määrata background-color nupu elemendi omadus, kasutades var() funktsioon ja muutuja nime edastamine. See kasutab muutuja väärtust nupu taustavärvina.

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• Mitu tausta: CSS3 võimaldab määrata elemendile mitu taustapilti koos võimalusega juhtida selle positsioneerimist ja virnastamisjärjekorda. Taust koosneb kahest pildist, red.png ja blue.png, mis laaditakse kasutades background-image vara. Esimene pilt, red.png, asub elemendi paremas alanurgas, samas kui teine ​​pilt, blue.png, asub elemendi vasakus ülanurgas. The background-position atribuuti kasutatakse iga pildi asukoha juhtimiseks. The background-repeat atribuuti kasutatakse piltide kordumise kontrollimiseks. Esimene pilt, red.png, on seatud mitte kordama (no-repeat), samas kui teine ​​pilt, blue.png, on seatud kordama (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}