CSS nabízí programátorům různé rámce pro návrh dynamických webových stránek. Je sympatičtější, protože poskytuje všechny důležité funkce a nástroje na jednom místě. Nemusíte tedy používat jiné frameworky. Rámec Tailwind v CSS je nejpoužívanější, protože šetří čas uživatele při psaní nadměrného množství CSS.
Tato příručka poskytuje informace o použití kurzoru, zaměření a dalších stavů v Tailwindu.
Jak používat umístění ukazatele myši, zaostření a další stavy ve službě Tailwind?
Při návrhu webových stránek je nutné přidat dynamické a atraktivní prvky pro zachování interaktivity s uživateli. Funkce v Tailwindu lze využít k vytváření interaktivních a dynamických stránek bez psaní dalších vlastních CSS. Některé funkce jsou „hover“, „focus“ a „active“, které pomáhají při přidávání přitažlivosti k návrhům.
Použití Hover Variant v HTML
Vlastnost hover se používá ke stylování prvku HTML, když uživatel přesune kurzor myši nad určitý prvek. Pomáhá prezentovat hladký zážitek.
Krok 1: Použijte vlastnost „hover“ v HTML
Vytvořte soubor HTML a použijte vlastnost hover na některý prvek v kódu. Chcete-li mít představu, podívejte se na kód uvedený níže:
< tělo >
< div třída = 'centrum' >
< knoflík třída = 'bg-green-500 hover:bg-blue-500 text-white font-bold rounded' >
Podržte mě!
< / knoflík >
< / div >
< / tělo >
V tomto kódu:
- Tlačítko s názvem „ Podržte mě! ” je vytvořen tagem tlačítka.
- “ bg-zelená-500 ” nastaví barvu pozadí tlačítka na zelenou.
- “ vznášet se: bg-blue-500 ” změní barvu tlačítka ze zelené na modrou, když na ně najedete myší.
- Text v tlačítku má bílou barvu “ text-bílý ' a ' font-bold ” dělá písmo tučným.
- Tvar tlačítka je nastaven na kulatý pomocí „ zaoblený “.
Krok 2: Náhled výstupu
Po provedení výše uvedeného kódu vypadá konečný pohled takto:
Je vidět, že tlačítko změní barvu, když na něj najedete kurzorem myši.
Použití Focus Variant v HTML
Vlastnost focus se používá ke stylování prvků HTML tak, že když uživatel klikne na prvek, zvýrazní se, aby upoutal pozornost uživatele.
Krok 1: Použijte vlastnost Focus v kódu HTML
Vytvořte soubor HTML a aplikujte vlastnost focus na některý požadovaný prvek. Chcete-li získat dojem, zvažte kód níže:
< div >
< / div >
< / tělo >
V tomto kódu:
- ' flex třída vytvoří flex.
- ' justify-center “ odůvodňuje zarovnání obsahu na střed.
- ' centrum položek ” třída upraví objekty do středu obrazovky.
- ' h-obrazovka ” nastaví velikost obrazovky podle výřezu.
- “ bg-modrá-200 ” nastaví barvu pozadí na modrou.
- Vytvoří se vstupní pole typu text.
- ' ohnisko: bg-green-300 ” po kliknutí uživatelem změní barvu vstupního pole na zelenou.
- “ w-64 ” nastaví šířku na 64px.
- “ h-10 ” nastaví výšku na 10px.
- “ px-4 “ přidá odsazení 4px na horní a levou stranu.
- “ py-2 “ přidá odsazení 2px nahoru a dolů.
Krok 2: Náhled vlastnosti Focus
Uložte HTML kód a otevřete jím vytvořenou webovou stránku. Poté přesuňte kurzor na vstupní pole a klikněte na něj a dojde k níže uvedené změně:
Použití aktivní varianty v HTML
Tato vlastnost se používá ke stylování prvků pro podmínku, když uživatel dynamicky klepne na prvek. Aktivní stav je časový úsek od aktivace kurzoru do jeho uvolněného stavu.
Syntax
aktivní: { vlastnictví }Konkrétní vlastnost CSS se použije na vybraný prvek.
Krok 1: Použijte aktivní variantu v HTML kódu
Vytvořte soubor HTML a aplikujte aktivní vlastnost na nějaký prvek, kterým je v níže uvedeném případě tlačítko:
< div třída = 'flex justify-center items-center h-screen' >
< knoflík třída = 'bg-zelená-600 p-4 zaokrouhleno-md doba přechodu-transformace-400 aktivní transformace:škála-110' >
Klikni na mě!
< / knoflík >
< / div >
< / tělo >
V tomto kódu:
- “ bg-zelená-600 ” nastaví barvu pozadí na zelenou.
- “ p-4 “ přidává odsazení 4px.
- “ zaoblené-md “ zaobluje tvar tlačítka.
- “ přechod-transformace “ se používá k transformaci tlačítka na krátkou dobu, která je nastavena pomocí “ trvání-400 transform “.
- ' aktivní:scale-110 ” změní tlačítko na větší velikost.
Krok 2: Náhled výstupu
Uložte výše uvedený kód do souboru HTML a zobrazte náhled webové stránky, kterou vytvořil. Webová stránka bude vypadat takto:
Je vidět, že velikost tlačítka se při držení myši zvětšuje a jakmile se uvolní, vrátí se do výchozího stavu.
Závěr
Chcete-li v Tailwindu použít stavy přechodu, zaměření a další stavy, použijte předdefinované třídy stavů, jako je „hover“, a aplikujte na ně některé vlastnosti stylu, jako je změna barvy, vytvoření kroužku zaměření a tak dále. K zobrazení škálovatelného výstupu se používají zobrazovací nástroje. Tento zápis demonstroval metodu použití kurzoru, zaměření a dalších stavů v Tailwindu.