Content Marketing
CSS3 funkcijas, kuras jūs, iespējams, nezināt: Flexbox, režģa izkārtojumi, pielāgoti rekvizīti, pārejas, animācijas un vairāki foni
Kaskādes stila lapas (CSS) turpina attīstīties, un jaunākajās versijās var būt dažas funkcijas, par kurām jūs, iespējams, pat nezināt. Šeit ir daži no galvenajiem uzlabojumiem un metodoloģijām, kas ieviesti ar CSS3, kā arī kodu piemēri.
- Elastīgs kastes izkārtojums (Flexbox): izkārtojuma režīms, kas ļauj izveidot elastīgus un atsaucīgus tīmekļa lapu izkārtojumus. Izmantojot flexbox, varat viegli izlīdzināt un sadalīt elementus konteinerā. šajā piemērā
.container
klases lietojumiemdisplay: flex
lai iespējotu flexbox izkārtojuma režīmu. Thejustify-content
rekvizīts ir iestatīts uzcenter
lai horizontāli centrētu pakārtoto elementu konteinerā. Thealign-items
rekvizīts ir iestatīts uzcenter
lai vertikāli centrētu bērna elementu. The.item
klase nosaka bērna elementa fona krāsu un polsterējumu.
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;
}
Rezultāts
Centrēts elements
- Režģa izkārtojums: vēl viens izkārtojuma režīms, kas ļauj izveidot sarežģītus uz režģi balstītus izkārtojumus tīmekļa lapām. Izmantojot režģi, varat norādīt rindas un kolonnas un pēc tam ievietot elementus noteiktās režģa šūnās. Šajā piemērā
.grid-container
klases lietojumiemdisplay: grid
lai iespējotu režģa izkārtojuma režīmu. Thegrid-template-columns
rekvizīts ir iestatīts uzrepeat(2, 1fr)
lai izveidotu divas vienāda platuma kolonnas. Thegap
rekvizīts nosaka atstarpi starp režģa šūnām. The.grid-item
klase iestata fona krāsu un polsterējumu režģa vienumiem.
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;
}
Rezultāts
Postenis 1
Postenis 2
Postenis 3
Postenis 4
- Pārejas: CSS3 ieviesa vairākus jaunus rekvizītus un paņēmienus pāreju izveidei tīmekļa lapās. Piemēram,
transition
īpašumu var izmantot, lai animētu izmaiņas CSS rekvizītos laika gaitā. Šajā piemērā.box
klase iestata elementa platumu, augstumu un sākotnējo fona krāsu. Thetransition
rekvizīts ir iestatīts uzbackground-color 0.5s ease
lai pussekundes laikā animētu fona krāsas īpašību izmaiņas, izmantojot atvieglošanas-izslēgšanas laika funkciju. The.box:hover
klase maina elementa fona krāsu, kad peles rādītājs atrodas virs tā, aktivizējot pārejas animāciju.
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;
}
Rezultāts
Novietot kursoru
Šeit!
Šeit!
- Animācijas: CSS3 ieviesa vairākus jaunus rekvizītus un paņēmienus animāciju izveidei tīmekļa lapās. Šajā piemērā esam pievienojuši animāciju, izmantojot
animation
īpašums. Mēs esam definējuši a@keyframes
animācijas noteikums, kas nosaka, ka lodziņam ir jāpagriežas no 0 grādiem līdz 90 grādiem 0.5 sekunžu laikā. Kad lodziņš tiek novietots virsū,spin
animācija tiek lietota, lai pagrieztu lodziņu. Theanimation-fill-mode
rekvizīts ir iestatīts uzforwards
lai nodrošinātu, ka pēc animācijas pabeigšanas tiek saglabāts pēdējais animācijas stāvoklis.
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;
}
Rezultāts
Novietot kursoru
Šeit!
Šeit!
- CSS pielāgotie rekvizīti: Zināms arī kā CSS mainīgie, CSS3 tika ieviesti pielāgoti rekvizīti. Tie ļauj definēt un izmantot savus pielāgotos rekvizītus CSS, ko var izmantot, lai saglabātu un atkārtoti izmantotu vērtības visās jūsu stila lapās. CSS mainīgie tiek identificēti pēc nosaukuma, kas sākas ar divām defisēm, piemēram,
--my-variable
. Šajā piemērā mēs definējam CSS mainīgo ar nosaukumu –primary-color un piešķiram tam vērtību#007bff
, kas ir zila krāsa, ko parasti izmanto kā primāro krāsu daudzos dizainos. Mēs izmantojām šo mainīgo, lai iestatītubackground-color
pogas elementa īpašība, izmantojotvar()
funkciju un mainīgā nosaukuma nodošanu. Mainīgā vērtība tiks izmantota kā pogas fona krāsa.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Vairāki foni: CSS3 ļauj elementam norādīt vairākus fona attēlus ar iespēju kontrolēt tā pozicionēšanas un sakraušanas secību. Fons sastāv no diviem attēliem,
red.png
unblue.png
, kas tiek ielādēti, izmantojotbackground-image
īpašums. Pirmais attēls,red.png
, atrodas elementa labajā apakšējā stūrī, savukārt otrais attēls,blue.png
, atrodas elementa kreisajā augšējā stūrī. Thebackground-position
Īpašums tiek izmantots, lai kontrolētu katra attēla novietojumu. Thebackground-repeat
rekvizīts tiek izmantots, lai kontrolētu, kā attēli atkārtojas. Pirmais attēls,red.png
, ir iestatīts neatkārtoties (no-repeat
), savukārt otrais attēls,blue.png
, ir iestatīts atkārtot (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;
}