Sisältö Markkinointi

CSS3-ominaisuudet, joista et ehkä ole tietoinen: Flexbox, ruudukkoasettelut, mukautetut ominaisuudet, siirtymät, animaatiot ja useat taustat

CSS Style Sheets (CSS) kehittyy edelleen, ja uusimmissa versioissa voi olla ominaisuuksia, joista et ehkä ole edes tietoinen. Tässä on joitain tärkeimmistä CSS3:n parannuksista ja menetelmistä sekä koodiesimerkkejä:

  • Joustava laatikkoasettelu (Flexbox): asettelutila, jonka avulla voit luoda joustavia ja reagoivia asetteluja verkkosivuille. Flexboxin avulla voit helposti kohdistaa ja jakaa elementtejä säilössä. tässä esimerkissä .container luokan käyttöjä display: flex ottaaksesi flexbox-asettelutilan käyttöön. The justify-content ominaisuus on asetettu center keskittääksesi lapsielementin vaakasuoraan säiliön sisällä. The align-items ominaisuus on asetettu center keskittääksesi lapsielementin pystysuoraan. The .item luokka määrittää alielementin taustavärin ja täyteyksen.

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

Tulos

Keskitetty elementti
  • Ruudukkoasettelu: toinen asettelutila, jonka avulla voit luoda monimutkaisia ​​ruudukkopohjaisia ​​asetteluja verkkosivuille. Ruudukon avulla voit määrittää rivejä ja sarakkeita ja sijoittaa sitten elementtejä ruudukon tiettyihin soluihin. Tässä esimerkissä .grid-container luokan käyttöjä display: grid ottaaksesi ruudukon asettelutilan käyttöön. The grid-template-columns ominaisuus on asetettu repeat(2, 1fr) luodaksesi kaksi yhtä leveää saraketta. The gap ominaisuus määrittää ruudukon solujen välisen etäisyyden. The .grid-item luokka määrittää ruudukon kohteiden taustavärin ja pehmusteen.

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

Tulos

Tuote 1
Tuote 2
Tuote 3
Tuote 4
  • siirtymät: CSS3 esitteli useita uusia ominaisuuksia ja tekniikoita siirtymien luomiseen verkkosivuilla. Esimerkiksi, transition ominaisuutta voidaan käyttää CSS-ominaisuuksien muutosten animointiin ajan myötä. Tässä esimerkissä .box luokka määrittää elementin leveyden, korkeuden ja alkuperäisen taustavärin. The transition ominaisuus on asetettu background-color 0.5s ease animoida taustavärin muutoksia puolen sekunnin aikana helpon sisään-ulos -ajoitustoiminnon avulla. The .box:hover luokka muuttaa elementin taustaväriä, kun hiiren osoitin on sen päällä, jolloin siirtymäanimaatio käynnistyy.

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

Tulos

Häilyä
Täällä!
  • animaatiot: CSS3 esitteli useita uusia ominaisuuksia ja tekniikoita animaatioiden luomiseen verkkosivuille. Tässä esimerkissä olemme lisänneet animaation käyttämällä animation omaisuutta. Olemme määritelleet a @keyframes animaation sääntö, joka määrittää, että laatikon tulee kääntyä 0 astetta 90 asteeseen 0.5 sekunnin aikana. Kun laatikko viedään sen päälle, spin animaatiota käytetään laatikon kiertämiseen. The animation-fill-mode ominaisuus on asetettu forwards varmistaaksesi, että animaation lopullinen tila säilyy sen päättymisen jälkeen.

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

Tulos

Häilyä
Täällä!
  • CSS:n mukautetut ominaisuudet: Tunnetaan myös CSS-muuttujat, mukautetut ominaisuudet otettiin käyttöön CSS3:ssa. Niiden avulla voit määrittää ja käyttää omia mukautettuja ominaisuuksiasi CSS:ssä, joita voidaan käyttää arvojen tallentamiseen ja uudelleenkäyttöön tyylitaulukoissasi. CSS-muuttujat tunnistetaan nimellä, joka alkaa kahdella viivalla, kuten
    --my-variable. Tässä esimerkissä määritämme CSS-muuttujan nimeltä -primary-color ja annamme sille arvon #007bff, joka on sininen väri, jota käytetään yleisesti päävärinä monissa malleissa. Olemme käyttäneet tätä muuttujaa asettamaan background-color painikeelementin ominaisuus käyttämällä var() funktio ja muuttujan nimen välitys. Tämä käyttää muuttujan arvoa painikkeen taustavärinä.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Useita taustoja: CSS3:n avulla voit määrittää elementille useita taustakuvia ja hallita sen sijoittelua ja pinoamisjärjestystä. Tausta koostuu kahdesta kuvasta, red.png ja blue.png, jotka ladataan käyttämällä background-image omaisuutta. Ensimmäinen kuva, red.png, on sijoitettu elementin oikeaan alakulmaan, kun taas toinen kuva, blue.png, on sijoitettu elementin vasempaan yläkulmaan. The background-position ominaisuutta käytetään ohjaamaan kunkin kuvan sijaintia. The background-repeat ominaisuutta käytetään hallitsemaan kuvien toistamista. Ensimmäinen kuva, red.png, on asetettu olemaan toistamatta (no-repeat), kun taas toinen kuva, blue.png, on asetettu toistamaan (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;
    }

    Tulos

    Douglas Karr

    Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

    Aiheeseen liittyvät artikkelit

    Takaisin alkuun -painiketta
    lähellä

    Adblock havaittu

    Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.