Lag egendefinerte knapper med CSS3

Oppretting av tilpassede knapper som inkluderer slippskygger, graderinger, tekstskygger, kantradius, separat sveve og aktive stylingeffekter kan alle oppnås med CSS3 stylingegenskaper. Effektene er ganske imponerende, og du kan gjøre alt dette i tekstredigeringsprogrammet - ingen grunn til å bruke den grafiske bilderedigereren. Denne korte demonstrasjonen vil lede deg gjennom trinnene for å style knappene dine med to eksempler på navigasjonsseksjoner.

HTML

Det er ikke mye i navigasjonseksemplene våre innen HTML-koden, bare to seksjoner som refererer til henholdsvis separate graderinger og knappestiler. De to seksjonene kaller hver en unik ID til en bakgrunnsgradient, og hver ankerreferanse i hver seksjon kaller en klasse til knappestilen som er tilordnet for den aktuelle seksjonen. HTML-kodebiten vises nedenfor.

Knappestil "A"

 Hjem 
 bloggen 
 tjenester 
 Om 

Knappestil "B"

 Hjem 
 Om 
 Nyheter 
 Logg Inn 
 Katalog 

Legg merke til at hver href = "#" dette er en dummy-kobling, noe som betyr at for demonstrasjonsformål når du klikker på lenken / knappen, vil den bare forbli på den gjeldende siden. Du kan legge til din egen kobling etter behov hvis du bruker denne koden til dine egne formål (dvs. href = "web / blogg" ). Som du vil se senere, bestemmer ankerteksten i HTML den visuelle teksten som vises på knappen - en annen fin funksjon som gjør det enkelt å duplisere og endre etter behov for ethvert prosjekt.

Uten å bruke noen stilarter i index.html-filen vår, ser det ut som figur A som vist i Chrome 20.0.1.

Figur A

CSS3 styling

