CSS -bryter

Bryteren i CSS brukes til å la brukeren velge mellom to tilstander: av og på. Vi skifter også bryteren til venstre eller høyre. Disse bryterne finner du på våre nettsteder, mobilapper og programvare. Brytere brukes når vi trenger å slå av eller på, eller når vi velger ja eller nei. Vi kan lage brytere med forskjellige former og størrelser i CSS.

Eksempel nr. 1:

Vi utvikler noen HTML -koder for å gjøre bryterne og style dem med CSS. Visual Studio -koden brukes til å demonstrere de presenterte eksemplene. Som et resultat åpner vi den nye filen og velger "HTML" som språket.Dette resulterer i produksjon av en HTML -fil. Deretter begynner vi å skrive en kode i filen som ble opprettet. Når vi er ferdige, lagrer vi koden med ".HTML ”Fil Extension. Etter det, i denne koden, designer vi en bryter som indikerer av eller på. Det gjør oss i stand til å slå på eller av bryteren. Nå går vi videre til CSS -koden for å gi denne bryteren med noen design.

Vi bruker egenskapen "tekst-align" for "kroppen". Så all kroppen til HTML er gjengitt på "sentrum" på siden. Vi endrer også "fargen" på overskriften til "grønt". Deretter styler vi “vekslingen”. Vi gjør dette ved å bruke "Veksle" og stylingegenskapene. "Posisjonen" for denne vekslingen er satt til "relativ". Vi bruker "inline-block" som "displayet". Dens "bredde" og "høyde" var på samme måte satt til henholdsvis "100px" og "52px". Denne vekslingens "bakgrunnsfarge" er "rød" og dens "grense-radius" er "30px", noe som indikerer at kantene er buede.

Deretter legger vi til en "grense" rundt denne vekslingsknappen med en bredde på "2px" og en farge "grå". Etter å ha stylet dette, bruker vi "After" -velgeren med denne "vekslingen". Som vi alle vet, må vi ha et "innhold når vi bruker" etter "-velgeren i CSS.”Til vi satte“ posisjonen ”til dette innholdet til“ absolutt ”og“ bredden ”og“ høyden ”til“ 50px ”hver. Denne gangen er "bakgrunnsfargen" satt til "grå".

For hver av dem setter vi i tillegg “toppen” og “venstre” til “1px”. Vi bruker "overgangen" på denne "0.5s ”veksling. Stylingen for "vekslingen: etter" er nå fullført. Vi bruker to egenskaper i de krøllete seler av “P” for å style avsnittet litt lenger. Vi oppdaterer nettopp avsnittets "font-family" til "Arial" og bruker "fontvekt" -egenskapen til "fet". Når denne vekslingen er sjekket, endrer vi "venstre" -egenskapen til "49px" slik at den beveger seg til "49px". Vi flytter også fargen til "grønn". Sett også "ingen" for "visningen" av "avkrysningsruten".

Bryteren er "av" og fargen er "rød" i dette skjermbildet. Nå har vi et følgende skjermbilde:

Bryteren er "på" og er farget "grønn" i det andre skjermbildet. Ordet "av" er trykt på venstre side av bryteren. Hvis vi vil slå den av, klikker vi bare på den og flytter den til høyre side.

Eksempel 2:

I dette eksemplet lager vi to brytere. Disse er forskjellige fra forrige bryter som vi opprettet i det første eksemplet. Vi tar to brytere her.

Vi styler kroppen ved å bruke de forskjellige egenskapene. Vi setter "kassestørrelsen" til "grenseboks" og bruker "font-family" -egenskapen og bruker "arial" -fonten til dette. Vi setter også størrelsen til "100%". Vi bruker "*" med "etter" og "før" -valget, så den velger alle elementene og bruker den gitte egenskapen for alle. Vi "arver" "kassestørrelsen". Og "polstring" og "margin" er begge satt til "0". Nå styler vi "midten" ved å bruke "display" -egenskapen som "flex". Vi bruker "sentrum" for både "Align-Item" og "Justify-Content". Vi setter "1M" -fontstørrelsen for "Padding-Top".

Deretter styler vi "rockeren" som er den første bryteren. "Displayet" for dette er "inline-block" og "posisjonen" er "relativ". "Fontstørrelsen" for den første bryteren er "2em", og det er å "fet" i sin "fontvekt". Den "tekst-align" er SE til "Center" og "Teksttransform" er satt til "store bokstaver". "Fargen" er satt til "grå". "Bredde" og "høyde" er satt til henholdsvis "7em" og "4EM". "Overstrømmen" er "skjult". “Border-Bottom” er “0.5em ”. Og twe satte den "hvite" fargen til "solid" type.

