Content Marketing
Funkce CSS3, o kterých možná nevíte: Flexbox, rozvržení mřížky, uživatelské vlastnosti, přechody, animace a více pozadí
Kaskádové styly (CSS) se neustále vyvíjí a nejnovější verze mohou mít některé funkce, o kterých možná ani nevíte. Zde jsou některá z hlavních vylepšení a metodik zavedených s CSS3 spolu s příklady kódu:
- Flexibilní rozvržení krabice (Flexbox): režim rozvržení, který umožňuje vytvářet flexibilní a citlivá rozvržení webových stránek. Pomocí flexboxu můžete snadno zarovnat a rozmístit prvky v kontejneru. v tomto příkladu,
.container
třída používádisplay: flex
pro aktivaci režimu rozložení flexboxu. Thejustify-content
vlastnost je nastavena nacenter
k vodorovnému vystředění podřízeného prvku v kontejneru. Thealign-items
vlastnost je nastavena nacenter
svisle vycentrovat podřízený prvek. The.item
class nastaví barvu pozadí a odsazení pro podřízený prvek.
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ýsledek
Středový prvek
- Rozvržení mřížky: další režim rozvržení, který umožňuje vytvářet složitá rozvržení webových stránek založená na mřížce. Pomocí mřížky můžete určit řádky a sloupce a poté umístit prvky do konkrétních buněk mřížky. V tomto příkladu je
.grid-container
třída používádisplay: grid
pro povolení režimu rozložení mřížky. Thegrid-template-columns
vlastnost je nastavena narepeat(2, 1fr)
vytvořit dva sloupce stejné šířky. Thegap
vlastnost nastavuje mezery mezi buňkami mřížky. The.grid-item
class nastavuje barvu pozadí a odsazení pro položky mříž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ýsledek
Položka 1
Položka 2
Položka 3
Položka 4
- Přechody: CSS3 představilo řadu nových vlastností a technik pro vytváření přechodů na webových stránkách. Například,
transition
vlastnost lze použít k animaci změn vlastností CSS v průběhu času. V tomto příkladu je.box
class nastavuje šířku, výšku a počáteční barvu pozadí prvku. Thetransition
vlastnost je nastavena nabackground-color 0.5s ease
animovat změny vlastnosti barvy pozadí během půl sekundy pomocí funkce časování náběhu a výstupu. The.box:hover
class změní barvu pozadí prvku, když je nad ním ukazatel myši, a spustí animaci přechodu.
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ýsledek
Vznášet se
Tady!
Tady!
- animace: CSS3 představilo řadu nových vlastností a technik pro tvorbu animací na webových stránkách. V tomto příkladu jsme přidali animaci pomocí
animation
vlastnictví. Definovali jsme a@keyframes
pravidlo pro animaci, které určuje, že se rámeček má otočit od 0 stupňů do 90 stupňů po dobu 0.5 sekundy. Když na krabici umístíte ukazatel myši,spin
animace se použije k otočení rámečku. Theanimation-fill-mode
vlastnost je nastavena naforwards
abyste zajistili, že konečný stav animace zůstane zachován i po jejím skonč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ýsledek
Vznášet se
Tady!
Tady!
- Vlastní vlastnosti CSS: Také známý jako CSS proměnné, uživatelské vlastnosti byly zavedeny v CSS3. Umožňují vám definovat a používat vlastní uživatelské vlastnosti v CSS, které lze použít k ukládání a opětovnému použití hodnot ve vašich šablonách stylů. CSS proměnné jsou identifikovány názvem, který začíná dvěma pomlčkami, jako např
--my-variable
. V tomto příkladu definujeme proměnnou CSS nazvanou –primary-color a přiřadíme jí hodnotu#007bff
, což je modrá barva běžně používaná jako primární barva v mnoha provedeních. Tuto proměnnou jsme použili k nastaveníbackground-color
vlastnost prvku tlačítka pomocívar()
funkce a předání názvu proměnné. Tím se použije hodnota proměnné jako barva pozadí tlačítka.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Více pozadí: CSS3 vám umožňuje určit více obrázků na pozadí pro prvek s možností ovládat jeho umístění a pořadí překrývání. Pozadí se skládá ze dvou obrázků,
red.png
ablue.png
, které se načítají pomocíbackground-image
vlastnictví. První obrázek,red.png
, je umístěn v pravém dolním rohu prvku, zatímco druhý obrázek,blue.png
, je umístěn v levém horním rohu prvku. Thebackground-position
vlastnost se používá k ovládání umístění každého obrázku. Thebackground-repeat
vlastnost se používá k ovládání opakování obrázků. První obrázek,red.png
, je nastaveno tak, aby se neopakovalo (no-repeat
), zatímco druhý obrázek,blue.png
, je nastaveno na opakování (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;
}