CSS

Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.

Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.

Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.

Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.

Jak stacking context v CSS ovlivňuje z-index, co vytváří nový kontext vrstvení a jak řešit problémy s překrýváním elementů.

Co jsou kapitálky (small caps), jak se liší od verzálek a jak je použít v CSS pomocí font-variant a text-transform.

Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.

Proč mají znaky různou šířku a jak to řešit v responsivním designu.

Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.

CSS pseudo element ::marker umožňuje stylovat odrážky seznamů

Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

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

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

Jakými všemi způsoby připojit CSS do stránky.

Jak správně řešit označený (:focus) stav formulářových prvků.

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

Tlačítka mají na webu po najetí jiný kursor než odkazy.

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

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

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

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

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

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

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

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

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

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

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

CSS pravidla @media any-pointer a any-hover slouží k detekci přesnosti a typu ovládání.

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

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

Jak vytvořit v CSS zaoblené okraje.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS vlastnost word-spacing upravuje velikost mezer mezi slovy.

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

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

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

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

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

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

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

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

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

Jak pomocí CSS nakresli ovál.

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

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

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

Jak posunout jakýkoliv element někam jinam.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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?

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

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

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

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

Resetování CSS pravidel vlastností all.

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

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

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

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

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

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

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

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

Možnost roztahovat element pomocí CSS vlastnosti resize.

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

Rozbalení a sbalení obsahu po kliknutí.

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

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

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

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

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

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

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

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

Galerie obrázků bez JavaScriptu pomocí CSS.

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

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

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

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

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

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

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

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

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

Pomocí CSS transition je možné skrývání a odkrývání textu plynule animovat (od IE 10).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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.

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

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

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

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.

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