Content marketing

CSS3 značajke kojih možda niste bili svjesni: Flexbox, rasporedi rešetki, prilagođena svojstva, prijelazi, animacije i višestruke pozadine

Kaskadni listovi stilova (CSS) nastavljaju se razvijati i najnovije verzije mogu imati neke značajke kojih možda niste ni svjesni. Evo nekih od glavnih poboljšanja i metodologija uvedenih s CSS3, zajedno s primjerima koda:

  • Fleksibilni raspored okvira (Flexbox): način izgleda koji vam omogućuje stvaranje fleksibilnih i responzivnih izgleda za web stranice. S flexboxom možete jednostavno poravnati i rasporediti elemente unutar spremnika. u ovom primjeru, .container klasa koristi display: flex kako biste omogućili flexbox način izgleda. The justify-content svojstvo je postavljeno na center za horizontalno centriranje podređenog elementa unutar spremnika. The align-items svojstvo je postavljeno na center za vertikalno centriranje podređenog elementa. The .item klasa postavlja boju pozadine i ispunu za podređeni 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;
}

Proizlaziti

Centrirani element
  • Raspored mreže: drugi način izgleda koji vam omogućuje stvaranje složenih rasporeda temeljenih na mreži za web stranice. S mrežom možete odrediti retke i stupce, a zatim postaviti elemente unutar određenih ćelija mreže. U ovom primjeru, .grid-container klasa koristi display: grid kako biste omogućili način rada rešetke. The grid-template-columns svojstvo je postavljeno na repeat(2, 1fr) da biste stvorili dva stupca jednake širine. The gap svojstvo postavlja razmak između ćelija mreže. The .grid-item klasa postavlja boju pozadine i ispunu za stavke 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;
}

Proizlaziti

Artikl 1
Artikl 2
Artikl 3
Artikl 4
  • Prijelazi: CSS3 je uveo niz novih svojstava i tehnika za stvaranje prijelaza na web stranicama. Na primjer, transition Svojstvo se može koristiti za animiranje promjena u CSS svojstvima tijekom vremena. U ovom primjeru, .box klasa postavlja širinu, visinu i početnu boju pozadine za element. The transition svojstvo je postavljeno na background-color 0.5s ease za animiranje promjena svojstava boje pozadine tijekom pola sekunde s funkcijom laganog ulaska u izlaz. The .box:hover klasa mijenja boju pozadine elementa kada je pokazivač miša iznad njega, aktivirajući animaciju prijelaza.

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

Proizlaziti

Lebdjeti
Ovdje!
  • Animacije: CSS3 je uveo niz novih svojstava i tehnika za stvaranje animacija na web stranicama. U ovom smo primjeru dodali animaciju pomoću animation vlasništvo. Definirali smo a @keyframes pravilo za animaciju, koje određuje da se okvir treba okretati od 0 stupnjeva do 90 stupnjeva u trajanju od 0.5 sekundi. Kada se okvir zadrži iznad, spin animacija se primjenjuje za rotiranje okvira. The animation-fill-mode svojstvo je postavljeno na forwards kako bi se osiguralo da se konačno stanje animacije zadrži nakon što završi.

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

Proizlaziti

Lebdjeti
Ovdje!
  • CSS prilagođena svojstva: Također poznat kao CSS varijable, prilagođena svojstva uvedena su u CSS3. Omogućuju vam definiranje i korištenje vlastitih prilagođenih svojstava u CSS-u, koja se mogu koristiti za pohranjivanje i ponovnu upotrebu vrijednosti u vašim listovima stilova. CSS varijable identificiraju se imenom koje počinje s dvije crtice, kao npr
    --my-variable. U ovom primjeru definiramo CSS varijablu pod nazivom –primary-color i dajemo joj vrijednost #007bff, što je plava boja koja se obično koristi kao primarna boja u mnogim dizajnima. Koristili smo ovu varijablu za postavljanje background-color svojstvo elementa gumba, korištenjem var() funkciju i prosljeđivanje imena varijable. Ovo će koristiti vrijednost varijable kao boju pozadine za gumb.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Više pozadina: CSS3 vam omogućuje da odredite više pozadinskih slika za element, uz mogućnost kontrole njegovog pozicioniranja i redoslijeda slaganja. Pozadina se sastoji od dvije slike, red.png i blue.png, koji se učitavaju pomoću background-image vlasništvo. Prva slika, red.png, nalazi se u desnom donjem kutu elementa, dok je druga slika, blue.png, nalazi se u gornjem lijevom kutu elementa. The background-position Svojstvo se koristi za kontrolu pozicioniranja svake slike. The background-repeat Svojstvo se koristi za kontrolu ponavljanja slika. Prva slika, red.png, postavljeno je da se ne ponavlja (no-repeat), dok druga slika, blue.png, postavljeno je 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;
    }

    Proizlaziti

    Douglas Karr

    Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

    Vezani članci

    Natrag na vrh
    Blizu

    Otkriven je Adblock

    Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.