Hvordan bruke hover, fokus og andre stater i medvind?

CSS tilbyr en rekke rammer for programmerere for å designe dynamiske nettsider. Det er mer sympatisk fordi det gir alle viktige funksjoner og verktøy på ett sted. Så du trenger ikke å bruke andre rammer. Tailwind-rammeverket i CSS er det mest brukte fordi det sparer tid for brukeren til å skrive overdreven CSS.

Denne veiledningen inneholder bruken av sveve, fokus og andre tilstander i Tailwind.

Hvordan bruke hover, fokus og andre stater i medvind?

Ved utforming av nettsider er det nødvendig å legge til dynamiske og attraktive elementer for å opprettholde interaktivitet med brukerne. Funksjonene i Tailwind kan brukes til å lage interaktive og dynamiske sider uten å skrive ekstra tilpasset CSS. Noen funksjoner er 'sveve', 'fokus' og 'aktiv' som hjelper til med å legge til attraksjon til design.

Bruke Hover Variant i HTML

Hover-egenskapen brukes til å style et HTML-element når brukeren flytter musepekeren over et spesifikt element. Det hjelper å presentere en jevn opplevelse.

Trinn 1: Bruk 'hover'-egenskapen i HTML
Opprett en HTML-fil og bruk hover-egenskapen på et element i koden. For å få en idé, ta en titt på koden gitt nedenfor:

I denne koden:

• En knapp som heter ' Hold meg! ” er opprettet av knappen-taggen.
• ' bg-grønn-500 ” setter bakgrunnsfargen på knappen til grønn.
• ' hover: bg-blue-500 ” endrer knappefargen fra grønn til blå når musen flyttes over den.
• Teksten i knappen har hvit farge ' tekst-hvit ' og ' skrift med fet skrift ” gjør skriften fet.
• Formen på knappen er satt til å runde av ' avrundet '.

Trinn 2: Forhåndsvis utdataene
Etter å ha utført koden ovenfor, ser den endelige visningen slik ut:

Det kan sees at knappen skifter farge når musepekeren flyttes over den.

Bruke fokusvariant i HTML

Focus-egenskapen brukes til å style HTML-elementer slik at når brukeren klikker på elementet blir det uthevet for å få brukerens oppmerksomhet.

Trinn 1: Bruk fokusegenskapen i HTML-koden
Lag en HTML-fil og bruk fokusegenskapen på et ønsket element. For å få et inntrykk bør du vurdere koden nedenfor:

I denne koden:

• « bøye seg ” klasse skaper en flex.
• « rettferdiggjøre-senter ” rettferdiggjør innholdsjusteringen til midten.
• « elementer-senter ” klasse justerer objektene til midten av skjermen.
• « h-skjerm ” angir skjermstørrelsen i henhold til visningsporten.
• ' bg-blå-200 ” setter bakgrunnsfargen til blå.
• En inntastingsboks med typetekst opprettes.
• « fokus: bg-grønn-300 ” endrer fargen på inndataboksen til grønn når den klikkes av brukeren.
• ' w-64 ” setter bredden til 64px.
• ' h-10 ” setter høyden til 10px.
• ' px-4 ” legger til en polstring på 4px til toppen og venstre side.
• ' py-2 ” legger til en polstring på 2px til toppen og bunnen.

Trinn 2: Forhåndsvis fokusegenskapen
Lagre HTML-koden og åpne nettsiden opprettet av den. Flytt deretter markøren på inndataboksen og klikk på den, og endringen nedenfor vil skje:

Bruke den aktive varianten i HTML

Denne egenskapen brukes til å style elementer for tilstanden når brukeren trykker dynamisk på elementet. Den aktive tilstanden er tidsperioden fra aktiveringsstadiet til markøren og dens utgitte tilstand.

Syntaks

Den spesifikke CSS-egenskapen blir brukt på det valgte elementet.

Trinn 1: Bruk den aktive varianten i HTML-koden
Lag en HTML-fil og bruk den aktive egenskapen til et element som i tilfellet nedenfor er en knapp:

I denne koden:

• ' bg-grønn-600 ” setter bakgrunnsfargen til grønn.
• ' s-4 ” legger til en polstring på 4px.
• ' avrundet-md ” gjør knappeformen avrundet.
• ' overgang-transform ' brukes til å transformere knappen i en kort periode som er satt av ' varighet-400 transformasjon '.
• « aktiv:skala-110 ” forvandler knappen til en større størrelse.

Trinn 2: Forhåndsvis utdataene
Lagre koden ovenfor i en HTML-fil og forhåndsvis nettsiden opprettet av den. Nettsiden vil se ut som:

Det kan sees at knappstørrelsen øker når musen holder den og så snart den slippes går den tilbake til utgangstilstanden.

Konklusjon

For å bruke sveve, fokus og andre tilstander i Tailwind, bruk de forhåndsdefinerte tilstandsklassene som 'sveve' og bruk noen stilegenskaper på det som å endre farge, lage en fokusring og så videre. Skjermverktøyene brukes til å presentere en skalerbar utgang. Denne oppskriften har demonstrert metoden for å bruke hover, fokus og andre tilstander i Tailwind.