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 koristidisplay: flex
da biste omogućili način rada flexboxa. Thejustify-content
svojstvo je postavljeno nacenter
da horizontalno centrirate podređeni element unutar kontejnera. Thealign-items
svojstvo je postavljeno nacenter
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 koristidisplay: grid
da omogućite način rada mreže. Thegrid-template-columns
svojstvo je postavljeno narepeat(2, 1fr)
da kreirate dve kolone jednake širine. Thegap
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. Thetransition
svojstvo je postavljeno nabackground-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!
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. Theanimation-fill-mode
svojstvo je postavljeno naforwards
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!
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 postavljanjebackground-color
svojstvo elementa dugmeta, korišćenjemvar()
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
iblue.png
, koji se učitavaju pomoćubackground-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. Thebackground-position
svojstvo se koristi za kontrolu pozicioniranja svake slike. Thebackground-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;
}