Turinio Rinkodara
CSS3 funkcijos, kurių galbūt nežinote: „Flexbox“, tinklelio išdėstymai, tinkintos ypatybės, perėjimai, animacijos ir keli fonai
Kaskadiniai stiliaus lapai (CSS) toliau tobulėja, o naujausiose versijose gali būti kai kurių funkcijų, apie kurias galbūt net nežinote. Štai keletas pagrindinių patobulinimų ir metodų, įdiegtų naudojant CSS3, kartu su kodų pavyzdžiais:
- Lankstus dėžutės išdėstymas („Flexbox“): maketavimo režimas, leidžiantis kurti lanksčius ir reaguojančius tinklalapių maketus. Naudodami „flexbox“ galite lengvai sulygiuoti ir paskirstyti elementus konteineryje. šiame pavyzdyje
.container
klasės naudojimasdisplay: flex
kad įjungtumėte „flexbox“ išdėstymo režimą. Thejustify-content
nuosavybė nustatytacenter
horizontaliai centruoti antrinį elementą konteineryje. Thealign-items
nuosavybė nustatytacenter
kad vertikaliai centruotų antrinį elementą. The.item
klasė nustato antrinio elemento fono spalvą ir užpildymą.
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;
}
Pasekmė
Centruotas elementas
- Tinklelio išdėstymas: kitas išdėstymo režimas, leidžiantis kurti sudėtingus tinklelio tinklalapių maketus. Naudodami tinklelį galite nurodyti eilutes ir stulpelius, o tada įdėti elementus į tam tikrus tinklelio langelius. Šiame pavyzdyje
.grid-container
klasės naudojimasdisplay: grid
kad įjungtumėte tinklelio išdėstymo režimą. Thegrid-template-columns
nuosavybė nustatytarepeat(2, 1fr)
sukurti du vienodo pločio stulpelius. Thegap
ypatybė nustato tarpus tarp tinklelio langelių. The.grid-item
klasė nustato tinklelio elementų fono spalvą ir užpildymą.
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;
}
Pasekmė
Prekių 1
Prekių 2
Prekių 3
Prekių 4
- Perėjimai: CSS3 pristatė daugybę naujų ypatybių ir metodų, skirtų tinklalapių perėjimams kurti. Pavyzdžiui,
transition
ypatybę galima naudoti norint suaktyvinti CSS savybių pokyčius laikui bėgant. Šiame pavyzdyje.box
klasė nustato elemento plotį, aukštį ir pradinę fono spalvą. Thetransition
nuosavybė nustatytabackground-color 0.5s ease
suaktyvinti fono spalvos ypatybių pokyčius per pusę sekundės naudojant supaprastinto įėjimo laiko nustatymo funkciją. The.box:hover
klasė keičia elemento fono spalvą, kai pelės žymeklis yra virš jo, suaktyvindama perėjimo animaciją.
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;
}
Pasekmė
Užveskite pelę
Čia!
Čia!
- Animacijos: CSS3 pristatė daugybę naujų ypatybių ir metodų kuriant animacijas tinklalapiuose. Šiame pavyzdyje pridėjome animaciją naudodami
animation
nuosavybė. Mes apibrėžėme a@keyframes
animacijos taisyklė, nurodanti, kad langelis turi pasisukti nuo 0 laipsnių iki 90 laipsnių per 0.5 sekundės. Užvedus žymeklį ant dėžutės,spin
animacija taikoma dėžei pasukti. Theanimation-fill-mode
nuosavybė nustatytaforwards
užtikrinti, kad pasibaigus animacijai būtų išsaugota galutinė būsena.
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;
}
Pasekmė
Užveskite pelę
Čia!
Čia!
- CSS tinkintos ypatybės: Taip pat žinomas kaip CSS kintamieji, tinkintos ypatybės buvo pristatytos CSS3. Jie leidžia apibrėžti ir naudoti savo pasirinktines ypatybes CSS, kurias galima naudoti vertėms saugoti ir pakartotinai naudoti stiliaus lapuose. CSS kintamieji identifikuojami pavadinimu, kuris prasideda dviem brūkšneliais, pvz
--my-variable
. Šiame pavyzdyje apibrėžiame CSS kintamąjį, vadinamą –primary-color, ir suteikiame jam reikšmę#007bff
, kuri yra mėlyna spalva, dažniausiai naudojama kaip pagrindinė daugelio dizainų spalva. Naudojome šį kintamąjį norėdami nustatytibackground-color
mygtuko elemento savybė, naudojantvar()
funkcija ir kintamojo pavadinimo perdavimas. Kintamojo reikšmė bus naudojama kaip mygtuko fono spalva.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Keli fonai: CSS3 leidžia nurodyti kelis elemento fono vaizdus, su galimybe valdyti jo padėties ir sudėjimo tvarką. Fonas sudarytas iš dviejų vaizdų,
red.png
irblue.png
, kurie įkeliami naudojantbackground-image
nuosavybė. Pirmas vaizdas,red.png
, yra dešiniajame apatiniame elemento kampe, o antrasis vaizdas,blue.png
, yra kairiajame viršutiniame elemento kampe. Thebackground-position
ypatybė naudojama kiekvieno vaizdo padėties valdymui. Thebackground-repeat
ypatybė naudojama norint valdyti, kaip vaizdai kartojasi. Pirmas vaizdas,red.png
, nustatyta taip, kad nesikartotų (no-repeat
), o antrasis vaizdas,blue.png
, nustatytas kartoti (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;
}