CSS3 představil nespočet možností pro návrháře UX a nejlepší je, že nejkvalitnější součásti jsou opravdu jednoduché.
Jen pár řádků kódu vám poskytne úžasný přechodový efekt, který nadchne vaše uživatele, zvýší zapojení a v konečném důsledku bude při správném používání zvyšovat vaše konverze. Navíc jsou tyto efekty hardwarově zrychleny a progresivní vylepšení, které můžete použít právě teď.
Zde je 8 opravdu jednoduchých efektů, které přidávají do vašeho uživatelského rozhraní život a usmějejí se tváře vašich uživatelů.
Všechny tyto efekty (bar jedna) jsou řízeny přechodovou vlastností. Takže můžeme vidět, jak tyto efekty fungují, nastavíme div v HTML stránce:
Když to uděláte, nastavte jeho šířku a výšku (takže má rozměry), její barvu pozadí (takže ji můžeme vidět) a její přechodovou vlastnost.
Přechodová vlastnost má tři hodnoty: vlastnosti, které přecházejí (v našem případě všechny) rychlost přechodu (v našem případě 0,3 sekundy) a třetí hodnotu, která vám umožňuje změnit způsob, jakým se vypočítají zrychlení a zpomalení, bude se držet výchozí tím, že ponecháte toto prázdné.
Nyní musíme pouze změnit vlastnosti a animovat nás ...
Pokud byste chtěli následovat, můžete Zde si stáhněte demo soubory.
Nerozumění věcí je poměrně častým požadavkem od klientů. Je to skvělý způsob, jak zdůraznit funkčnost nebo upozornit na výzvu k akci.
Fade efekty jsou kódovány ve dvou krocích: nejprve nastavíte počáteční stav; poté změnu nastavíte, například na vznášedle:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Ujistěte se, že jste nastavili třídu vašeho divu na "vyblednutí", abyste viděli tuto práci.)
Chcete-li pěstovat prvek, musíte použít jeho šířku a výšku nebo její polstrování. Ale teď můžeme použít transformaci CSS3 pro zvětšení.
Nastavte svou divovskou třídu tak, aby se "rozrostla" a přidávejte tento kód do svého bloku stylů:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Transformace CSS mají řadu různých použití a jeden z nejlepších je transformace rotace prvku. Dejte div třídě "rotate" a přidejte do CSS následující:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D stíny byly zamračeny po dobu asi jednoho roku, neboť nebyly považovány za kompatibilní s plochým designem, což je samozřejmě nesmysl, fungují fantasticky dobře, aby poskytly uživatelům zpětnou vazbu na jejich interakce a pracovaly s plochými nebo falešnými 3D rozhraními .
Tento efekt je dosažen přidáním stínového pole a přemístěním prvku na ose x pomocí vlastností transformace a překladu tak, aby se zdálo, že vyčnívá z obrazovky.
Dejte div třídě "threed" a přidejte následující kód do CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Jedním z nejžhavějších stylů tlačítek je tlačítko duchů; tlačítko bez pozadí a těžké ohraničení. Samozřejmě můžeme jednoduše přidat hranici prvku, ale to změní pozici prvku. Tento problém bychom mohli vyřešit pomocí dimenzování boxů, ale mnohem jednodušším řešením je přechod v okraji pomocí vloženého stínového rámečku.
Dej divu "okraj" třídy a do svých stylů přidejte následující CSS:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}