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. The justify-content vlastnost je nastavena na center k vodorovnému vystředění podřízeného prvku v kontejneru. The align-items vlastnost je nastavena na center 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. The grid-template-columns vlastnost je nastavena na repeat(2, 1fr) vytvořit dva sloupce stejné šířky. The gap 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. The transition vlastnost je nastavena na background-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!
  • 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. The animation-fill-mode vlastnost je nastavena na forwards 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!
  • 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 a blue.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. The background-position vlastnost se používá k ovládání umístění každého obrázku. The background-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;
    }

    Výsledek

    Douglas Karr

    Douglas Karr je CMO OpenINSIGHTS a zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

    Související články

    Tlačítko Nahoru
    zavřít

    Byl detekován Adblock

    Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.