Moderní tvorba webových aplikací

O webu

CSS

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Tailwind CSS

CSS framework pro stylování webů přes utility třídy.

10 minut

Jak vytvořit tmavý režim / dark mode v CSS

Jak co nejlépe vytvořit pro web tmavý režim, aby automaticky respektoval nastavení uživatele.

15 minut

CSS pseudo třída :is()

Jak v CSS pseudo třída :is() dokáže z(ne)přehlednit styly.

4 minuty

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

Barva podle odrolování na stránce

Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.

3 minuty

CSS pravidla any-pointer a any-hover

CSS pravidla @media any-pointer a any-hover slouží k detekci přesnosti a typu ovládá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

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

11 minut

Text-decoration

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

9 minut

CSS Elements Queries

Jak zajistit různý vzhled elementů v závislosti na jejich rozměru.

4 minuty

Nula před desetinnou tečkou u čísla

Je lepší psát před desetinou tečnou u čísla 0.5 zbytečnou nulu, nebo ne?

3 minuty

Pořadí CSS vlastností

Jak správně řadit jednotlivé CSS vlastnosti v rámci jednoho bloku příslušícímu k selektoru.

9 minut

Jak používat CSS stav :focus

Proč je důležité stylovat stav :focus. Jak toho automaticky docílit a jaké jsou s tím problémy.

12 minut

Přechod na Gulp 4

Jak přejít na Gulp 4. Co je potřeba změnit v gulpfile.js.

7 minut

Maximální možný počet CSS selektorů

Jaké jsou v prohlížečích omezení pro velikost (složitost) CSS souborů.

3 minuty

Lepší podtržení odkazu

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

4 minuty

Z-index

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

7 minut

Zvláštní CSS pro IE

Jak odlišit Internet Explorer od ostatních prohlížečů a vytvořit zvláštní CSS jen pro IE.

9 minut

Recense: Vzhůru do (responzivního) webdesignu

Martin Michálek vydal další knihu o současné tvorbě webu, tentokrát kromě e-booku i na papíře. Jaká je?

3 minuty

CSS @font-face

Pomocí CSS pravidla @font-face jde na stránce používat různá webová písma.

15 minut

CSS pravidlo @supports

Pravidlem @supports lze v CSS testovat dostupnost CSS vlastností.

3 minuty

Vlastní vzhled scrollbaru

Jaké jsou možnosti ve stylování vzhledu posuvníku.

6 minut

HTML/CSS/JS identifikátor id

K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.

5 minut

Zalamování dlouhých slov

Jak si poradit s dlouhými slovy, které by mohly narušit layout stránky.

5 minut

Výkon animací s transition: all

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

3 minuty

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

11 minut

CSS appearance

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

3 minuty

CSS spinner

Točící se kolečko pro znázornění načítání v čistém CSS.

3 minuty

Systémová písma

Jak a proč používat lokální písma dostupné v operačních systémech.

4 minuty

Recense: Vzhůru do CSS3‏

Jaký je ebook o CSS3 od Martina Michálka.

6 minut

Stylování <select>u

Roletový seznam nabízí omezené možnosti v úpravách vzhledu. Které to jsou a jak je rozšířit?

6 minut

CSS mixiny pomocí @apply

Pomocí pravidla @apply jde v CSS vytvářet vlastní mixiny.

2 minuty

Automatické zoomování inputů na iOS

Jak se vypořádat s automatickým přibližováním stránky u formulářových prvků na iPhonech.

5 minut

CSS prefixy

Některé CSS vlastnosti se zapisují s prefixy. Proč tomu tak je a jak prefixy zapisovat.

5 minut

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

6 minut

Všechny CSS vlastnosti

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

10 minut

Expressive CSS

Expressive CSS je postup psaní CSS, kde se jednotlivé styly přiřazují pomocí tříd v HTML.

6 minut

Atributový case-insensitive selektor

Pomocí příznaku i jde zapsat atributový selektor nezávislý na velikosti písmen.

