CSS tarjoaa ohjelmoijille erilaisia puitteita dynaamisten verkkosivujen suunnitteluun. Se on miellyttävämpi, koska se tarjoaa kaikki tärkeät ominaisuudet ja työkalut yhdessä paikassa. Sinun ei siis tarvitse käyttää muita kehyksiä. CSS:n Tailwind-kehys on yleisimmin käytetty, koska se säästää käyttäjän aikaa liiallisen CSS:n kirjoittamiseen.
Tämä opas sisältää hover-, fokus- ja muiden tilojen käytön Tailwindissä.
Kuinka käyttää Hover-, Focus- ja muita tiloja Tailwindissä?
Web-sivuja suunniteltaessa on tarpeen lisätä dynaamisia ja houkuttelevia elementtejä vuorovaikutteisuuden ylläpitämiseksi käyttäjien kanssa. Tailwindin ominaisuuksia voidaan käyttää vuorovaikutteisten ja dynaamisten sivujen luomiseen ilman mukautetun CSS:n lisäämistä. Jotkut ominaisuudet ovat 'hover', 'focus' ja 'active', jotka auttavat lisäämään vetovoimaa malleihin.
Hover Variantin käyttäminen HTML:ssä
Hover-ominaisuutta käytetään HTML-elementin tyyliin, kun käyttäjä siirtää hiiren osoittimen tietyn elementin päälle. Se auttaa tarjoamaan sujuvan kokemuksen.
Vaihe 1: Käytä 'hover'-ominaisuutta HTML:ssä
Luo HTML-tiedosto ja käytä hover-ominaisuutta johonkin koodin elementtiin. Saat idean katsomalla alla olevaa koodia:
< kehon >
< div luokkaa = 'keskusta' >
< -painiketta luokkaa = 'bg-green-500 hover:bg-blue-500 text-white font-bold pyöristetty' >
Hover Me!
< / -painiketta >
< / div >
< / kehon >
Tässä koodissa:
- Painike nimeltä ' Hover Me! ” on luotu painiketunnisteen avulla.
- ' bg-green-500 ” asettaa painikkeen taustavärin vihreäksi.
- ' hover: bg-blue-500 ” muuttaa painikkeen värin vihreästä siniseksi, kun hiiri siirretään sen päälle.
- Painikkeen teksti on valkoista ' teksti-valkoinen ' ja ' font-bold ” tekee fontista lihavoitun.
- Painikkeen muoto on asetettu pyöreäksi ' pyöristetty ”.
Vaihe 2: Esikatsele tulos
Yllä olevan koodin suorittamisen jälkeen lopullinen näkymä näyttää tältä:
Voidaan nähdä, että painike vaihtaa väriä, kun hiiren osoitinta siirretään sen päälle.
Focus Variantin käyttäminen HTML:ssä
Focus-ominaisuutta käytetään HTML-elementtien tyyliin niin, että kun käyttäjä napsauttaa elementtiä, se korostetaan kiinnittääkseen käyttäjän huomion.
Vaihe 1: Käytä Focus-ominaisuutta HTML-koodissa
Luo HTML-tiedosto ja käytä fokusominaisuutta johonkin haluttuun elementtiin. Saadaksesi vaikutelman harkitse alla olevaa koodia:
< div >
< / div >
< / kehon >
Tässä koodissa:
- ' flex ”luokka luo joustoa.
- ' tasauskeskus ” perustelee sisällön kohdistuksen keskelle.
- ' esinekeskus ” luokka säätää objektit näytön keskelle.
- ' h-näyttö ” määrittää näytön koon kuvaportin mukaan.
- ' bg-blue-200 ” asettaa taustavärin siniseksi.
- Tekstityyppinen syöttöruutu luodaan.
- ' tarkennus: bg-green-300 ” muuttaa syöttöruudun värin vihreäksi, kun käyttäjä napsauttaa.
- ' w-64 ” asettaa leveydeksi 64 kuvapistettä.
- ' h-10 ” asettaa korkeudeksi 10 kuvapistettä.
- ' px-4 ” lisää 4px:n pehmusteen ylä- ja vasempaan reunaan.
- ' py-2 ” lisää 2px:n pehmusteen ylä- ja alaosaan.
Vaihe 2: Esikatsele kohdistusominaisuutta
Tallenna HTML-koodi ja avaa sen luoma verkkosivu. Siirrä sitten kohdistin syöttöruudun päälle ja napsauta sitä, niin alla oleva muutos tapahtuu:
Aktiivisen muunnelman käyttäminen HTML:ssä
Tätä ominaisuutta käytetään elementtien tyylittämiseen ehdolle, kun käyttäjä napauttaa elementtiä dynaamisesti. Aktiivinen tila on aikajakso kursorin aktivointivaiheesta sen vapautettuun tilaan.
Syntaksi
aktiivinen: { omaisuutta }Tietty CSS-ominaisuus otetaan käyttöön valittuun elementtiin.
Vaihe 1: Käytä aktiivista versiota HTML-koodissa
Luo HTML-tiedosto ja käytä aktiivista ominaisuutta johonkin elementtiin, joka seuraavassa tapauksessa on painike:
< div luokkaa = 'flex justify-center items-center h-screen' >
< -painiketta luokkaa = 'bg-green-600 p-4 pyöristetty-md-siirtymä-muunnos kesto-400 muunnos aktiivinen:asteikko-110' >
Klikkaa MINUA!
< / -painiketta >
< / div >
< / kehon >
Tässä koodissa:
- ' bg-green-600 ” asettaa taustavärin vihreäksi.
- ' p-4 ” lisää 4 pikselin täytteen.
- ' pyöristetty-md ” tekee napin muodon pyöristetyksi.
- ' siirtymä-muunnos ' käytetään painikkeen muuntamiseen lyhyeksi ajaksi, joka asetetaan ' kesto-400 muunnos ”.
- ' aktiivinen:asteikko-110 ” muuttaa painikkeen suuremmaksi.
Vaihe 2: Esikatsele tulos
Tallenna yllä oleva koodi HTML-tiedostoon ja esikatsele sen luomaa verkkosivua. Verkkosivu näyttää tältä:
Voidaan nähdä, että painikkeen koko kasvaa, kun hiiri pitää sitä ja heti kun se vapautetaan, se palaa alkutilaansa.
Johtopäätös
Jos haluat käyttää leijuntaa, tarkennusta ja muita tiloja Tailwindissä, käytä ennalta määritettyjä tilaluokkia, kuten 'hover', ja käytä siihen joitain tyyliominaisuuksia, kuten värin vaihtamista, tarkennusrenkaan luomista ja niin edelleen. Näyttöapuohjelmia käytetään esittämään skaalautuva tulos. Tämä kirjoitus on osoittanut menetelmän käyttää hiiri-, tarkennus- ja muita tiloja Tailwindissä.