Content Marketing
Funkcije CSS3, ki jih morda ne poznate: Flexbox, postavitve mreže, lastnosti po meri, prehodi, animacije in več ozadij
Kaskadni slogovni listi (CSS) se še naprej razvijajo in najnovejše različice imajo morda nekatere funkcije, ki se jih morda niti ne zavedate. Tukaj je nekaj glavnih izboljšav in metodologij, uvedenih s CSS3, skupaj s primeri kode:
- Prilagodljiva postavitev škatle (Flexbox): način postavitve, ki omogoča ustvarjanje prilagodljivih in odzivnih postavitev za spletne strani. S flexboxom lahko preprosto poravnate in porazdelite elemente znotraj vsebnika. v tem primeru,
.container
razredne uporabedisplay: flex
da omogočite način postavitve flexbox. Thejustify-content
lastnost je nastavljena nacenter
za vodoravno središče podrejenega elementa znotraj vsebnika. Thealign-items
lastnost je nastavljena nacenter
za navpično središče podrejenega elementa. The.item
razred nastavi barvo ozadja in oblazinjenje za podrejeni 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
Sredinski element
- Postavitev mreže: drug način postavitve, ki vam omogoča ustvarjanje kompleksnih mrežnih postavitev za spletne strani. Z mrežo lahko določite vrstice in stolpce ter nato postavite elemente v določene celice mreže. V tem primeru je
.grid-container
razredne uporabedisplay: grid
da omogočite način postavitve mreže. Thegrid-template-columns
lastnost je nastavljena narepeat(2, 1fr)
ustvarite dva stolpca enake širine. Thegap
lastnost nastavi razmik med celicami mreže. The.grid-item
razred nastavi barvo ozadja in oblazinjenje za elemente 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
Točka 1
Točka 2
Točka 3
Točka 4
- Prehodi: CSS3 je uvedel številne nove lastnosti in tehnike za ustvarjanje prehodov na spletnih straneh. Na primer,
transition
lahko uporabite za animiranje sprememb v lastnostih CSS skozi čas. V tem primeru je.box
nastavi širino, višino in začetno barvo ozadja za element. Thetransition
lastnost je nastavljena nabackground-color 0.5s ease
za animiranje sprememb lastnosti barve ozadja v pol sekunde s funkcijo poenostavljenega merjenja časa. The.box:hover
razred spremeni barvo ozadja elementa, ko je miškin kazalec nad njim, kar sproži animacijo prehoda.
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
hover
Tukaj!
Tukaj!
- animacije: CSS3 je uvedel številne nove lastnosti in tehnike za ustvarjanje animacij na spletnih straneh. V tem primeru smo dodali animacijo z uporabo
animation
premoženje. Določili smo a@keyframes
pravilo za animacijo, ki določa, da se polje zavrti od 0 stopinj do 90 stopinj v trajanju 0.5 sekunde. Ko miškin kazalec premaknete nad polje, sespin
animacija se uporabi za vrtenje polja. Theanimation-fill-mode
lastnost je nastavljena naforwards
da zagotovite, da se končno stanje animacije ohrani po koncu.
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
hover
Tukaj!
Tukaj!
- Lastnosti po meri CSS: Poznan tudi kot spremenljivke CSS, so bile lastnosti po meri uvedene v CSS3. Omogočajo vam definiranje in uporabo lastnih lastnosti po meri v CSS, ki jih je mogoče uporabiti za shranjevanje in ponovno uporabo vrednosti v vaših slogovnih listih. Spremenljivke CSS prepoznamo po imenu, ki se začne z dvema pomišljajima, kot npr
--my-variable
. V tem primeru definiramo spremenljivko CSS, imenovano –primary-color, in ji damo vrednost#007bff
, ki je modra barva, ki se običajno uporablja kot primarna barva v številnih dizajnih. To spremenljivko smo uporabili za nastavitevbackground-color
lastnost elementa gumba z uporabovar()
funkcijo in posredovanje imena spremenljivke. To bo uporabilo vrednost spremenljivke kot barvo ozadja za gumb.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Več ozadij: CSS3 vam omogoča, da določite več slik ozadja za element, z možnostjo nadzora njegovega položaja in vrstnega reda zlaganja. Ozadje je sestavljeno iz dveh slik,
red.png
inblue.png
, ki se naložijo z uporabobackground-image
premoženje. Prva slika,red.png
, se nahaja v spodnjem desnem kotu elementa, druga slika,blue.png
, se nahaja v zgornjem levem kotu elementa. Thebackground-position
Lastnost se uporablja za nadzor pozicioniranja vsake slike. Thebackground-repeat
Lastnost se uporablja za nadzor ponavljanja slik. Prva slika,red.png
, je nastavljen tako, da se ne ponavlja (no-repeat
), medtem ko druga slika,blue.png
, je nastavljen 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;
}