2 minuty

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

Stylovat třídy, nebo elementy?

Je lepší stylovat přímo HTML elementy, nebo všechny styly přiřazovat třídami?

6 minut

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

6 minut

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 minut

Jednotné odsazení v CSS

Jak postupovat, aby napříč webem byly mezi elementy stejné rozestupy.

8 minut

CSS zarovnání vertical-align

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

5 minut

Zprava doleva

HTML značky, HTML, atributy a CSS vlastnosti pro text psaný zprava doleva.

4 minuty

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

7 minut

5minutový rychlokurs Bootstrapu

Jak za 5 minut vytvořit web pomocí CSS frameworku Bootstrap.

6 minut

Uvozovky v HTML, CSS, JS, PHP, SQL

Jak správně používat uvozovky v HTML, CSS, JavaScriptu, PHP a MySQL.

12 minut

CSS výška height

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

7 minut

CSS pravidlo @media

Pravidlo @media se používá k omezení platnosti CSS jen za určitých podmínek.

15 minut

Ikona vedle odkazu

Jak přidat a zarovnat ikonku vedle odkazu, který má podtržení.

5 minut

Změna stylů JavaScriptem

Jak JavaScriptem nastavovat CSS pro změnu vzhledu jednotlivých elementů.

4 minuty

Má web fungovat bez CSS?

Má cenu řešit zobrazení stránky bez stylů? Případy, kdy taková situace nastane.

6 minut

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

7 minut

Zkosení hrany v CSS

Jak vytvořit šikmou hranu (zkosení) CSS bloku.

5 minut

Odkaz přes celý box

Jak udělat, aby celý box s několika prvky byl klikací.

4 minuty

CSS !important

Klíčové slovo !important slouží k posílení a přebíjení CSS vlastností.

7 minut

Vyšší tlačítko ve Firefoxu

Prohlížeč Firefox má zajímavou vlastnost u formulářových tlačítek. Dělá je vyšší než ostatní prohlížeče.

3 minuty

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

Jeden sloupec fixní, druhý proměnlivý

Jak vytvořit dvousloupcové rozvržení, kde je jeden sloupec s pevnou šířkou a druhý se přizpůsobuje šířce okna.

6 minut

Převod sloupců na procenta

Jak převést fixní sloupcové rozložení na procenta, která se budou přizpůsobovat šířce okna.

3 minuty

Zalomení tlačítka na více řádků

Jak zabránit nechtěnému zalomení tlačítka na více řádků.

3 minuty

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

Oddělovač položek v menu

Jakými způsoby v CSS lze realisovat oddělovač položek v menu.

6 minut

CSS selektor :empty

CSS selektor :empty zaměří element, ve kterém vůbec nic není.

2 minuty

Vícesloupcový text a column

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

5 minut

Navštívený odkaz :visited

Pomocí CSS pseudo třídy :visited jde měnit některé styly navštíveného odkazu.

10 minut

Elipsa/ovál v CSS

Jak pomocí CSS nakresli ovál.

2 minuty

Způsoby CSS resetování

Používat CSS reset, nebo ne? Jaká jsou pro a proti.

7 minut

CSS zbytečnosti

CSS konstrukce, které nejspíš píšete zbytečně.

7 minut

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

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

2 minuty

Posunutí obsahu v CSS

Jak posunout jakýkoliv element někam jinam.

5 minut

Text v obrázku

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

6 minut

Before a after u <input>u

Funguje, nebo nefunguje použití :before a :after u <input>ů?

3 minuty

BEM – způsob zápisu CSS

BEM (Block, Element, Modifier) je postup, kterým zapisovat CSS pravidla a pojmenovávat CSS třídy.

6 minut

Will-change

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

5 minut

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

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

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

5 minut

Pozadí jenom za písmeny

Jak vytvořit nadpis, který má pozadí jen za písmeny.

4 minuty

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

Odřádkování v HTML a CSS

Jak v HTML, HTML atributu nebo CSS vložit nový řádek.

