Content Marketing
Funkcie CSS3, o ktorých ste možno nevedeli: Flexbox, rozloženia mriežky, vlastné vlastnosti, prechody, animácie a viaceré pozadia
kaskádové štýly (CSS) sa naďalej vyvíja a najnovšie verzie môžu mať niektoré funkcie, o ktorých si možno ani neuvedomujete. Tu sú niektoré z hlavných vylepšení a metodík zavedených s CSS3 spolu s príkladmi kódu:
- Flexibilné rozloženie boxu (Flexbox): režim rozloženia, ktorý vám umožňuje vytvárať flexibilné a citlivé rozloženia webových stránok. Pomocou flexboxu môžete jednoducho zarovnať a rozmiestniť prvky v kontajneri. v tomto príklade,
.container
trieda používadisplay: flex
aby ste povolili režim rozloženia flexboxu. Thejustify-content
vlastnosť je nastavená nacenter
na horizontálne vycentrovanie podriadeného prvku v kontajneri. Thealign-items
vlastnosť je nastavená nacenter
na vertikálne vycentrovanie podriadeného prvku. The.item
class nastaví farbu pozadia a výplň pre podradený prvok.
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;
}
Výsledok
Vycentrovaný prvok
- Rozloženie mriežky: ďalší režim rozloženia, ktorý vám umožňuje vytvárať zložité rozloženia webových stránok založené na mriežke. Pomocou mriežky môžete určiť riadky a stĺpce a potom umiestniť prvky do konkrétnych buniek mriežky. V tomto príklade
.grid-container
trieda používadisplay: grid
aby ste povolili režim rozloženia mriežky. Thegrid-template-columns
vlastnosť je nastavená narepeat(2, 1fr)
vytvorte dva stĺpce rovnakej šírky. Thegap
vlastnosť nastavuje medzery medzi bunkami mriežky. The.grid-item
class nastavuje farbu pozadia a výplň pre položky mriežky.
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;
}
Výsledok
Položka 1
Položka 2
Položka 3
Položka 4
- Prechody: CSS3 zaviedlo množstvo nových vlastností a techník na vytváranie prechodov na webových stránkach. Napríklad,
transition
vlastnosť možno použiť na animáciu zmien vlastností CSS v priebehu času. V tomto príklade.box
class nastavuje šírku, výšku a počiatočnú farbu pozadia pre prvok. Thetransition
vlastnosť je nastavená nabackground-color 0.5s ease
animovať zmeny vlastnosti farby pozadia počas pol sekundy pomocou funkcie časovania nábehu. The.box:hover
class zmení farbu pozadia prvku, keď je nad ním ukazovateľ myši, čím sa spustí animácia prechodu.
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;
}
Výsledok
Vznášať sa
Tu!
Tu!
- animácie: CSS3 predstavilo množstvo nových vlastností a techník na vytváranie animácií na webových stránkach. V tomto príklade sme pridali animáciu pomocou
animation
nehnuteľnosť. Definovali sme a@keyframes
pravidlo pre animáciu, ktoré určuje, že rámček by sa mal otáčať od 0 stupňov do 90 stupňov počas 0.5 sekundy. Keď umiestnite kurzor myši nad škatuľu,spin
na otočenie rámčeka sa použije animácia. Theanimation-fill-mode
vlastnosť je nastavená naforwards
aby sa zabezpečilo, že konečný stav animácie zostane zachovaný aj po jej dokončení.
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;
}
Výsledok
Vznášať sa
Tu!
Tu!
- Vlastné vlastnosti CSS: Taktiež známy ako CSS premenné, boli v CSS3 zavedené vlastné vlastnosti. Umožňujú vám definovať a používať svoje vlastné vlastnosti v CSS, ktoré možno použiť na ukladanie a opätovné použitie hodnôt vo vašich šablónach so štýlmi. CSS premenné sú identifikované názvom, ktorý začína dvoma pomlčkami, ako napr
--my-variable
. V tomto príklade definujeme premennú CSS s názvom –primary-color a priradíme jej hodnotu#007bff
, čo je modrá farba bežne používaná ako základná farba v mnohých dizajnoch. Túto premennú sme použili na nastaveniebackground-color
vlastnosť prvku tlačidla pomocouvar()
funkciu a odovzdanie názvu premennej. Toto použije hodnotu premennej ako farbu pozadia pre tlačidlo.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Viaceré pozadia: CSS3 vám umožňuje špecifikovať viacero obrázkov pozadia pre prvok s možnosťou ovládať jeho umiestnenie a poradie ukladania. Pozadie sa skladá z dvoch obrázkov,
red.png
ablue.png
, ktoré sa načítavajú pomocoubackground-image
nehnuteľnosť. Prvý obrázok,red.png
, je umiestnený v pravom dolnom rohu prvku, zatiaľ čo druhý obrázok,blue.png
, sa nachádza v ľavom hornom rohu prvku. Thebackground-position
vlastnosť sa používa na ovládanie umiestnenia každého obrázka. Thebackground-repeat
vlastnosť sa používa na ovládanie toho, ako sa obrázky opakujú. Prvý obrázok,red.png
, je nastavený tak, aby sa neopakoval (no-repeat
), zatiaľ čo druhý obrázok,blue.png
, je nastavený na opakovanie (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;
}