CSS3 opplæring Opprett en slank på / av-knapp
Bruk av en knapp er så langt den foretrukne måten å samhandle med elektroniske ting; slik som radio, TV, musikkspiller og til og med en smarttelefon som har en talekommando-funksjon, trenger fortsatt minst en eller to fysiske knapper.
Videre, i denne digitale tidsalderen, knapp har også utviklet seg i sin digitale form, noe som gjør den mer interaktiv, dynamisk og virkelig enkel å lage, sammenlignet med den fysiske knappen.
Så denne gangen skal vi lage en glatt og interaktiv knapp som er basert på denne flotte designen over på Dribbble ved hjelp av bare CSS.
Vel, la oss bare komme i gang.
HTML
Vi starter med knappen ved å plassere følgende markering på vårt HTML-dokument. Det er veldig enkelt, knappen vil være basert på et ankermerke, vi har også a span ved siden av den for å opprette indikatorlyset, og så pakkes de sammen i en HTML5 seksjon stikkord.
& # XF011;
Slik ser vår knapp ut i utgangspunktet.
Grunnleggende stilering
I denne delen begynner vi å jobbe på Styles.
Vi bruker først denne mørke bakgrunnen fra Subtle Pattern på kroppens dokument, og senterer seksjon. Da fjerner vi også prikket omriss på :fokus og :aktiv link.
kropp bakgrunn: url ('images / micro_carbon.png'); del margin: 150px auto 0; bredde: 75px; høyde: 95px; posisjon: relativ; tekstjustering: center; : aktiv,: fokus disposisjon: 0; Bruke egendefinert skrifttype
For knappens ikon bruker vi en egendefinert skrift fra Font Awesome i stedet for et bilde. På den måten kan ikonet enkelt være stilig og skaleres gjennom stilarket.
Last ned skrifttypen, lagre fontfiler (eot, woff, ttf og svg) i fonter mappe, og legg deretter inn følgende kode på stilarket ditt for å definere en ny skrifttypefamilie.
@ font-face font-family: "FontAwesome"; src: url ("skrifter / fontawesome-webfont.eot"); src: url ("fonter / fontawesome-webfont.eot? #iefix") format ('eot'), url ("fonter / fontawesome-webfont.woff") format ('woff'), url ("skrifter / fontawesome- webfont.ttf ") format ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); font-weight: normal; font-style: normal; 
De strøm ikon som vi trenger for denne knappen er representert i Unicode nummer F011; Hvis du ser nøye på HTML-merket ovenfor, har vi satt dette numeriske tegnet & # XF011; innenfor ankeretiketten, men siden vi ikke har definert skikken font-family I knappestilen skal ikonet ikke gjengis riktig.
Videre lesning: Unicode og HTML: Dokumentkarakterer
Styling av knappen
Først av alt, må vi definere egendefinert font-family for knappen.
Vår knapp vil være en sirkel, vi kan oppnå sirkel effekten ved hjelp av border-radius eiendom og sett verdien på minst halvparten av knappens bredde.
Siden bruker vi en skrift for ikonet, kan vi enkelt sette inn farge og legg til text-shadow for ikonet i stilarket også.
Deretter skal vi også lage en avfaset effekt for knappen. Denne effekten er ganske vanskelig. Først må vi søke bakgrunnsfarge: rgb (83,87,93); for knappens fargebase, legger vi opp til fire lag av box-skygger.
en font-family: "FontAwesome"; farge: rgb (37,37,37); tekstskygge: 0px 1px 1px rgba (250,250,250,0,1); skriftstørrelse: 32pt; skjerm: blokk; posisjon: relativ; tekst-dekorasjon: ingen; bakgrunnsfarge: rgb (83,87,93); boksskygge: 0px 3px 0px 0px rgb (34,34,34), / * 1ste skygge * / 0px 7px 10px 0px rgb (17,17,17), / * 1nde skygge * / innstikk 0px 1px 1px 0px rgba , 250, 250, .2), / * 3. Shadow * / innstikk 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. skygge * / bredde: 70px; høyde: 70px; grense: 0; border-radius: 35px; tekstjustering: center; linjehøyde: 79px;
Det er også en større sirkel på utsiden av knappen, og vi skal bruke :før pseudo-element for det heller enn å legge til ekstra oppslag.
a: før innhold: ""; bredde: 80px; høyde: 80px; skjerm: blokk; z-indeks: -2; posisjon: absolutt; bakgrunnsfarge: rgb (26,27,29); igjen: -5px; toppen: -2px; grense-radius: 40px; boksskygge: 0px 1px 0px 0px rgba (250,250,250,0,1), innspill 0px 1px 2px rgba (0, 0, 0, 0,5);
Videre lesning: CSS: før og: etter pseudo-elementer (Hongkiat.com)
Blinklys
Under knappen er det et lite lys for å angi strømmen på og av. Nedenfor gjelder vi rødt for lysets farge fordi strømmen er i utgangspunktet OFF, legger vi også til box-shadow å etterligne lysets lysende effekt.
a + span display: block; bredde: 8px; høyde: 8px; bakgrunnsfarge: rgb (226,0,0); boks-skygge: innsett 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); grense-radius: 4px; klare: begge; posisjon: absolutt; bunn: 0; igjen: 42%;
Effekten
På dette tidspunktet begynner vår knapp å se bra ut, og vi trenger bare å legge til noen effekter på den, for eksempel når knappen blir "klikket", vil vi at knappen skal se ut som den trykkes og holdes nede.
For å oppnå effekten, den første box-shadow i knappen vil nullstilles og stillingen blir senket litt. Vi må også justere de tre andre skyggernes intensiteter litt for å matche knappens posisjon.
a: aktiv boksskygge: 0px 0px 0px 0px rgb (34,34,34), / * 1ste skygge * / 0px 3px 7px 0px rgb (17,17,17), / * 2. skygge * / innstikk 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. Skygge * / innstikk 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4. Skygge * / bakgrunnsfarge: rgb (83,87,93); topp: 3px;
Videre, når knappen har blitt klikket, skal den forbli presset ned og ikonet skal "skinne" for å indikere at strømmen er PÅ.
For å oppnå en slik effekt vil vi målrette på knappen ved hjelp av :mål pseudo-klasse, endre deretter ikonets farge til hvit og legg til en text-shadow med hvit farge også.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), innspill 0px 1px 1px 0px rgba (250, 250, 250, .2) , sett inn 0px -10px 35px 5px rgba (0, 0, 0, .5); bakgrunnsfarge: rgb (83,87,93); topp: 3px; farge: #fff; tekstskygge: 0px 0px 3px rgb (250,250,250);
Videre lesning: Bruke: mål pseudo-klasse
Vi må også justere box-shadow i sirkelen utenfor knappen, som følger.
a: aktiv: før, a: mål: før topp: -5px; bakgrunnsfarge: rgb (26,27,29); boksskygge: 0px 1px 0px 0px rgba (250,250,250,0,1), innspill 0px 1px 2px rgba (0, 0, 0, 0,5);
Lysindikatoren vil vende fra standard rød til grønn farge for å understreke at strømmen er PÅ allerede.
a: target + span box-shadow: input 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); bakgrunnsfarge: rgb (135 187,83);
Overgangseffekt
Til slutt, for å få knappens effekt å løpe jevnt, vil vi også bruke følgende overgangseffekt.
Denne delen nedenfor vil spesifikt legge til overgangen til farge eiendom og text-shadow til 350 ms i ankerelementet.
en overgang: farge 350ms, tekstskygge 350ms; -overgang: farge 350ms, tekstskygge 350ms; -moz-overgang: farge 350ms, tekstskygge 350ms; -webkit-overgang: farge 350ms, tekstskygge 350ms;
Denne andre delen nedenfor vil legge til overgangen for bakgrunnsfarge og box-shadow eiendom i lysindikatoren.
a: mål + span overgang: bakgrunnsfarge 350ms, bokseskygge 700ms; -o-overgang: bakgrunnsfarge 350ms, bokseskygge 700ms; -moz-overgang: bakgrunnsfarge 350ms, bokseskygge 700ms; -webkit-overgang: bakgrunnsfarge 350ms, boksskygge 700ms;
Endelig resultat
Vi har kommet gjennom alle stilene vi trenger, nå kan du se det endelige resultatet live, samt laste ned kildefilen fra linkene under.
- Demo
- Last ned kilde
Bonus: Slik slår du av
Her kommer bonusen. Hvis du har prøvd knappen fra ovennevnte demo, har du lagt merke til at knappen kun kan klikkes en gang, en som skal slå den på, så hvordan slår vi den av?.
Dessverre må vi gjøre det med jQuery, men det er også veldig enkelt. Nedenfor er all jQuery-koden vi trenger.
$ (dokument) .ready (funksjon () $ ('# knapp'). klikk (funksjon () $ (dette) .toggleClass ('on'););); Utsnittet ovenfor legger til klasse ON i ankeret, og vi brukte toggleClass funksjonen fra jQuery for å legge til den. Så når #knapp er klikket på, vil jQuery sjekke om klassen ON har blitt lagt til eller ikke: når ikke, vil jQuery legge til klassen, og hvis den er lagt til, vil jQuery fjerne klassen.
Merk: Ikke glem å inkludere jQuery-biblioteket.
Nå må vi endre stilen litt. Bare erstatt alle :mål pseudo-element med .på klassevalg, som følger:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), innspill 0px 1px 1px 0px rgba (250, 250, 250, .2) , sett inn 0px -10px 35px 5px rgba (0, 0, 0, .5); bakgrunnsfarge: rgb (83,87,93); topp: 3px; farge: #fff; tekstskygge: 0px 0px 3px rgb (250,250,250); a: aktiv: før, a.on: før topp: -5px; bakgrunnsfarge: rgb (26,27,29); boksskygge: 0px 1px 0px 0px rgba (250,250,250,0,1), innspill 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: insert 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); bakgrunnsfarge: rgb (135 187,83);
Til slutt, la oss prøve det i nettleseren.
- Demo
- Last ned kilde