6 minut

Styl elementů podle jejich počtu

Jak pomocí CSS odlišně stylovat položky v závislosti na jejich počtu.

6 minut

Části webu přes celou šířku

Jak jen některé části webu roztáhnout přes celou šířku.

3 minuty

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

Zvýraznění sloupců/řádků tabulky po najetí

Jak při najetí myší na tabulku zvýraznit příslušné sloupce a řádky.

5 minut

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

11 minut

Fit-content

CSS vlastnost fit-content nastaví šířku podle obsahu.

3 minuty

CSS filter

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

7 minut

Režim celé obrazovky

Jak je možné stránku přepnout do fullscreenu (režimu celé obrazovky).

6 minut

Font

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

13 minut

Styl označeného textu

Pseudo-element ::selection umožňuje změnit styl kursorem označeného textu.

3 minuty

Selektor :matches

CSS pseudotřída :matches slouží ke zjednodušení zápisu dlouhých výčtů selektorů.

3 minuty

Oříznutí víceřádkového obsahu

Jak oříznout dlouhý text po stanoveném počtu řádek.

5 minut

Načítání CSS bez blokování vykreslování

Jak asynchronně načítat CSS, aby neblokovalo vykreslování stránky.

7 minut

Dopočítávání CSS hodnot

Jak funguje dopočítávání hodnot v kaskádových stylech.

5 minut

Font-feature-settings

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

6 minut

CSS barva currentColor

Klíčové slovo currentColor obsahuje aktuální barvu elementu.

4 minuty

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

Šachovnicový výpis položek

Jak vypsat položky sestávající ze dvou sloupců, aby se pořadí sloupců střídalo.

4 minuty

Třísloupcový layout

Různé možnosti vytvoření rozvržení o 3 sloupcích s fixní i proměnnou šířkou.

7 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

Margin, border a absolutní posicování

Jak se chová margin a border u absolutně posicovaných elementů.

4 minuty

CSS pravidlo @document

CSS pravidlo @document umí omezit platnost CSS na určité URL.

3 minuty

First-letter

CSS selektor first-letter zaměří první písmeno v elementu.

4 minuty

Zjištění výsledného CSS v JavaScriptu

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

2 minuty

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

4 minuty

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

5 minut

CSS flip a animace

Jak v CSS otočit obsah kolem svislé nebo vodorovné osy.

4 minuty

Výška závislá na šířce

Jak v CSS nastavit výšku v závislosti na procentuální i pevné šířce.

4 minuty

Text-shadow

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

6 minut

Menu přes celou šířku

Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

3 minuty

Plynulý přechod mezi stránkami

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

3 minuty

Hover efekty s text-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti text-shadow.

4 minuty

Hover efekty s box-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

4 minuty

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

5 minut

Flow

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

2 minuty

Zápis průhledné barvy rgba()

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

3 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 selektory :valid a :invalid

CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.

3 minuty

Inline-block a bílé znaky

Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).

3 minuty

Universální hover efekt pro různé barvy pozadí

Jak vytvořit universální :hover efekt pro různě barevná tlačítka.

6 minut

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

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

7 minut

Position: fixed

Různé způsoby využití fixované posice v CSS.

2 minuty

CSS animace průběhu načítání

Jak využitím CSS transition a špetky JavaScriptu vytvořit animované znázornění průběhu načítání, jako je třeba na YouTube.

4 minuty

Margin v CSS

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

7 minut

Emmet a časté zkratky

Nástroj Emmet usnadňuje a zrychluje psaní HTML/CSS kódu. Seznam často používaných zkratek.

2 minuty

Box-sizing

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

2 minuty

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

2 minuty

Generátor CSS šipek

Generátor šipek/trojúhelníků přímo v CSS pomocí okrajů. Funkční i ve starých IE.

2 minuty

Rozbalování a sbalování obahu v CSS

Jak skrývat a odkrývat části stránky v čistém CSS bez jakéhokoliv JavaScriptu.

