Zvolené téma: "Responzivní web"

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

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

YouTube videa: Postupné načítání při scrollu

YouTube videa: Postupné načítání při scrollu

Dnes si příklad z minulého článku rozšíříme o další funkcionalitu. Sám jsem dlouho hledal řešení, jak zamezit zbytečnému kousání stránek, které obsahují větší množství vložených videí. Chtěl jsem možnost přehrání uvnitř článku, ale už se mi tolik nelíbilo, jak se všechno musí dopředu zbytečně načítat. Řešení je vcelku triviální a sám už jsem ho mnohokrát použil v jiných případech: daný obsah načteme až po zascrollování. Jak vše uvést do praxe vysvětlím právě v dnešním článku.

Celý článek

PHP Třída na detekci zařízení

PHP Třída na detekci zařízení

V sérii předchozích článků na téma YouTube videa jsem několikrát referoval na správnou detekci zařízení. Nic totiž nelze cílit se stoprocentní přesností jenom pomocí @media query, proto je dobré nasadit na responzivní weby i silnější kalibr. Tím samozřejmě myslím PHP knihovnu, která správně určí vstupní zařízení, na kterém se momentálně uživatel nachází. A jedno takové řešení vám dnes představím.

Než jsem našel tu správnou knihovnu, strávil jsem nějaký čas na Googlu. Nakonec se ukázalo, že žádná jiná pořádně ani neexistuje. Tedy pokud chceme kvalitní produkt, jehož vývoj stále pokračuje. Autor knihovnu průběžně aktualizuje, což je v případě detekce zařízení nejdůležitější aspekt. Dovolte mi, abych vám představil Mobile Detect Library.

Celý článek

Jak na embedovaná YouTube videa: Responzivita

Jak na embedovaná YouTube videa: Responzivita

V předchozím dílu jsme si ukázali, jak získat náhledový obrázek YouTube videa. Dnes tuto znalost konečně zužitkujeme. V dalším ze série krátkých článků si ukážeme, jak snadno a jednoduše přizpůsobit inline rámy responzivnímu designu. Teoreticky půjde následující postup: iframe obalíme elementem, který dostane na pozadí náhledový obrázek. V něm se podle rozlišení zobrazí buď iframe nebo externím odkaz. Background-image containeru se taktéž zapne až při určitém rozlišení a/nebo zařízení.

Celý článek

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

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. Samotnému layoutu o dynamické šířce se věnovat nebudu; dnes budu předpokládat, že toto už umíte. Widgety v různé podobě jsou nyní vcelku populární záležitost, jenže jak se to má člověk naučit, když článků je pomálu.

Celý článek

Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua