VÝUKA.CSS

Box model

Box model je základní koncept v CSS, který popisuje, jak jsou prvky na webové stránce vykresleny a jak mezi sebou interagují.

Každý HTML prvek je považován za obdélník, který se skládá z několika vrstev...


Zobrazit více Ukázat kód

Stíny

Stíny v CSS umožňují přidávat vizuální efekty stínu k prvkům na webové stránce.

Existují dvě hlavní vlastnosti pro přidávání stínů..


Zobrazit více Ukázat kód

Position

V CSS vlastnost position určuje, jak je prvek umístěn na webové stránce a jak interaguje s ostatními prvky. Tato vlastnost může nabývat několika hodnot, které určují různé způsoby umístění prvku...


  1. position: static;
    • Toto je výchozí hodnota pro všechny prvky.
    • Prvky jsou umístěny podle normálního toku dokumentu.
    • Hodnoty top, right, bottom a left nemají žádný efekt.
  2. position: relative;
    • Prvek je umístěn podle normálního toku dokumentu, ale lze ho posunout pomocí hodnot top, right, bottom a left.
    • Při použití relativního pozicování zůstane prvek v normálním toku dokumentu, ale bude vizuálně posunutý.
  3. position: absolute;
    • Prvek je vyjmut z normálního toku dokumentu a je umístěn relativně k nejbližšímu předkovi s ne-statickou pozicí (např. relative, absolute, fixed).
    • Pokud takový předek neexistuje, je umístěn relativně k prvku.
  4. position: fixed;
    • Prvek je vyjmut z normálního toku dokumentu a je umístěn relativně k viewportu (viditelná část okna prohlížeče).
    • I když uživatel posouvá stránku, prvek zůstane na stejném místě.
  5. position: sticky;
    • Prvek se chová jako relativní do té doby, než dosáhne určité pozice v viewportu (dané hodnotami top, right, bottom, left), kde se začne chovat jako fixní.
    • Je často používaný pro vytváření efektu "lepení" prvku při posouvání stránky.

Zpět 
css
Static Position
Relative Position
Relative Position
Absolute Position
Fixed Position
Sticky Position
            .static {
                position: static;
                background-color: lightblue;
            }
            .relative {
                position: relative;
                top: 20px;
                left: 30px;
                background-color: lightgreen;
            }
            .absolute {
                position: absolute;
                top: 50px;
                left: 50px;
                background-color: lightcoral;
            }
            .fixed {
                position: fixed;
                bottom: 300px;
                right: 240px;
                background-color: lightgoldenrodyellow;
            }
            .sticky {
                position: sticky;
                top: 500px;
                background-color: lightpink;
            }

Display : flex

V CSS vlastnost display: flex aktivuje flexbox model, což je způsob uspořádání a zarovnání prvků v kontejneru.

Flexbox je ideální pro vytváření dynamických rozvržení, které se přizpůsobují velikosti obrazovky a různým zařízením.


Zobrazit více Ukázat kód

Float

V CSS vlastnost float umožňuje umístění prvku na jednu stranu kontejneru, což umožňuje textu a dalším prvkům obtékat kolem něj.

Tato vlastnost byla hojně používaná v dřívějších verzích CSS pro tvorbu layoutů, než byla představena moderní metoda flexbox a grid.


Zobrazit více Ukázat kód