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ů..

  1. Box Shadow (Stín prvku) box-shadow: offset-x offset-y blur-radius spread-radius color;
    • offset-x: Horizontální posun stínu. Kladná hodnota posune stín doprava, záporná doleva.
    • offset-y: Vertikální posun stínu. Kladná hodnota posune stín dolů, záporná nahoru.
    • blur-radius: Poloměr rozostření stínu. Čím větší hodnota, tím více bude stín rozostřený (volitelné).
    • spread-radius: Poloměr rozšíření stínu. Kladná hodnota rozšíří stín, záporná zúží (volitelné).
    • color: Barva stínu (volitelné).
  2. Text Shadow (Stín textu) text-shadow: offset-x offset-y blur-radius color;
    • offset-x: Horizontální posun stínu. Kladná hodnota posune stín doprava, záporná doleva.
    • offset-y: Vertikální posun stínu. Kladná hodnota posune stín dolů, záporná nahoru.
    • blur-radius: Poloměr rozostření stínu (volitelné).
    • color: Barva stínu.
Zpět 
css

Text shadow

        div {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            box-shadow: 10px 10px 5px 0px rgba(0, 0, 0,0.75 );
        }
        
        h1 {
            color: blue;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

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...


Zobrazit více Ukázat kód

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