Odpovědný design je všude a ať už používáte rámce nebo psát dotazy médií sami, některé prvky na vaší stránce se musí pohybovat nebo měnit.
Pokud jsou mediální dotazy založeny na rozměrech prohlížeče a velikost prohlížeče je změněna, vaše prvky se přesunou na místo. Přidání malé animace do těchto vlastností je příjemným dotykem pro všechny citlivé stránky.
Dnes vám ukážeme, jak snadné je přidat tento extra dotek tím, že animujete šířku a opacitu prvků mezi dotazy médií.
Pro tento jednoduchý příklad použijeme div, obsahující 3 menší div. Divs budou měnit podle velikosti okna prohlížeče. HTML je jednoduchý:
Nyní naše hlavní CSS umístí tři boxy uvnitř hlavního divu a také v souladu s okrajem vpravo:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Toto je naše hlavní rozložení, bez mediálních dotazů, toto rozložení se nebude přizpůsobovat, pokud se výřez změní. Nyní, když máme základní informace, přidáme dotazy médií.
Dotazy týkající se médií se v dnešní době často používají. Většina webových návrhářů je chápe, ale v případě, že je to poprvé, je zde rychlá aktualizace: mediální dotazy kontrolují schopnost zařízení, které používáte (šířku, orientaci a rozlišení) a spouštějí konkrétní CSS, pokud jsou splněny podmínky určené pro médium jsou splněny. V našem příkladu použijeme dvě mediální dotazy, které ověří, zda je prohlížeč menší než 960 pixelů a zda je menší než 660 pixelů. Poté nastavíme šířku prvků, budeme také skrýt poslední dílo div, aby ostatní dva měli větší prostor:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}To je vše, co potřebujeme pro mé mediální dotazy. Všimněte si, že je důležité, aby byl tento kód umístěn pod původním kódem CSS tak, aby dotazy médií přepisovaly kód nad nimi. Pokud nyní otestujete svůj soubor, zobrazí se při změně velikosti okna prohlížeče velikost změn divů a změna opacity posledního dílu div.
Všimneme si, že skrytí posledního divého díla nastavíme jeho neprůhlednost na hodnotu 0 namísto jeho nastavení: žádné. Je to proto, že chceme být schopni animovat majetek; opacita má mnoho různých stupňů, zatímco zobrazení je buď pravdivé nebo nepravdivé (a proto nelze animovat).
CSS animace se ukázaly být opravdu užitečné při provádění těchto malých animací, které jsme použili k běhu v jQuery, jako je například animace barvy, šířky a neprůhlednosti.
Protože chceme, aby se stránka animovala jako celek, použijeme volič * CSS a nastavíme animaci. Animace CSS se laskavě degradují, ale budete chtít přidat i předpony prodejců, abyste měli co nejvíce podpory:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Můžete vidět konečný výsledek tady.
Přidání jednoduchých animací, jako jsou tyto, je pěkným dokončeným dotykem na libovolné webové stránky. Několik řádek kódu přidává opravdu pěkný polský k vašemu citlivému webu.
Máte animované dotazy v médiích v projektu? Jaké účinky jste dosáhli? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obraz v měřítku přes Shutterstock.