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


Zobrazit více 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