# 058: Vlastní záhlaví pro galerii, část 2 (s dotazy na média Reverso) - Triky CSS

Anonim

Máme základní záhlaví galerie na místě, ale chybí mu malí modří lidé, které Erica vložila do původní ilustrace. Mluvili jsme o tom předem a rozhodli jsme se, že by bylo docela skvělé, kdyby při změně velikosti obrazovky zůstali lidé na místě, když se stěna galerie pohybovala za nimi, takže to vypadá, jako by procházeli galerii v úžasu.

Vzhledem k tomu, že grafika lidí je čistě ornemantální, není použití značek pro ně ideální. Naštěstí existují dva z nich a na každý prvek ( ::beforea ::after) máme dva volné pseudo prvky . Pomocí nich je přidáme.

V tomto videu představujeme koncept, který bude i nadále užitečný, koncept „reverzních mediálních dotazů“. V tomto designu z velké části pracujeme na ploše, takže naše mediální dotazy jsou většinou založeny na max-width. Ale pokud nastavíme stejné dotazy na média na základě min-width, můžeme cílit na obrazovku, pouze pokud je větší než určitá velikost, ne menší.

Za těchto okolností se lidská grafika na malé obrazovky prostě nehodí. Takže k jejich načtení použijeme zpětný dotaz na média, tak je načteme na velké obrazovky, na kterých pracují, ale nenačítáme je na malých obrazovkách. To je lepší, než je neustále načítat a skrývat na malých obrazovkách.