HTML, CSS, JavaScript

Tipy, jak správně stylovat, chování CSS v různých prohlížečích, chytré JavaScriptové funkce pro usnadnění práce. V rubrice se s vámi podělím o zajímavosti v oboru i postupy, které jsou nezbytné k dosažení sémantického kódu a přístupného webu.

Stylování formulářů snadno a rychle

Než si dáme další článek z dílny seriálového kritika, proložím své recenze jedním z oboru. Takový už jsem nepsal ani nepamatuji, ale snad si vzpomenu, jak se to dělá. A protože mé návody byly vždy cílené na kodéry začínající a mírně pokročilé, vezmu si pod lupu stylování formulářů. Úplné základy. 

Celý článek

Ajaxové stránkování: základy

Úpravy vlastního webu mi daly podklady pro nový článek, který se bude věnovat Ajaxovému stránkování. Tedy přesněji, jak nalepit Ajax na existující výstup. Budu předpokládat, že nějaký výpis článků z databáze už máte hotový a podívám se detailněji na úpravy, kterými musí systém projít. Složité úpravy to určitě nebudou. Článek bude směrovaný k začínajícím kodérům. 

Celý článek

CSS pseudo-třídy: nth-child, nth-of-type, nth-last-of-type

Článek z oboru slibuji už dlouho. A čím lepším pokračovat, než pořádným seznamem tipů a triků, jak snáz stylovat web. Dnes se podíváme některé pseudo-třídy kaskádových stylů, které vám usnadní stylování dlouhých seznamů. Ale i krátkých. Také se pokusím vysvětlit, proč tyto selektory nefungují vždy tak, jak bychom si představovali.

Celý článek

CSS transition a vytvoření jednoduchého JS carouselu

V minulém článku jsem sliboval, že bude další, ve kterém najdete návod na jednoduchý carousel vytvořený za pomoci JavaScriptu a CSS transition. Tak tady je. Pokud si na stránce zascrollujete trochu níž a vyhledáte v pravém sloupci "Mikroblog" a "Nejnovější články", tak přesně to bude výsledek. 

Celý článek

CSS transition: animace přes změnu třídy - základy

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu. 

Celý článek

Jak na responzivní web: CSS Grid Layout, stylování Widgetů

Je čas zase na nějaký článek na téma, kterému byl tento blog původně věnován. V dnešním tutoriálu ukážu krátký návod, jak vytvořit takzvané Widgety závislé na aktuální šířce okna; naučíme něco o responzivním webu

Celý článek

Tipy na moderní web: Font Awesome, šipky pomocí CSS

Webdesign je oblast, která se pořád vyvijí a pokud chce člověk držet krok, je potřeba stále studovat nové technologie a využívat vše, co nám nynější prohlížeče dovolí. V dnešním článku si ukážeme jednu kodérskou vychytávku, a to, jak vytvořit jednoduché šipky pouze pomocí css. V druhé části představím piktogramové písmo Font Awesome spolu se stručnou ukázkou použití.

Celý článek

Jak jsem opravoval optický klam

Aneb stále se učím. Tedy abych byl přesný, nejednalo se o optický klam, ale o bug v zobrazení modelu RGB. Měl jsem stránku, kde byly v patičce ikonky sociálních sítí. A došel mi bug report, že druhá z ikon, YouTube, je trochu uskočená. 

Celý článek

Když klient reportuje už opravené chyby

Provádění stylových, grafických či JavaScriptových úprav na webové prezentaci a jejich následné posílání na validaci klientovi by vydalo na samostatný blog, já vám ale dnes ukážu jednoduchý tip, jak těmto situacím co nejvíce předejít. Znáte to: upravíte styl, napíšete, že je hotovo a klient vám obratem odpoví, že není. 

Celý článek

JavaScript: Vertikální zarovnání na střed prohlížeče

Spousta webů využívá zobrazení informací v malých pop up oknech. V takovém případě vždy chceme vypsat uživateli zprávu na jasném a viditelném místě. Zarovnání absolutně napozicovaného divu na střed obrazovky může znít jako poměrně jednoduchý úkol, ovšem pokud chceme docílit univerzálního řešení, situace se může trochu zkomplikovat. V dnešním článku bych rád ukázal jednoduchý návod jak na to. 

Celý článek