Deretter kommer "rocker-small" som er den andre knappen. For dette setter vi "fontstørrelsen" til "0.75M ”og dens“ margin ”i“ 1em ”. Vi bruker "før" -velgeren med vår første bryter "Rocker". Og legg "innholdet" fordi det er obligatorisk mens du bruker "før" og "etter" -velgeren. Deretter satte vi sin "posisjon" til "absolutt". Dens “topp” er satt til “0.5em ”. "Venstre", "høyre" og "bunn" er alle satt til "0". Dens "bakgrunn" er "grå", "grensen" er "hvit", bredden er "0.5em ”, og“ solid ”i type. "Bunnen av grensen" er "0".

Nå bruker vi “Rocker Input”. For dette setter vi "opacitet", "bredde" og "høyde" til "0". Nå styler vi “Switch-Left” og “Switch-Right” i de samme krøllete seler. Vi satte "markøren" til "pekeren" og "posisjonen" er "absolutt". "Displayet" vi setter er "flex". "Align-elemen" og "Justify-Content" er begge satt til "sentrum". "Høyden" vi setter her er "2.5em "og" bredden "er" 3em ". Vi må sette "overgangen" for dette til "0.2s ”.

Nå bruker vi separat “Switch-Left” og “Switch-Right” der vi bruker “Transform” -egenskapen. For dette satte vi først "høyden", "bredden", "venstre" og "bunn" til "2.4em ”,“ 2.75M ”,“ 0.85M ”og“ 0.4em ”, henholdsvis. Vi legger "bakgrunnsfargen" til "#DDD". Og vi bruker "transformasjon" -egenskapen og "roter" den til "15deg" og "skjev" den til "15deg". Nå har vi "Switch-høyre" og designer dette ved å sette "riktig" egenskapen til "0.5em ”og sett sin“ bunn ”til“ 0 ”. "Bakgrunnen" er satt til "rød". På den "røde" bakgrunnen setter vi den "hvite" egenskapen for skrifttypen "farge". Vi bruker "før" -velgeren med både "Switch-Left" og "Switch-Right". Så for denne "før" -velgeren bruker vi "innholdet". Dens "posisjon" er satt til "absolutt".

Så setter vi også den "bredden", "høyden" og "bunnen". "Bakgrunnsfargen" her er "#CCC" og vi bruker "Transform" -egenskapen og "Skewy (-65Deg)". Nå setter vi "venstre" -egenskapen til "-0.4EM ”inne ved å bruke“ før ”-velgeren med“ Switch-Left ”. Vi bruker også "før" -velgeren med "bryter-høyre" separat og setter "høyre" -egenskapen til "-0.375em ”. Dens "bakgrunnsfarge" er "gjennomsiktig" og vi bruker "transformasjonen" til "skeive" til "65deg".

Nå skaper vi en effekt når den er "sjekket". "Bakgrunnsfargen" er "gjennomsiktig" og bredden når den er sjekket er satt til "3.0833em ”. Deretter bruker vi "sjekket" med "Switch-Left" og "Switch-Right". Vi designer eller styler dette ved å legge til "bakgrunnsfargen" og font "farge" og sette dem som "#DDD" og "#888". Her er "bunnen" og "riktig" velgerne satt til "0.4em ”og“ 0.8em ”. Deretter bruker vi "transform" og "roter" peropertier og "skjev" det til "-15deg" for begge. Vi bruker "sjekket" -egenskapen med både "Switch-Left" og "Switch-Right". Og bruk "før" -velgeren inne i de krøllete seler og sett sin "bakgrunnsfarge" til "#CCCC". Deretter setter vi "fargen" på skriften til "hvit" når den er sjekket og "grå" før den blir sjekket.

Utgangen gjengir to brytere: Den første bryteren har av/på og den andre bryteren har ja/nei. I det første bildet kan du se at den første bryteren er "på" og fargen er "grønn" mens den andre bryteren er på "nei" og fargen er "rød".

I det andre bildet sjekker vi den første bryteren til “OFF” og den andre bryteren til “Ja”. Så den første bryteren vises "av" og "rød". Den andre bryteren er "ja" denne gangen, og den ser ut "grønn".

Konklusjon

Vi opprettet denne opplæringen for å vise deg hva en bryter er og hvordan du designer og stil en bryter i CSS. Som tidligere nevnt brukes bryteren til å velge mellom og på så vel som ja/nei. Vi så på de to forskjellige eksemplene så langt, og vi har gått gjennom alle egenskapene. Etter å ha eksperimentert med kodene i denne opplæringen, vil du kunne forstå hvordan brytere fungerer i CSS og hvordan du konstruerer brytere for nettstedet eller prosjektene dine med letthet.