Moderní tvorba webových aplikací

O webu

CSS vlastnosti

CSS backdrop-filter

Vlastnost backdrop-filter dokáže uplatnit filtr pro pozadí elementu.

3 minuty

Jak funguje CSS position: sticky

CSS sticky posice umožňuje bez JS zafixovat element ke kraji okna při rolování.

7 minut

Box-shadow

Vlastnost box-shadow umí vytvořit CSS stín kolem elementu.

5 minut

Zachování posice scrollování overflow-anchor

CSS vlastnost overflow-anchor umožňuje nastavit, jak si má prohlížeč pamatovat, kam bylo odscrollováno.

3 minuty

Kulaté okraje v CSS

Jak vytvořit v CSS zaoblené okraje.

6 minut

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

4 minuty

Text-decoration

Vlastnost text-decoration slouží k „vyzdobení“ běžného textu.

9 minut

Z-index

K čemu je CSS vlastnost z-index a jak mít v jejím užívání systém.

7 minut

Výkon animací s transition: all

Je lepší psát transition: all, nebo vyjmenovávat vlastnosti, které se mají animovat?

3 minuty

CSS appearance

Systémový vzhled elementů pomocí CSS vlastnosti appearance.

3 minuty

Všechny CSS vlastnosti

Seznam (skoro) všech 207 CSS vlastností.

10 minut

Přichytávací rolování v CSS

CSS vlastnost scroll-snap dokáže řídit rolování, aby přeskakovalo mezi jednotlivými elementy.

6 minut

CSS zarovnání vertical-align

Vertikální zarovnání řádku nebo buňky tabulky.

5 minut

CSS výška height

Nastavování výšky v CSS a proč ho raději nepoužívat.

7 minut

CSS vlastnost position

CSS rozlišuje statickou, relativní, absolutní a fixní posici. K čemu je co dobré?

11 minut

Word-spacing

CSS vlastnost word-spacing upravuje velikost mezer mezi slovy.

5 minut

Odsazení prvního řádku text-indent

CSS vlastnost text-indent slouží k odsazení nebo předsazení prvního řádku.

4 minuty

Letter-spacing

CSS vlastnost letter-spacing upravuje vzdálenost mezi písmeny.

3 minuty

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

5 minut

Psát margin: auto, nebo margin: 0 auto?

CSS konstrukce margin: auto se obvykle používá pro vodorovné centrování bloku.

2 minuty

Will-change

CSS vlastnost will-change dá prohlížeči najevo, že se s elementem bude něco dělat.

5 minut

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

5 minut

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

5 minut

Styl odrážkového seznamu

CSS vlastnost list-style upravuje vzhled seznamů <ul> a <ol>.

11 minut

Zvětšení a zmenšení v CSS

Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.

5 minut

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

5 minut

Box-reflect

CSS vlastnost box-reflect umí vytvořit odraz celého boxu.

5 minut

CSS filter

Jak vytvářet grafické filtry obrázků i jiných prvků na stránce.

7 minut

Font

CSS vlastnost font slouží k nastavení písma na stránce.

13 minut

Font-feature-settings

S CSS vlastností font-feature-settings lze dosáhnout zajímavější typografie u OpenType písem.

6 minut

Text-align

CSS vlastnost text-align nastavuje zarovnání písma.

8 minut

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

8 minut

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

3 minuty

Kursor myši

Jak pomocí CSS měnit kursor myši nebo si vytvořit kursor vlastní.

9 minut

Oříznutí CSS vlastností clip

CSS vlastnost clip slouží k oříznutí obsahu elementu.

2 minuty

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

5 minut

Box-decoration-break

Vlastnost box-decoration-break upravuje chování stylu elementu při zalomení řádku.

4 minuty

Text-shadow

CSS vlastnost text-shadow přidává textu stín.

6 minut

Flow

Vlastnosti flow-from a flow-into umožňují pohodlně přeskupovat obsah mezi elementy.

2 minuty

CSS display

CSS vlastnost display ovlivňuje způsob vykreslování HTML elementu.

8 minut

Text-stroke

CSS vlastnost text-stroke vytváří okraj písmen podobně jako vlastnost border u boxů.

2 minuty

CSS counter

Automatické číslování v CSS za pomocí counter-increment, counter-reset a counter.

4 minuty

CSS vlastnost content

CSS vlastnost content slouží k zapisování obsahu do stránky z kaskádových stylů.

3 minuty

Odsazení písmen a slov

Nastavení odsazení jednotlivých písmen (letter-spacing) a mezer mezi slovy (word-spacing).

2 minuty

Margin v CSS

CSS vlastnost margin slouží k vytvoření odsazení kolem elementu, který má margin nastavený.

7 minut

Box-sizing

CSS vlastnost box-sizing dokáže změnit vypočítávání rozměrů boxu.

2 minuty

CSS vlastnost all

Resetování CSS pravidel vlastností all.

2 minuty

CSS pointer-events

Vlastnost pointer-events umožňuje zrušit reakci na události vyvolané myší.

2 minuty

CSS hyphens

Vlastnosti hyphens ovlivňuje rozdělování slov spojovníkem na konci řádku.

3 minuty

Šířka tabulátoru tab-size

Jak pomocí CSS změnit šířku tabulátoru ve zdrojovém kódu.

2 minuty

Uvozovky v CSS

Vlastnost quotes umožňuje nadefinovat uvozovky, které se okolo značky objeví.

2 minuty

CSS resize

Možnost roztahovat element pomocí CSS vlastnosti resize.

4 minuty

Rozmazání obsahu

Rozmazávání obsahu v různých prohlížečích.

4 minuty

Průhledný obsah v CSS

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

6 minut

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

8 minut

Obtékání v CSS

Detailní popis obtékání (float) a clearování v CSS, stavba stránky pomocí obtékání, vysvětlení možných risik a úskalí.

10 minut

Nejpoužívanější CSS vlastnosti

Žebříček CSS vlastností dle jejich četnosti na webových stránkách.

7 minut

Rotace obsahu

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

4 minuty

Box model

Co je to a jaký box-model si vybrat. Jaké jsou výhody a nevýhody.

5 minut

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

11 minut

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

5 minut

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025