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 koristidisplay: flex
kako biste omogućili flexbox način izgleda. Thejustify-content
svojstvo je postavljeno nacenter
za horizontalno centriranje podređenog elementa unutar spremnika. Thealign-items
svojstvo je postavljeno nacenter
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 koristidisplay: grid
kako biste omogućili način rada rešetke. Thegrid-template-columns
svojstvo je postavljeno narepeat(2, 1fr)
da biste stvorili dva stupca jednake širine. Thegap
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. Thetransition
svojstvo je postavljeno nabackground-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!
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. 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;
}
Proizlaziti
Lebdjeti
Ovdje!
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 postavljanjebackground-color
svojstvo elementa gumba, korištenjemvar()
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
iblue.png
, koji se učitavaju pomoćubackground-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. Thebackground-position
Svojstvo se koristi za kontrolu pozicioniranja svake slike. Thebackground-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;
}