La oss først legge til noen styling til de to individuelle knappestilene. Som du kan se fra HTML og det resulterende displayet, heter de "Stil A" og "Stil B". Vi vil style dem som klasser som heter .button_a og .button_b, og starter med en topp kantfarge og bakgrunnsfarge som vist i CSS-kodebiten nedenfor:

 / * Knappstil A * / 
 .button_a { 
 border-top: 1px solid # 96d1f8; 
 / * Gamle nettlesere * / 
 bakgrunn: # 65a9d7; 
 } 
 / * Knappstil B * / 
 .button_b { 
 border-top: 1px solid # ffb3fc; 
 / * Gamle nettlesere * / 
 bakgrunn: # d9b3ff 
Hvis du følger med, fortsett å oppdatere nettleseren din, og index.html får nå dette utseendet som vist i figur B.

Figur B

Fortsatt ikke mye å se på, men vi får satt grunnstiler; tverrleser-stilene kommer snart.

La oss deretter legge til litt tekstskygge, gi teksten en farge og skriftstørrelse, angi en fontfamilie, fjerne tekstdekorasjonen fra koblingene, legge til litt polstring og sett den vertikale justeringen til midten som vist i CSS-kodebitene under:

 Knappestil A 
 tekstskygge: rgba (0, 0, 0, .4) 1px 2px 1px; 
 farge: hvit; 
 skriftstørrelse: 18px; 
 font-familie: 'Lucida Grande', Helvetica, Arial, Sans-Serif; 
 tekstdekorasjon: ingen; 
 polstring: 7.5px 15px; 
 vertikal-justering: midten; 
 Knappestil B 
 tekstskygge: rgba (0, 0, 0, .5) 1px 2px 1px; 
 color: # E5E5E5; 
 skriftstørrelse: 18px; 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 font-variant: små-caps; 
 polstring: 5, 5px 15px; 
 tekstdekorasjon: ingen; 
 vertikal-justering: midten; 
Oppdater nettleseren din igjen, og index.html får nå dette utseendet som vist i figur C.

Figur C

La oss deretter legge til et lineært gradient bakgrunnslag til knappene, kalle krysskoblinger prefiks funksjonalitet, sammen med en grense radius, og en boks skygge ved hjelp av rgba farger og stopp for hver som vist i CSS3 kodebitene nedenfor:

 Knappestil A 
 / * Chrome, Safari4 + * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 3e779d), til (# 65a9d7)); 
 / * Chrome10 +, Safari5.1 + * / 
 bakgrunn: -webkit-lineær gradient (topp, # 3e779d, # 65a9d7); 
 / * FF3.6 + * / 
 bakgrunn: -moz-lineær gradient (topp, # 3e779d, # 65a9d7); 
 / * IE10 + * / 
 bakgrunn: -ms-lineær gradient (topp, # 3e779d, # 65a9d7); 
 / * Opera 11.10+ * / 
 bakgrunn: -o-lineær gradient (topp, # 3e779d, # 65a9d7); 
 / * Chrome, Safari4 + * / 
 -webkit-border-radius: 5px; 
 / * FF3.6 + * / 
 -moz-border-radius: 5px; 
 / * Gamle nettlesere * / 
 border-radius: 5px; 
 / * Chrome, Safari4 + * / 
 -webkit-box-skygge: rgba (0, 0, 0, 1) 1px 2px 1px; 
 / * FF3.6 + * / 
 -moz-box-skygge: rgba (0, 0, 0, 1) 1px 2px 1px; 
 / * Gamle nettlesere * / 
 boksskygge: rgba (0, 0, 0, 1) 1px 2px 1px; 
 Knappestil B 
 / * Chrome, Safari4 + * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# b366ff), til (# d9b3ff)); 
 / * Chrome10 +, Safari5.1 + * / 
 bakgrunn: -webkit-lineær gradient (topp, # b366ff, # d9b3ff); 
 / * FF3.6 + * / 
 bakgrunn: -moz-lineær gradient (topp, # b366ff, # d9b3ff); 
 / * IE10 + * / 
 bakgrunn: -ms-lineær gradient (topp, # b366ff, # d9b3ff); 
 / * Opera 11.10+ * / 
 bakgrunn: -o-lineær gradient (topp, # b366ff, # d9b3ff); 
 / * Chrome, Safari4 + * / 
 -webkit-border-radius: 7px; 
 / * FF3.6 + * / 
 -moz-border-radius: 7px; 
 / * Gamle nettlesere * / 
 border-radius: 7px; 
 / * Chrome, Safari4 + * / 
 -webkit-box-skygge: rgba (0, 0, 0, 1) 1px 2px 1px; 
 / * FF3.6 + * / 
 -moz-box-skygge: rgba (0, 0, 0, 1) 1px 2px 1px; 
Oppdater igjen, og indeksen.html får nå utseendet som vist i figur D.

Figur D

Knappene begynner å ta form nå. Deretter må vi legge til svevet og aktive pseudoklasse-stater i stilene våre for både A- og B-stilene som vist i CSS-kodebiten nedenfor:

 Knappestil A 
 / * Knappen A Hover * / 
 .button_a: hover { 
 border-top-color: # 28597a; 
 bakgrunn: # 28597a; 
 farge: #ccc; 
 } 
 / * Knapp A Aktiv * / 
 .button_a: aktiv { 
 border-top-color: # 1b435e; 
 bakgrunn: # 1b435e; 
 } 
 Knappestil B 
 / * Knapp B Hover * / 
 .button_b: hover { 
 border-top-color: # 6b248f; 
 bakgrunn: # 6b248f; 
 farge: #ccc; 
 } 
 / * Knapp B Aktiv * / 
 .button_b: aktiv { 
 kant-topp-farge: # 4c1a65; 
 bakgrunn: # 4c1a65; 
 } 
Nok en oppdatering, og indeksen.html får nå utseendet når en knapp er på svevet, som vist i figur E.

Figur E

La oss deretter style våre seksjoner med en bakgrunnsgradient for å hjelpe med å skille knappene fra resten av siden. CSS3 inkluderer prefikser på tvers av nettlesere for grensradius, lineære graderinger, graderinger og DXImageTransform for håndtering av Internet Explorer.

 / * Gradient bakgrunnsstil A * / 
 #bg_grad_a { 
 høyde: 40px; 
 bredde: 360px; 
 padding-top: 20 piksler; 
 padding-venstre: 30px; 
 / * Chrome, Safari4 + * / 
 -webkit-border-radius: 15px; 
 / * FF3.6 + * / 
 -moz-border-radius: 15px; 
 / * Gamle nettlesere * / 
 grense-radius: 15px; 
 bakgrunn: rgb (38, 38, 38); 
 / * FF3.6 + * / 
 bakgrunn: -moz-lineær gradient (topp, rgba (38, 38, 38, 1) 0%, 
 rgba (42, 42, 42, 1) 2%, 
 rgba (43, 43, 43, 1) 4%, 
 rgba (43, 43, 43, 1) 96%, 
 rgba (42, 42, 42, 1) 98%, 
 rgba (38, 38, 38, 1) 100%); 
 / * Chrome, Safari4 + * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, 
 farge-stop (0%, RGBA (38, 38, 38, 1)), 
 farge-stop (2%, RGBA (42, 42, 42, 1)), 
 farge-stop (4%, RGBA (43, 43, 43, 1)), 
 farge-stop (96%, RGBA (43, 43, 43, 1)), 
 farge-stop (98%, RGBA (42, 42, 42, 1)), 
 farge-stop (100%, RGBA (38, 38, 38, 1))); 
 / * Chrome10 +, Safari5.1 + * / 
 bakgrunn: -webkit-lineær gradient (topp, rgba (38, 38, 38, 1) 0%, 
 rgba (42, 42, 42, 1) 2%, rgba (43, 43, 43, 1) 4%, 
 rgba (43, 43, 43, 1) 96%, rgba (42, 42, 42, 1) 98%, 
 rgba (38, 38, 38, 1) 100%); 
 / * Opera 11.10+ * / 
 bakgrunn: -o-lineær gradient (topp, rgba (38, 38, 38, 1) 0%, 
 rgba (42, 42, 42, 1) 2%, rgba (43, 43, 43, 1) 4%, 
 rgba (43, 43, 43, 1) 96%, rgba (42, 42, 42, 1) 98%, 
 rgba (38, 38, 38, 1) 100%); 
 / * IE10 + * / 
 bakgrunn: -ms-lineær gradient (topp, rgba (38, 38, 38, 1) 0%, 
 rgba (42, 42, 42, 1) 2%, rgba (43, 43, 43, 1) 4%, 
 rgba (43, 43, 43, 1) 96%, 
 rgba (42, 42, 42, 1) 98%, 
 rgba (38, 38, 38, 1) 100%); 
 / * W3C * / 
 bakgrunn: lineær gradient (til bunn, rgba (38, 38, 38, 1) 0%, 
 rgba (42, 42, 42, 1) 2%, rgba (43, 43, 43, 1) 4%, 
 rgba (43, 43, 43, 1) 96%, 
 rgba (42, 42, 42, 1) 98%, 
 rgba (38, 38, 38, 1) 100%); 
 / * IE6-9 * / 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 262626', andColorstr = '# 262626', GradientType = 0); 
 } 
 / * Gradient bakgrunnsstil B * / 
 #bg_grad_b { 
 høyde: 50px; 
 bredde: 410px; 
 padding-top: 15px; 
 padding-venstre: 30px; 
 / * Chrome, Safari4 + * / 
 -webkit-border-radius: 15px; 
 / * FF3.6 + * / 
 -moz-border-radius: 15px; 
 / * Gamle nettlesere * / 
 grense-radius: 15px; 
 / * FF3.6 + * / 
 bakgrunn: -moz-lineær gradient (topp, rgba (0, 0, 0, 0, 65) 0%, rgba (0, 0, 0, 0) 100%); 
 / * Chrome, Safari4 + * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, color-stop (0%, rgba (0, 0, 0, 0, 65)), color-stop (100%, rgba (0, 0, 0, 0) ))); 
 / * Chrome10 +, Safari5.1 + * / 
 bakgrunn: -webkit-lineær gradient (topp, rgba (0, 0, 0, 0, 65) 0%, rgba (0, 0, 0, 0) 100%); 
 / * Opera 11.10+ * / 
 bakgrunn: -o-lineær gradient (topp, rgba (0, 0, 0, 0, 65) 0%, rgba (0, 0, 0, 0) 100%); 
 / * IE10 + * / 
 bakgrunn: -ms-lineær gradient (topp, rgba (0, 0, 0, 0, 65) 0%, rgba (0, 0, 0, 0) 100%); 
 / * W3C * / 
 bakgrunn: lineær gradient (til bunn, rgba (0, 0, 0, 0, 65) 0%, rgba (0, 0, 0, 0) 100%); 
 / * IE6-9 * / 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# a6000000', endColorstr = '# 00000000', GradientType = 0); 
 } 
Oppdater nettleseren vår igjen, og indeksen.html får nå utseendet når en knapp er på svevet, som vist i figur F.

Figur F

Å style knappene for å passe dine egne behov og krav kan bety bare å lage et nytt fargeskjema eller justere polstring, høyde og bredde avhengig av websidene. Denne demonstrasjonen gir deg et godt utgangspunkt for å lage dine egne tilpassede knapper. HTML- og CSS-filene blir gitt for deg i denne nedlastingen.

© Copyright 2020 | mobilegn.com