Content Marketing

Funkcije CSS3, ki jih morda ne poznate: Flexbox, postavitve mreže, lastnosti po meri, prehodi, animacije in več ozadij

Kaskadni slogovni listi (CSS) se še naprej razvijajo in najnovejše različice imajo morda nekatere funkcije, ki se jih morda niti ne zavedate. Tukaj je nekaj glavnih izboljšav in metodologij, uvedenih s CSS3, skupaj s primeri kode:

  • Prilagodljiva postavitev škatle (Flexbox): način postavitve, ki omogoča ustvarjanje prilagodljivih in odzivnih postavitev za spletne strani. S flexboxom lahko preprosto poravnate in porazdelite elemente znotraj vsebnika. v tem primeru, .container razredne uporabe display: flex da omogočite način postavitve flexbox. The justify-content lastnost je nastavljena na center za vodoravno središče podrejenega elementa znotraj vsebnika. The align-items lastnost je nastavljena na center za navpično središče podrejenega elementa. The .item razred nastavi barvo ozadja in oblazinjenje za podrejeni element.

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

Rezultat

Sredinski element
  • Postavitev mreže: drug način postavitve, ki vam omogoča ustvarjanje kompleksnih mrežnih postavitev za spletne strani. Z mrežo lahko določite vrstice in stolpce ter nato postavite elemente v določene celice mreže. V tem primeru je .grid-container razredne uporabe display: grid da omogočite način postavitve mreže. The grid-template-columns lastnost je nastavljena na repeat(2, 1fr) ustvarite dva stolpca enake širine. The gap lastnost nastavi razmik med celicami mreže. The .grid-item razred nastavi barvo ozadja in oblazinjenje za elemente mreže.

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

Rezultat

Točka 1
Točka 2
Točka 3
Točka 4
  • Prehodi: CSS3 je uvedel številne nove lastnosti in tehnike za ustvarjanje prehodov na spletnih straneh. Na primer, transition lahko uporabite za animiranje sprememb v lastnostih CSS skozi čas. V tem primeru je .box nastavi širino, višino in začetno barvo ozadja za element. The transition lastnost je nastavljena na background-color 0.5s ease za animiranje sprememb lastnosti barve ozadja v pol sekunde s funkcijo poenostavljenega merjenja časa. The .box:hover razred spremeni barvo ozadja elementa, ko je miškin kazalec nad njim, kar sproži animacijo prehoda.

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

Rezultat

hover
Tukaj!
  • animacije: CSS3 je uvedel številne nove lastnosti in tehnike za ustvarjanje animacij na spletnih straneh. V tem primeru smo dodali animacijo z uporabo animation premoženje. Določili smo a @keyframes pravilo za animacijo, ki določa, da se polje zavrti od 0 stopinj do 90 stopinj v trajanju 0.5 sekunde. Ko miškin kazalec premaknete nad polje, se spin animacija se uporabi za vrtenje polja. The animation-fill-mode lastnost je nastavljena na forwards da zagotovite, da se končno stanje animacije ohrani po koncu.

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

Rezultat

hover
Tukaj!
  • Lastnosti po meri CSS: Poznan tudi kot spremenljivke CSS, so bile lastnosti po meri uvedene v CSS3. Omogočajo vam definiranje in uporabo lastnih lastnosti po meri v CSS, ki jih je mogoče uporabiti za shranjevanje in ponovno uporabo vrednosti v vaših slogovnih listih. Spremenljivke CSS prepoznamo po imenu, ki se začne z dvema pomišljajima, kot npr
    --my-variable. V tem primeru definiramo spremenljivko CSS, imenovano –primary-color, in ji damo vrednost #007bff, ki je modra barva, ki se običajno uporablja kot primarna barva v številnih dizajnih. To spremenljivko smo uporabili za nastavitev background-color lastnost elementa gumba z uporabo var() funkcijo in posredovanje imena spremenljivke. To bo uporabilo vrednost spremenljivke kot barvo ozadja za gumb.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Več ozadij: CSS3 vam omogoča, da določite več slik ozadja za element, z možnostjo nadzora njegovega položaja in vrstnega reda zlaganja. Ozadje je sestavljeno iz dveh slik, red.png in blue.png, ki se naložijo z uporabo background-image premoženje. Prva slika, red.png, se nahaja v spodnjem desnem kotu elementa, druga slika, blue.png, se nahaja v zgornjem levem kotu elementa. The background-position Lastnost se uporablja za nadzor pozicioniranja vsake slike. The background-repeat Lastnost se uporablja za nadzor ponavljanja slik. Prva slika, red.png, je nastavljen tako, da se ne ponavlja (no-repeat), medtem ko druga slika, blue.png, je nastavljen na ponavljanje (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;
    }

    Rezultat

    Douglas Karr

    Douglas Karr je CMO of Odpri INSIGHTS in ustanovitelj Martech Zone. Douglas je pomagal na desetine uspešnih startupov MarTech, pomagal je pri skrbnem pregledu več kot 5 milijard USD pri prevzemih in naložbah Martecha ter še naprej pomaga podjetjem pri izvajanju in avtomatizaciji njihovih prodajnih in trženjskih strategij. Douglas je mednarodno priznan strokovnjak in govorec za digitalno transformacijo in MarTech. Douglas je tudi objavljen avtor Dummie's guide in knjige o poslovnem vodenju.

    Povezani članki

    Nazaj na vrh
    Zapri

    Zaznan Adblock

    Martech Zone vam lahko zagotovi to vsebino brezplačno, ker naše spletno mesto monetiziramo s prihodki od oglasov, pridruženimi povezavami in sponzorstvi. Hvaležni bi bili, če bi med ogledom našega spletnega mesta odstranili zaviralec oglasov.