3 minuty

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

3 minuty

CSS ikony

Ikony bez obrázků v čistém CSS.

4 minuty

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

6 minut

Spojení CSS a JS souborů do jednoho

Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.

3 minuty

Proměnné v CSS – var()

Proměnné přímo v CSS přes funkci var().

3 minuty

CSS vlastnost all

Resetování CSS pravidel vlastností all.

2 minuty

Responsivní komentáře

Jak některé části stránky načítat jen při určité velikosti obrazovky.

3 minuty

Stylování formulářových políček a tlačítek

Které CSS vlastnosti si ohlídat při dosahování perfektního stylu vstupní políček a odesílacích tlačítek.

4 minuty

CSS sprite

Spojení všech obrázků do jednoho (CSS sprite) zrychlí načítání webu. Hotový generátor v PHP.

8 minut

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

Responsivní tabulky

Co udělat s tabulkami, aby se rozumně zobrazovaly na mobilech/tabletech.

8 minut

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

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

5 minut

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

5 minut

Více náhledů videa

Jak při najetí myší na náhled videa zobrazovat další náhledy.

5 minut

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

3 minuty

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

3 minuty

Oříznutí dlouhého textu

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

5 minut

Horizontální navigace

Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

5 minut

Formuláře a CSS reset

Dopad * {margin: 0; padding: 0} na formulářové prvky.

2 minuty

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

5 minut

Rozmazání obsahu

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

4 minuty

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

3 minuty

Semantic UI

Semantic UI je CSS framework. Co nabízí a jak funguje?

3 minuty

Vlastnost hasLayout

Co je zač CSS vlastnost hasLayout a k čemu ji využít.

3 minuty

Průhledný obsah v CSS

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

6 minut

Obrázek jako odrážka

V CSS je možné přidat textu (seznamu) obrázkovou odrážku, jaké to má úskalí a risika?

3 minuty

CSS vlastnost animation

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

8 minut

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

2 minuty

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

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

5 minut

Nejpoužívanější CSS vlastnosti

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

7 minut

Používat id, nebo class?

Rozdíl mezi .třídou a #identifikátorem.

4 minuty

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

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

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

3 minuty

Sloupce stejně vysoké

Různé možnosti, jak zajistit automatické roztažení různě vysokých sloupců na stejnou výšku.

5 minut

Velký obrázek na pozadí stránky

Jak správně udělat obrázkové pozadí celé stránky, které se přizpůsobí velikosti okna.

5 minut

Kruhový obrázek

Různé možnosti vytvoření kruhového obrázku.

2 minuty

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

3 minuty

Absolutně posicované pozadí

Jednoduché řešení vícebarevného pozadí absolutním posicováním.

2 minuty

Vyjížděcí menu v CSS

Jak vytvořit v čistém CSS vyskakovací menu.

3 minuty

Flexboxy

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

11 minut

Stylování HTML tabulek

Jednoduché barvení a další stylování značky <table>.

6 minut

Černobílý styl obrázku

Jak v CSS zajistit černobílý styl běžného obrázku. Napříč prohlížeči stále panují rozdíly.

5 minut

Obal <body>, nebo <div id=container>?

Ve standardním režimu lze značku <body> stylovat jako normální <div>. Má to cenu?

1 minuta

Speciální znaky v atributu class

Co takhle psát názvy tříd v HTML a CSS hezky česky s diakritikou. Funguje to?

4 minuty

CSS framework Kraken

Kromě populárního CSS frameworku Bootstrap existují i další zajímavé. Kraken je jeden takový.

1 minuta

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

5 minut

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

3 minuty

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

2 minuty

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

3 minuty

Animace v CSS pomocí transition

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

5 minut

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

4 minuty

Vlastní vzhled formulářů

Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?

5 minut

Jednoduché filtrování dat v čistém CSS

Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

3 minuty

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

22 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

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

3 minuty

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

3 minuty

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

6 minut

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

4 minuty

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

3 minuty

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

1 minuta

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