Content Marketing
CSS3 funkciók, amelyekről talán nem is tud: Flexbox, rács elrendezések, egyéni tulajdonságok, átmenetek, animációk és többféle háttér
Lépcsőzetes stíluslapok (CSS) folyamatosan fejlődik, és a legújabb verziók tartalmazhatnak olyan funkciókat, amelyekről nem is tud. Íme néhány a CSS3-ban bevezetett főbb fejlesztések és módszerek, valamint kódpéldák:
- Rugalmas doboz elrendezés (Flexbox): elrendezési mód, amely lehetővé teszi a weboldalak rugalmas és rugalmas elrendezésének létrehozását. A flexbox segítségével egyszerűen igazíthatja és oszthatja el az elemeket egy tárolóban. ebben a példában a
.container
osztályú felhasználásokdisplay: flex
a flexbox elrendezési mód engedélyezéséhez. Ajustify-content
tulajdonság be van állítvacenter
hogy a gyermekelemet vízszintesen középre állítsa a tárolón belül. Aalign-items
tulajdonság be van állítvacenter
a gyermekelem függőleges középre állításához. A.item
osztály állítja be a gyermek elem háttérszínét és kitöltését.
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;
}
Eredmény
Középre helyezett elem
- Rácsszerkezet: egy másik elrendezési mód, amely lehetővé teszi összetett rács alapú elrendezések létrehozását a weboldalakhoz. A rács segítségével sorokat és oszlopokat adhat meg, majd elemeket helyezhet el a rács meghatározott celláiban. Ebben a példában a
.grid-container
osztályú felhasználásokdisplay: grid
a rács elrendezési mód engedélyezéséhez. Agrid-template-columns
tulajdonság be van állítvarepeat(2, 1fr)
két egyenlő szélességű oszlop létrehozásához. Agap
tulajdonság beállítja a rácscellák közötti távolságot. A.grid-item
osztály beállítja a rácselemek háttérszínét és kitöltését.
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;
}
Eredmény
Jogcím 1
Jogcím 2
Jogcím 3
Jogcím 4
- Transitions: A CSS3 számos új tulajdonságot és technikát vezetett be az átmenetek létrehozására a weboldalakon. Például a
transition
A tulajdonság felhasználható a CSS-tulajdonságok időbeli változásainak animálására. Ebben a példában a.box
osztály beállítja az elem szélességét, magasságát és kezdeti háttérszínét. Atransition
tulajdonság be van állítvabackground-color 0.5s ease
a háttérszín tulajdonság változásainak animálása fél másodpercen keresztül az egyszerűsítési időzítés funkcióval. A.box:hover
osztály megváltoztatja az elem háttérszínét, amikor az egérmutató felette áll, és elindítja az átmenet animációját.
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;
}
Eredmény
lebeg
Here!
Here!
- animációk: A CSS3 számos új tulajdonságot és technikát vezetett be az animációk weboldalakon történő létrehozásához. Ebben a példában egy animációt adtunk hozzá a
animation
ingatlan. Meghatároztuk a@keyframes
Az animációra vonatkozó szabály, amely meghatározza, hogy a doboznak 0 fokról 90 fokra kell elfordulnia 0.5 másodperc alatt. Amikor a doboz fölé kerül, aspin
animáció kerül alkalmazásra a doboz elforgatásához. Aanimation-fill-mode
tulajdonság be van állítvaforwards
annak biztosítása érdekében, hogy az animáció befejezése után is megmaradjon a végső állapot.
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;
}
Eredmény
lebeg
Here!
Here!
- Egyéni CSS-tulajdonságok: Más néven CSS-változók, egyéni tulajdonságok kerültek bevezetésre a CSS3-ban. Lehetővé teszik saját egyéni tulajdonságainak meghatározását és használatát a CSS-ben, amelyek felhasználhatók értékek tárolására és újrafelhasználására a stíluslapokon. A CSS-változókat két kötőjellel kezdődő név azonosítja, mint pl
--my-variable
. Ebben a példában definiálunk egy –primary-color nevű CSS-változót, és adunk neki egy értéket#007bff
, amely egy kék szín, amelyet számos formatervezésben elsődleges színként használnak. Ezt a változót használtuk abackground-color
egy gombelem tulajdonságát avar()
függvényt és a változó nevének átadását. Ez a változó értékét fogja használni a gomb háttérszíneként.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Több háttér: A CSS3 lehetővé teszi, hogy több háttérképet adjon meg egy elemhez, és szabályozható a pozicionálás és a halmozási sorrend. A háttér két képből áll,
red.png
és ablue.png
, amelyek abackground-image
ingatlan. Az első kép,red.png
, az elem jobb alsó sarkában található, míg a második kép,blue.png
, az elem bal felső sarkában található. Abackground-position
tulajdonság az egyes képek elhelyezésének szabályozására szolgál. Abackground-repeat
tulajdonság a képek ismétlődésének szabályozására szolgál. Az első kép,red.png
, úgy van beállítva, hogy ne ismétlődjön (no-repeat
), míg a második kép,blue.png
, ismétlésre van beállítva (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;
}