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žíva display: flex aby ste povolili režim rozloženia flexboxu. The justify-content vlastnosť je nastavená na center na horizontálne vycentrovanie podriadeného prvku v kontajneri. The align-items vlastnosť je nastavená na center 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žíva display: grid aby ste povolili režim rozloženia mriežky. The grid-template-columns vlastnosť je nastavená na repeat(2, 1fr) vytvorte dva stĺpce rovnakej šírky. The gap 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. The transition vlastnosť je nastavená na background-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!
  • 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. The animation-fill-mode vlastnosť je nastavená na forwards 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!
  • 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 nastavenie background-color vlastnosť prvku tlačidla pomocou var() 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 a blue.png, ktoré sa načítavajú pomocou background-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. The background-position vlastnosť sa používa na ovládanie umiestnenia každého obrázka. The background-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;
    }

    Výsledok

    Douglas Karr

    Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

    súvisiace články

    Tlačidlo späť nahor
    Zavrieť

    Zistený blok reklám

    Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.