CSS pakub programmeerijatele dünaamiliste veebilehtede kujundamiseks mitmesuguseid raamistikke. See on sümpaatsem, sest see pakub kõik olulised funktsioonid ja tööriistad ühes kohas. Seega ei pea te muid raamistikke kasutama. CSS-i Tailwindi raamistik on kõige laialdasemalt kasutatav, kuna see säästab kasutaja aega liigse CSS-i kirjutamiseks.
See juhend kirjeldab hõljumise, fookuse ja muude olekute kasutamist Tailwindis.
Kuidas kasutada hõljumist, fookust ja muid olekuid Tailwindis?
Veebilehtede kujundamisel on vaja lisada dünaamilisi ja atraktiivseid elemente, et säilitada interaktiivsust kasutajatega. Tailwindi funktsioone saab kasutada interaktiivsete ja dünaamiliste lehtede loomiseks ilma täiendavat kohandatud CSS-i kirjutamata. Mõned funktsioonid on 'hõljumine', 'fookus' ja 'aktiivne', mis aitavad kujundusele atraktiivsust lisada.
Hõljutivariandi kasutamine HTML-is
Hõljutusatribuuti kasutatakse HTML-i elemendi stiili kujundamiseks, kui kasutaja viib hiirekursori konkreetse elemendi kohale. See aitab pakkuda sujuvat kogemust.
1. samm: rakendage HTML-is hõljumise atribuuti
Looge HTML-fail ja rakendage hiirekursori atribuut mõnele koodi elemendile. Idee saamiseks vaadake allolevat koodi:
< keha >
< div klass = 'Keskus' >
< nuppu klass = 'bg-green-500 hover:bg-blue-500 text-white font-bold ümardatud' >
Hõljutage mind!
< / nuppu >
< / div >
< / keha >
Selles koodis:
- nupp nimega ' Hõljutage mind! ” luuakse nupusildiga.
- “ bg-roheline-500 ” määrab nupu taustavärvi roheliseks.
- “ hõljutage: bg-blue-500 ” muudab nupu värvi rohelisest siniseks, kui hiirt selle kohal liigutada.
- Nupu tekst on valget värvi ' tekst-valge ” ja „ font-paks ” muudab fondi paksuks.
- Nupu kuju on ümardatud ' ümardatud ”.
2. samm: väljundi eelvaade
Pärast ülaltoodud koodi käivitamist näeb lõplik vaade välja järgmine:
On näha, et nupp muudab värvi, kui hiirekursorit selle kohale viia.
Fookuse variandi kasutamine HTML-is
Fookuse atribuuti kasutatakse HTML-i elementide stiilimiseks nii, et kui kasutaja elemendil klõpsab, tõstetakse see kasutaja tähelepanu äratamiseks esile.
1. toiming: rakendage HTML-koodis fookuse atribuuti
Looge HTML-fail ja rakendage fookuse atribuut mõnele soovitud elemendile. Mulje saamiseks kaaluge allolevat koodi:
< div >
< / div >
< / keha >
Selles koodis:
- ' painduv ” klass loob painduvuse.
- ' õigusta-keskus ” õigustab sisu joondamist keskele.
- ' esemete keskus ” klass kohandab objektid ekraani keskele.
- ' h-ekraan ” määrab ekraani suuruse vastavalt vaateavale.
- “ bg-blue-200 ” määrab taustavärvi siniseks.
- Luuakse teksti tüüpi sisestuskast.
- ' fookus: bg-roheline-300 ” muudab kasutaja klõpsamisel sisestuskasti värvi roheliseks.
- “ w-64 ” määrab laiuseks 64 pikslit.
- “ h-10 ” määrab kõrguseks 10 pikslit.
- “ px-4 ” lisab üla- ja vasakpoolsele küljele 4 piksli suuruse polsterduse.
- “ py-2 ” lisab üla- ja alaosale 2 piksli suuruse polsterduse.
2. samm: vaadake fookuse atribuudi eelvaadet
Salvestage HTML-kood ja avage selle loodud veebileht. Seejärel liigutage kursor sisestuskastile ja klõpsake sellel ning toimub järgmine muudatus:
Aktiivse variandi kasutamine HTML-is
Seda atribuuti kasutatakse tingimuse elementide stiilimiseks, kui kasutaja dünaamiliselt elementi puudutab. Aktiivne olek on ajavahemik alates kursori aktiveerimise etapist ja selle vabastatud olekust.
Süntaks
aktiivne: { vara }Konkreetne CSS-i atribuut rakendatakse valitud elemendile.
1. toiming: rakendage HTML-koodis aktiivne variant
Looge HTML-fail ja rakendage aktiivne atribuut mõnele elemendile, mis järgmisel juhul on nupp:
< div klass = 'flex justify-center items-center h-screen' >
< nuppu klass = 'bg-green-600 p-4 ümardatud-md ülemineku-teise kestus-400 teisendus aktiivne: skaala-110' >
Klõpsake MINA!
< / nuppu >
< / div >
< / keha >
Selles koodis:
- “ bg-roheline-600 ” määrab taustavärvi roheliseks.
- “ p-4 ” lisab 4 piksli suuruse polsterduse.
- “ ümardatud-md ” muudab nupu kuju ümaraks.
- “ üleminek-transformatsioon ' kasutatakse nupu muutmiseks lühikeseks ajaks, mille määrab ' kestus-400 teisendus ”.
- ' aktiivne:skaala-110 ” muudab nupu suuremaks.
2. samm: väljundi eelvaade
Salvestage ülaltoodud kood HTML-faili ja vaadake selle loodud veebilehe eelvaadet. Veebileht näeb välja selline:
Näha on, et nupu suurus suureneb, kui hiir seda käes hoiab ja niipea kui see vabastatakse, naaseb see algolekusse.
Järeldus
Hõljumise, fookuse ja muude olekute kasutamiseks Tailwindis kasutage eelmääratletud olekuklasse, nagu „hover” ja rakendage sellele mõningaid stiiliomadusi, nagu värvi muutmine, fookusrõnga loomine jne. Kuvamise utiliite kasutatakse skaleeritava väljundi esitamiseks. See kirjutis on näidanud meetodit hõljumise, fookuse ja muude olekute kasutamiseks Tailwindis.