Sisältö Markkinointi
CSS3-ominaisuudet, joista et ehkä ole tietoinen: Flexbox, ruudukkoasettelut, mukautetut ominaisuudet, siirtymät, animaatiot ja useat taustat
CSS Style Sheets (CSS) kehittyy edelleen, ja uusimmissa versioissa voi olla ominaisuuksia, joista et ehkä ole edes tietoinen. Tässä on joitain tärkeimmistä CSS3:n parannuksista ja menetelmistä sekä koodiesimerkkejä:
- Joustava laatikkoasettelu (Flexbox): asettelutila, jonka avulla voit luoda joustavia ja reagoivia asetteluja verkkosivuille. Flexboxin avulla voit helposti kohdistaa ja jakaa elementtejä säilössä. tässä esimerkissä
.container
luokan käyttöjädisplay: flex
ottaaksesi flexbox-asettelutilan käyttöön. Thejustify-content
ominaisuus on asetettucenter
keskittääksesi lapsielementin vaakasuoraan säiliön sisällä. Thealign-items
ominaisuus on asetettucenter
keskittääksesi lapsielementin pystysuoraan. The.item
luokka määrittää alielementin taustavärin ja täyteyksen.
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;
}
Tulos
Keskitetty elementti
- Ruudukkoasettelu: toinen asettelutila, jonka avulla voit luoda monimutkaisia ruudukkopohjaisia asetteluja verkkosivuille. Ruudukon avulla voit määrittää rivejä ja sarakkeita ja sijoittaa sitten elementtejä ruudukon tiettyihin soluihin. Tässä esimerkissä
.grid-container
luokan käyttöjädisplay: grid
ottaaksesi ruudukon asettelutilan käyttöön. Thegrid-template-columns
ominaisuus on asetetturepeat(2, 1fr)
luodaksesi kaksi yhtä leveää saraketta. Thegap
ominaisuus määrittää ruudukon solujen välisen etäisyyden. The.grid-item
luokka määrittää ruudukon kohteiden taustavärin ja pehmusteen.
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;
}
Tulos
Tuote 1
Tuote 2
Tuote 3
Tuote 4
- siirtymät: CSS3 esitteli useita uusia ominaisuuksia ja tekniikoita siirtymien luomiseen verkkosivuilla. Esimerkiksi,
transition
ominaisuutta voidaan käyttää CSS-ominaisuuksien muutosten animointiin ajan myötä. Tässä esimerkissä.box
luokka määrittää elementin leveyden, korkeuden ja alkuperäisen taustavärin. Thetransition
ominaisuus on asetettubackground-color 0.5s ease
animoida taustavärin muutoksia puolen sekunnin aikana helpon sisään-ulos -ajoitustoiminnon avulla. The.box:hover
luokka muuttaa elementin taustaväriä, kun hiiren osoitin on sen päällä, jolloin siirtymäanimaatio käynnistyy.
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;
}
Tulos
Häilyä
Täällä!
Täällä!
- animaatiot: CSS3 esitteli useita uusia ominaisuuksia ja tekniikoita animaatioiden luomiseen verkkosivuille. Tässä esimerkissä olemme lisänneet animaation käyttämällä
animation
omaisuutta. Olemme määritelleet a@keyframes
animaation sääntö, joka määrittää, että laatikon tulee kääntyä 0 astetta 90 asteeseen 0.5 sekunnin aikana. Kun laatikko viedään sen päälle,spin
animaatiota käytetään laatikon kiertämiseen. Theanimation-fill-mode
ominaisuus on asetettuforwards
varmistaaksesi, että animaation lopullinen tila säilyy sen päättymisen jälkeen.
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;
}
Tulos
Häilyä
Täällä!
Täällä!
- CSS:n mukautetut ominaisuudet: Tunnetaan myös CSS-muuttujat, mukautetut ominaisuudet otettiin käyttöön CSS3:ssa. Niiden avulla voit määrittää ja käyttää omia mukautettuja ominaisuuksiasi CSS:ssä, joita voidaan käyttää arvojen tallentamiseen ja uudelleenkäyttöön tyylitaulukoissasi. CSS-muuttujat tunnistetaan nimellä, joka alkaa kahdella viivalla, kuten
--my-variable
. Tässä esimerkissä määritämme CSS-muuttujan nimeltä -primary-color ja annamme sille arvon#007bff
, joka on sininen väri, jota käytetään yleisesti päävärinä monissa malleissa. Olemme käyttäneet tätä muuttujaa asettamaanbackground-color
painikeelementin ominaisuus käyttämällävar()
funktio ja muuttujan nimen välitys. Tämä käyttää muuttujan arvoa painikkeen taustavärinä.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Useita taustoja: CSS3:n avulla voit määrittää elementille useita taustakuvia ja hallita sen sijoittelua ja pinoamisjärjestystä. Tausta koostuu kahdesta kuvasta,
red.png
jablue.png
, jotka ladataan käyttämälläbackground-image
omaisuutta. Ensimmäinen kuva,red.png
, on sijoitettu elementin oikeaan alakulmaan, kun taas toinen kuva,blue.png
, on sijoitettu elementin vasempaan yläkulmaan. Thebackground-position
ominaisuutta käytetään ohjaamaan kunkin kuvan sijaintia. Thebackground-repeat
ominaisuutta käytetään hallitsemaan kuvien toistamista. Ensimmäinen kuva,red.png
, on asetettu olemaan toistamatta (no-repeat
), kun taas toinen kuva,blue.png
, on asetettu toistamaan (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;
}