Přejít k obsahu | Přejít k hlavnímu menu | Přejít k vyhledávání

02.16 Boxy – Otáčivé

Zdrojové CSS:
/src/css/molecules/box/_rotate.scss

Defaultní

Výchozí molekula pro otáčivý box. Slouží hlavně pro vypsání do obecného rozcestníku.

S pozadím na přední straně obsahu

Modifikace výchozí molekuly pro otáčivý box. Pro aktivaci této verze přidáváme modifikační třídu .box-rotate--front-bg a do kódu přidáváme také adresu daného pozadí. Fotka se vkládá jako bg-image.

S pozadím na zadní obsahu

Modifikace výchozí molekuly pro otáčivý box. Pro aktivaci této verze přidáváme modifikační třídu .box-rotate--back-bg a do kódu přidáváme také adresu daného pozadí. Fotka se vkládá jako bg-image.

S pozadím na obou stranách a zároveň overlay

Modifikace výchozí molekuly pro otáčivý box. Pro aktivaci této verze přidáváme modifikační třídu .box-rotate--back-bg a .box-rotate--front-bg a do kódu přidáváme také adresu daného pozadí. Fotka se vkládá jako bg-image.

Pro přídání overlaye přidáváme na obal modifikační classy. Pro přední overlay .box-rotate--front-overlay. Pro zadní overlay .box-rotate--back-overlay.

S tmavým písmem

Pro přídání tmavého písma přidáváme na obal modifikační classy. Pro přední tmavé písmo .box-rotate--front-text. Pro zadní tmavé písmo .box-rotate--back-text.

Ukázka s ikonkou

Modifikace výchozí molekuly pro otáčivý box.