sadržaj Marketing

CSS3 karakteristike kojih možda niste svjesni: Flexbox, rasporedi mreže, prilagođena svojstva, prijelazi, animacije i više pozadina

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

  • Fleksibilni raspored kutije (Flexbox): način izgleda koji vam omogućava da kreirate fleksibilne i prilagodljive izglede za web stranice. Sa flexboxom možete lako poravnati i distribuirati elemente unutar kontejnera. u ovom primjeru, .container klase koristi display: flex da biste omogućili način rada flexboxa. The justify-content svojstvo je postavljeno na center da horizontalno centrirate podređeni element unutar kontejnera. The align-items svojstvo je postavljeno na center da vertikalno centrirate podređeni element. The .item class postavlja boju pozadine i padding 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;
}

rezultat

Centrirani element
  • Raspored mreže: drugi način izgleda koji vam omogućava da kreirate složene rasporede zasnovane na mreži za web stranice. Pomoću mreže možete odrediti redove i stupce, a zatim postaviti elemente unutar određenih ćelija mreže. U ovom primjeru, the .grid-container klase koristi display: grid da omogućite način rada mreže. The grid-template-columns svojstvo je postavljeno na repeat(2, 1fr) da kreirate dve kolone jednake širine. The gap svojstvo postavlja razmak između ćelija mreže. The .grid-item class postavlja boju pozadine i padding 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;
}

rezultat

stavka 1
stavka 2
stavka 3
stavka 4
  • Prijelazi: CSS3 je uveo niz novih svojstava i tehnika za kreiranje prijelaza na web stranicama. Na primjer, the transition svojstvo se može koristiti za animiranje promjena u CSS svojstvima tokom vremena. U ovom primjeru, .box class postavlja širinu, visinu i početnu boju pozadine za element. The transition svojstvo je postavljeno na background-color 0.5s ease da animirate promjene svojstva boje pozadine u trajanju od pola sekunde pomoću funkcije za jednostavno određivanje vremena. The .box:hover klasa mijenja boju pozadine elementa kada je pokazivač miša iznad njega, pokrećuć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;
}

rezultat

kolebati se
Evo!
  • animacije: CSS3 je uveo niz novih svojstava i tehnika za kreiranje animacija na web stranicama. U ovom primjeru, dodali smo animaciju koristeći animation imovine. Definisali smo a @keyframes pravilo za animaciju, koje navodi da se okvir treba rotirati od 0 do 90 stepeni u trajanju od 0.5 sekundi. Kada se okvir pređe preko, spin animacija se primjenjuje za rotiranje kutije. 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;
}

rezultat

kolebati se
Evo!
  • CSS prilagođena svojstva: Poznat i kao CSS varijable, prilagođena svojstva su uvedena u CSS3. Oni vam omogućavaju da definirate i koristite vlastita prilagođena svojstva u CSS-u, koja se mogu koristiti za pohranjivanje i ponovnu upotrebu vrijednosti u vašim stilovima. CSS varijable se identificiraju imenom koje počinje s dvije crtice, kao što je
    --my-variable. U ovom primjeru definiramo CSS varijablu pod nazivom –primary-color i dajemo joj vrijednost #007bff, koja je plava boja koja se obično koristi kao primarna boja u mnogim dizajnima. Koristili smo ovu varijablu za postavljanje background-color svojstvo elementa dugmeta, korišćenjem var() funkciju i prosljeđivanje imena varijable. Ovo će koristiti vrijednost varijable kao boju pozadine za dugme.
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • Više pozadina: CSS3 vam omogućava da navedete više pozadinskih slika za element, sa mogućnošću kontrole njegovog pozicioniranja i redosleda slaganja. Pozadina se sastoji od dvije slike, red.png i blue.png, koji se učitavaju pomoću background-image imovine. prva slika, red.png, nalazi se u desnom donjem uglu elementa, dok je druga slika, blue.png, nalazi se u lijevom gornjem uglu elementa. The background-position svojstvo se koristi za kontrolu pozicioniranja svake slike. The background-repeat svojstvo se koristi za kontrolu kako se slike ponavljaju. prva slika, red.png, postavljeno je da se ne ponavlja (no-repeat), dok druga slika, blue.png, je postavljeno 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 OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

    Vezani članci

    Nazad na vrh dugmeta
    blizu

    Adblock otkriven

    Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.