CSS -vekslebryter
Eksempel 1
Vi vil skrive noen HTML -kode for å lage og style vekslebrytere i CSS. For å demonstrere de gitte eksemplene bruker vi Visual Studio Code. Som et resultat vil vi åpne den nye filen og velge språket "HTML", som følger med å lage en HTML -fil. Så begynner vi å skrive koden i filen som er opprettet her. Vi må lagre denne koden når den er ferdig, og ".HTML ”File Extension legges automatisk til filnavnet. Vi lager også litt tekst som vi ønsker å presentere med fet skrift, så vi bruker "”Og skriv linjen inni disse“”Åpne og lukkende tagger. Etter dette vil vi opprette en vekslebryter her i denne koden som representerer av eller på. Det vil tillate oss å slå av eller på bryteren. Nå beveger vi oss mot CSS -koden for å gi litt stil til denne vekslingsbryteren.
Først justerer vi alle kroppselementene ved å bruke "tekst-align" til "sentrum" og bruke denne egenskapen på "kroppen.”Endre“ fargen ”på overskriften til“ grønn ”for å gjøre den attraktiv. Nå må vi style “vekslingen.”Vi bruker“ Veksle ”og bruker deretter stylingegenskapene her. "Displayet" vi bruker her er "Inline-Block.”Vi setter også sin“ bredde ”og“ høyde ”til henholdsvis" 100px "og" 52px ", henholdsvis. "Bakgrunnsfargen" for denne vekslingen er "rød", og den.
Da setter vi også en "grense" rundt denne vekslingsknappen med "2px" bredde i "solid" type og også i "grå" farge. Etter å ha stylet dette, skal vi bruke "etter" -velgeren med denne "vekslingen", og som vi vet at vi må ha "innhold" når vi bruker denne "etter" -velgeren i CSS. Etter dette innholdet setter vi sin "posisjon" her til "absolutt", og "bredden" og "høyden" er "50px" hver. Denne gangen er "bakgrunnsfargen" grått.”Vi setter også dens“ topp ”og“ venstre ”til“ 1px ”for hver av dem. Vi bruker "overgangen" på denne vekslingen av “0.5s ”. Stylingen for "Veksling: etter" er fullført her, og vi vil style avsnittet litt ved å bruke to egenskaper inne i de krøllete selene til “P.”
Vi endrer bare "font-family" til "algerian" og deretter "fet" dette avsnittet ved å bruke egenskapen "Font-Weight". Vi setter "venstre" til "45px" slik at den beveger seg "45px" når denne vekslingen er sjekket. Og fargen endres til “grønn.”Sett også denne" visningen "av" avkrysningsruten "til" ingen.”
Vi viser også denne bryteren i utgangen nedenfor, og i den første utgangen kan du se at vi har to muligheter her i denne bryteren. I dette skjermbildet er bryteren "av", og fargen er "rød.”
I det andre skjermbildet er denne bryteren "på", og den er "grønn" i fargen. Aven er skrevet på høyre side av bryteren, så hvis vi vil slå av denne bryteren, så klikker vi på denne bryteren for å flytte den til høyre side til av denne bryteren.
Eksempel 2
I det andre eksemplet vil vi lage to forskjellige vekslingsbrytere. Vi oppretter to brytere som en bryter heter “Abonner”, og den andre bryteren heter “Newsletter” her. Da vil vi style disse bryterne i CSS -filen.
Vi styler "kroppen" til HTML, så vi setter dens "margin" og "polstring" til "0", og bakgrunnsfargen for dette er "svart", som her, "#151515" er koden for det svarte.”Vi setter Div, som heter“ Center ”, til“ Absolute ”“ Position ”-senteret, så alle elementene i denne diven vil gjengi i" sentrum "på siden. "Toppen" og "bunnen" av det absolutte posisjonssenteret er satt som "50px" for hver, og deretter bruker vi "Transform-Translate" -egenskapen til "(-50px, -50px)".
Når vi bruker alle disse, er alle elementene satt i sentrum vertikalt og horisontalt. Deretter styler vi “input [type = checkbox]” ved hjelp av dette. "Margin" vi bruker for dette er "10px" og "relativ" i "posisjon.”“ Bredden ”på denne avkrysningsruten er“ 120px ”og også“ 40px ”i høyden. Vi setter også dens "webkit-opptreden" til "ingen.”Vi bruker dens“ bakgrunn ”i“ Linear-Gradient ”-formen. "Omrisset" for dette er også "ingen", og for å lage kantene kurve, bruker vi "Border-Radius" -egenskapen her og setter den til "20px". Vi bruker "Box-Shadow" og setter verdien til "0 0 0 4px". Så styler vi avkrysningsruten når den sjekkes og setter sin "bakgrunn" til "lineær gradient", som er "0deg" og "oransje.”Vi bruker den samme“ bokseskyggen ”her som vi brukte ovenfor, og dette er for" nth-of-type (1) ". "Nth-of-type" er en velger for å velge ett eller flere elementer. Vi styler også avkrysningsruten for "nth-of-type (2)" og setter sin "bakgrunn" til "lineær-gradient" av "0deg" og "blå.”Vi styler også avkrysningsruten når den ikke er avkjørt. Så her bruker vi "før" -velgeren, og "etter" eller "før" -velgeren må ha et "innhold."" Posisjonen "vi setter her er" absolutt "og dens" toppen "er" 0 "og også den samme for" venstre.”Det er“ 80px ”i sin“ bredde ”og“ 40px ”i“ høyde.”Vi bruker igjen“ Linear-Gradient ”for“ Bakgrunnen.”Denne gangen bruker vi“ svart ”og“ grå ”farge. Vi bruker også "transform" -egenskapen og "skala" den til x, y som "0.98, 0.96 ”. Vi setter dens "overgang" -egenskap til "0.5s ”. "Venstre" er satt til "40px" før du blir sjekket. Vi bruker også "After" -velgeren og styler også dette.
Inne i dette "etter" -valget satte vi først "innholdet" og dets "posisjon" som "absolutt.”Dens“ topp ”sett som“ 50% - 2px ”og“ Venstre ”er“ 70px ”. Vi setter også dens "bredde" og "høyde" til "4px" hver. Vi setter "bakgrunn" og bruker "lineær gradient" her igjen. "50%" av "grense-radius" brukes her, så kantene vises i en kurveform. Egenskapen "overgang" er også satt til “0.5s, ”som brukes til å kontrollere en animasjonshastighet på 0.5 sek. I "After" -velgeren er "venstre" satt til "110px".
Vi ønsker å style overskriftene ved å bruke “H1” og bruke noen egenskaper her. "Margin" er "0", og "polstring" er også "0". Vi bruker "sans-serif" "font-family" for disse overskriftene. Juster også disse overskriftene til “sentrum.”Fontets“ farge ”på disse overskriftene er“ hvit ”og“ 16px ”i størrelse. Vi setter også topp- og bunnen "polstring" til "15px" og "0px" for venstre og høyre. Vi bruker "øvre sak" slik at overskriftsteksten blir konvertert til store bokstaver, og "bokstav-avstanden" er "4px" for alle overskrifter.
Vi har gitt to skjermbilder her som utdata. Den første utgangen viser før denne vekslingsbryteren er sjekket, og det andre skjermbildet er når vi sjekket begge vekslingsbryterne.
Konklusjon
Vi har presentert denne guiden for å forklare vippebryteren i CSS og hvordan du designer og styler vippebryteren i CSS. Vi har diskutert at vi bruker vekslingsbryteren når vi vil velge mellom av/på og ja/nei. Vi har undersøkt to koder her og har forklart alle egenskapene vi bruker i kodene våre i detalj. Etter å ha prøvd kodene i denne guiden, vil du enkelt lære hvordan disse vekslingsbryterne fungerer i CSS og hvordan du vil designe vekslebrytere på nettstedet eller prosjektene dine.