• Oversettelse

Hei, kjære habravenn! I dag skal vi lære å lage volumetriske knapper CSS3! De er basert på Orman Clarks populære Freebie PSD for hans Premium Pixels-nettsted. Vi vil prøve å lage en kopi av disse knappene med bruker CSS med en minimumsmengde HTML-kode.

Trinn 1: Lag et HTML-dokument

Vi starter med å lage en ny HTML-dokument. Det vil være basert på HTML5 kjeleplate slik at vi har et enkelt utgangspunkt. Nå vil vi legge til en liste med lenker. Det er i grunnen det, takket være CSS3 for ikke å måtte bruke flere divs og spenn.
Vi vil tilordne en klasse "knapper" til hvert listeelement. Og siden Orman brukte forskjellige farger, vil vi tildele hver knapp sin egen farge som en klasse.

• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting
• nedlasting

Det er alt vi trenger på dette stadiet.

Steg 2: Grunnleggende CSS-regler

Før du kommer inn i gradienter, avrundede hjørner osv., er det noen grunnleggende regler du må passe på. Ikke noe spesielt, bare vanlig CSS2:

Ul ( listestil: ingen; ) a.knapp ( display: blokk; flyte: venstre; posisjon: relativ; høyde: 25px; bredde: 80px; margin: 0 10px 18px 0; tekstdekorasjon: ingen; font: 12px" Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; )
La oss nå bruke reglene for forskjellige farger. For eksempel for grå. Alle andre farger kan sees i demoen.
/* GRÅ */ .gray, .gray:hover ( farge: #555; border-bottom: 4px solid #b2b1b1; bakgrunn: #eee; .gray:hover ( bakgrunn: #e2e2e2; ) )
Du burde ende opp med noe slikt. Ser ganske solid ut, hvis det er 2008.

Trinn 3: Doble rammer!

Hvis du ser nøye på det endelige resultatet, vil du se at det er en tynn linje rundt omkretsen av hele knappen. For å oppnå denne effekten vil vi bruke pseudoelementer :før Og :etter.
a.button (display: blokk; flyte: venstre; posisjon: relativ; høyde: 25px; bredde: 80px; margin: 0 10px 18px 0; tekstdekorasjon: ingen; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; font-weight: bold; line-height: 25px; text-align: center; ) a.button:before, a.button:after ( innhold: ""; posisjon: absolutt; venstre: -1px; høyde: 25px; bredde: 80px; bunn: -1px; ) a.button:before ( høyde: 23px; bunn: -4px; border-top: 0; )
Ved å legge til farge ser knappene mye bedre ut.
/* GRÅ */ .grå, .grå:hover ( farge: #555; border-bottom: 4px solid #b2b1b1; bakgrunn: #eee; ) .gray:before, .gray:after ( kantlinje: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; ) .gray:hover (bakgrunn: #e2e2e2; )

Trinn 4: Litt CSS3-magi

La oss nå gå ned til selve CSS3-delen. La oss starte med avrundede hjørner:
a.button (display: blokk; flyte: venstre; posisjon: relativ; høyde: 25px; bredde: 80px; margin: 0 10px 18px 0; tekstdekorasjon: ingen; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; font-weight: bold; line-height: 25px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; )
Naturlige elementer :før Og :etter trenger også avrundede hjørner.
a.button:before, a.button:after ( innhold: ""; posisjon: absolutt; venstre: -1px; høyde: 25px; bredde: 80px; bunn: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px; ) a.button:before ( høyde: 23px; bottom: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px: boxf-bshadow #b; 0 1px 1px 0px #bfbfbf; )
Til slutt skal vi bruke gradienter, indre skygge og tekstskygge. For å unngå feil i IE6, la oss legge til state:visited.
/* GREY */ a.gray, a.gray:hover, a.gray:visited ( farge: #555; border-bottom: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; bakgrunn: #eee; bakgrunn: -webkit-gradient(lineær, venstre topp, venstre bunn, fra(#eee), til(#e2e2e2)); bakgrunn: -moz-linear-gradient(top, #eee, #e2e2e2); box-shadow: innfelt 1px 1px 0 #f5f5f5; ) .gray:before, .gray:after ( kantlinje: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; ) .gray:hover ( bakgrunn: #e2e2e2e2; bakgrunn: - gradient(lineær, venstre topp, venstre bunn, fra(#e2e2e2), til(#eee)); bakgrunn: -moz-linear-gradient(top, #e2e2e2, #eee); )
Sluttresultatet vårt er ikke så verst!

Trinn 5: Har vi glemt noe?

Orman inkluderte også den aktive tilstanden i designet sitt. Derfor må vi ganske enkelt legge det til i koden vår.
Vi plasserer denne delen av koden under reglene for de forskjellige fargene.
/* ACTIVE STATE */ a.button:active ( border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); ) a.button:active:before, a.button:active:after ( kantlinje: ingen; - webkit-box-shadow: ingen; -moz-box-shadow: ingen; box-shadow: ingen;)
Dette er hva vi får:

Trinn 6 (valgfritt): Gamle nettlesere

Så vi har laget noen fine CSS3-knapper som fungerer i det hele tatt moderne nettlesere. Men hva med Internet Explorer 8 og under. Disse nettleserne støtter ikke tekstskygger eller gradienter.
For å løse dette problemet kan vi bruke javascript bibliotek Modernizr, som kan oppdage om nettleseren din støtter CSS3 og HTML5. Biblioteket løser ikke problemet, det tilbyr bare en alternativ stil.
Først vil vi lage vår egen versjon av Modernizr for ikke å bære rundt på et stort javascript. Dette kan gjøres på deres hjemmeside. Når vi har satt inn javascript i dokumentet vårt, må vi definere reglene forskjellige klasser for en alternativ stil. Vi vil bruke bilder for nettlesere som ikke støtter border-radius og gradienter.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( bakgrunn: url(images/sprite.png) no-repeat 0 0px; høyde: 32px; width: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( bakgrunn: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( bakgrunn: url(images/sprite.png) no-repeat 0 -64px; bunn: 0; linjehøyde: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover ( background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( background-position-x: -164 piksler; ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turkis, .no- cssgradients a.turquoise:besøkt, .no-cssgradients a.turquoise:hover ( background-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px; ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover ( bakgrunnsposisjon-x: -574px; ) .no-cssgradients a.lilla, . no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover ( background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover ( background-position-x: -738px; ) .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a .button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button :before, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before , .no-generated content a.button:after ( kantlinje: 0; )

Konklusjon

På denne måten har vi noen fine CSS3-knapper for flere nettlesere. Dette kan virke som mye kode for 10 knapper, men det er bare en demonstrasjon av hva CSS3 kan og ikke kan. Du kan gjøre hva du vil med den! Jeg håper opplæringen min var nyttig, takk for oppmerksomheten!

Før vi ser på knappene, la oss se på innstillingene som er felles for dem alle.

HTML

For knapper vil bli brukt veldig enkel HTML kode:

Abonnere

CSS

Alle knappene vil også ha vanlige innstillinger for bildeteksten og velge bort lenker:

ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; farge: #fff; ) a ( farge: #fff; tekstdekorasjon: ingen; )

Vanligvis forventer brukeren en ganske myk effekt når han holder musen over en lenke eller knapp. Og i vårt tilfelle endrer knappen størrelse - den øker, og viser en ekstra melding.

Grunnleggende CSS-kode

Til å begynne med trenger vi bare å gi knappen en form og farge. Definer en høyde på 28px og en bredde på 115px, legg til marger og polstring, og gi også knappen en lys kant.

#button1 ( bakgrunn: #6292c2; kantlinje: 2px solid #eee; høyde: 28px; bredde: 115px; margin: 50px 0 0 50px; polstring: 0 0 0 7px; overløp: skjult; skjerm: blokk; )

CSS3-effekter

Noen liker det når enkel knapp akkompagnert av ganske mye CSS-kode. I denne seksjonen Her er flere CSS3-stiler for knappen vår. Du kan klare deg uten dem, men de gir knappen et mer moderne utseende.

Rund hjørnene på rammen og legg til en gradient. Dette bruker et lite triks med en mørk gradient som samhandler med hvilken som helst bakgrunnsfarge.

/*Avrundede hjørner*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS-animasjon

La oss nå installere CSS-overgang. Animasjonen vil bli brukt for eventuelle eiendomsendringer og vil vare i et halvt sekund.

Mus over

Alt som gjenstår er å legge til en stil for å utvide knappen når du holder musen over den. Knappen må være 230 px bred for å vise hele meldingen.

#button1:hover (bredde: 230px;)

Enkel endring av fargetone

Veldig enkelt og populært CSS-effekt for knappen. Når du holder musepekeren, endres fargetonen i bakgrunnsfargen jevnt.

Grunnleggende CSS-kode

CSS-koden er veldig lik det forrige eksempelet. En annen bakgrunnsfarge er brukt og formen er litt endret. Den sentrerer også teksten og setter linjehøyden for knappen slik at vertikal sentrering skjer.

#button2 ( bakgrunn: #d11717; kantlinje: 2px solid #eee; høyde: 38px; width: 125px; margin: 50px 0 0 50px; overflow: skjult; display: blokk; tekstjustering: senter; linjehøyde: 38px; )

CSS3-effekter

Angi avrunding av hjørner, en gradient for bakgrunnen og en ekstra skygge. Ved å bruke rgba gjør vi skyggen svart og gjennomsiktig.

/*Avrundede hjørner*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS-animasjon

Animasjonen er praktisk talt ikke forskjellig fra forrige eksempel.

/*Transition*/ -webkit-transition: Alle 0.5s letthet; -moz-overgang: Alle 0.5s letthet; -o-overgang: Alle 0.5s letthet; -ms-overgang: Alle 0.5s letthet; overgang: Alle 0,5s letthet;

Mus over

Når du holder musepekeren, vil en annen bakgrunnsfarge angis. Prøv å velge et lysere fargealternativ i Photoshop for en flott effekt.

#button2:hover ( bakgrunnsfarge: #ff3434; )

Denne effekten kan være ganske imponerende avhengig av valg av bakgrunnsbilde. Demoen bruker en ubestemmelig bakgrunn og effekten ser ubestemmelig ut. Prøv å bruke et annet bilde, og effekten kan være fantastisk.

Grunnleggende CSS-kode

Hoveddelen av koden er den samme som de foregående eksemplene. Vær oppmerksom på hva vi bruker bakgrunnsbilde. Startposisjon bakgrunnen er satt til "0 0". Når du holder markøren, skifter posisjonen vertikalt.

#button3 ( bakgrunn: #d11717 url("bkg-1.jpg"); bakgrunnsposisjon: 0 0; tekstskygge: 0px 2px 0px rgba(0, 0, 0, 0.3); skriftstørrelse: 22px; høyde : 58px; bredde: 155px; margin: 50px 0 0 50px; overflyt: skjult; display: blokk; tekstjustering: senter; linjehøyde: 58px; )

CSS3-effekter

I i dette eksemplet det er ikke noe spesielt - avrundede hjørner og skygger.

/*Avrundede hjørner*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kantradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS-animasjon

Animasjonen for denne saken varer lenger for å skape en jevn og interessant effekt.

/*Transition*/ -webkit-transition: Alle 0.8s letthet; -moz-overgang: Alle 0.8s letthet; -o-overgang: Alle 0.8s letthet; -ms-overgang: Alle 0.8s letthet; overgang: Alle 0.8s letthet;

Mus over

Nå er det på tide å flytte bakgrunnsbildet. Utgangsposisjonen var "0 0". Sett den andre parameteren til 150px. For å skifte horisontalt, må du endre den første parameteren.

#button3:hover (bakgrunnsposisjon: 0px 150px;)

Simulering av 3D-knapptrykk

Det siste eksemplet i leksjonen vår handler om den populære 3D-metoden for å simulere et knappetrykk når du holder musepekeren over den. Animasjonen for denne saken er så enkel at den ikke engang krever en CSS-overgang. Men sluttresultatet er ganske imponerende.

Grunnleggende CSS-kode

CSS-kode for knappen vår.

#button4 (bakgrunn: #5c5c5c; tekstskygge: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; høyde: 58px; bredde: 155px; margin: 50px 0 0 50px 0 0 overflow: hidden ; display: block; text-align: center; line-height: 58px; )

CSS3-effekter

I i dette tilfellet CSS3 er ikke lenger et fint alternativ. For å oppnå effekten kreves det skygger og en gradient. En skarp skygge skaper utseendet til en 3D-knapp.

/*Avrundede hjørner*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kantradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Mus over

I dette tilfellet har vi den største svevedelen. Lengden på skyggen reduseres og blanding lages ved å bruke margene mørk sone. Alt sammen skaper en illusjon av å trykke på en knapp. Å snu gradienten forsterker effekten.

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ bakgrunnsbilde: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: -moz-linear-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); bakgrunnsbilde: -o-lineær-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: -ms-lineær-gradient( bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: lineær-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Før vi ser på knappene, la oss se på innstillingene som er felles for dem alle.

HTML

Knappene vil bruke veldig enkel HTML-kode:

Abonnere

CSS

Alle knappene vil også ha vanlige innstillinger for bildeteksten og velge bort lenker:

ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; farge: #fff; ) a ( farge: #fff; tekstdekorasjon: ingen; )

Vanligvis forventer brukeren en ganske myk effekt når han holder musen over en lenke eller knapp. Og i vårt tilfelle endrer knappen størrelse - den øker, og viser en ekstra melding.

Grunnleggende CSS-kode

Til å begynne med trenger vi bare å gi knappen en form og farge. Definer en høyde på 28px og en bredde på 115px, legg til marger og polstring, og gi også knappen en lys kant.

#button1 ( bakgrunn: #6292c2; kantlinje: 2px solid #eee; høyde: 28px; bredde: 115px; margin: 50px 0 0 50px; polstring: 0 0 0 7px; overløp: skjult; skjerm: blokk; )

CSS3-effekter

Noen liker det når en enkel knapp er ledsaget av ganske mye CSS-kode. Denne delen inneholder flere CSS3-stiler for knappen vår. Du kan klare deg uten dem, men de gir knappen et mer moderne utseende.

Rund hjørnene på rammen og legg til en gradient. Dette bruker et lite triks med en mørk gradient som samhandler med hvilken som helst bakgrunnsfarge.

/*Avrundede hjørner*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS-animasjon

La oss nå sette opp CSS-overgangen. Animasjonen vil bli brukt for eventuelle eiendomsendringer og vil vare i et halvt sekund.

Mus over

Alt som gjenstår er å legge til en stil for å utvide knappen når du holder musen over den. Knappen må være 230 px bred for å vise hele meldingen.

#button1:hover (bredde: 230px;)

Enkel endring av fargetone

En veldig enkel og populær CSS-effekt for en knapp. Når du holder musepekeren, endres fargetonen i bakgrunnsfargen jevnt.

Grunnleggende CSS-kode

CSS-koden er veldig lik det forrige eksempelet. En annen bakgrunnsfarge er brukt og formen er litt endret. Den sentrerer også teksten og setter linjehøyden for knappen slik at vertikal sentrering skjer.

#button2 ( bakgrunn: #d11717; kantlinje: 2px solid #eee; høyde: 38px; width: 125px; margin: 50px 0 0 50px; overflow: skjult; display: blokk; tekstjustering: senter; linjehøyde: 38px; )

CSS3-effekter

Angi avrunding av hjørner, en gradient for bakgrunnen og en ekstra skygge. Ved å bruke rgba gjør vi skyggen svart og gjennomsiktig.

/*Avrundede hjørner*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS-animasjon

Animasjonen er praktisk talt ikke forskjellig fra forrige eksempel.

/*Transition*/ -webkit-transition: Alle 0.5s letthet; -moz-overgang: Alle 0.5s letthet; -o-overgang: Alle 0.5s letthet; -ms-overgang: Alle 0.5s letthet; overgang: Alle 0,5s letthet;

Mus over

Når du holder musepekeren, vil en annen bakgrunnsfarge angis. Prøv å velge et lysere fargealternativ i Photoshop for en flott effekt.

#button2:hover ( bakgrunnsfarge: #ff3434; )

Denne effekten kan være ganske imponerende avhengig av valg av bakgrunnsbilde. Demoen bruker en ubestemmelig bakgrunn og effekten ser ubestemmelig ut. Prøv å bruke et annet bilde, og effekten kan være fantastisk.

Grunnleggende CSS-kode

Hoveddelen av koden er den samme som de foregående eksemplene. Vær oppmerksom på at vi bruker et bakgrunnsbilde. Den opprinnelige bakgrunnsposisjonen er satt til "0 0". Når du holder markøren, skifter posisjonen vertikalt.

#button3 ( bakgrunn: #d11717 url("bkg-1.jpg"); bakgrunnsposisjon: 0 0; tekstskygge: 0px 2px 0px rgba(0, 0, 0, 0.3); skriftstørrelse: 22px; høyde : 58px; bredde: 155px; margin: 50px 0 0 50px; overflyt: skjult; display: blokk; tekstjustering: senter; linjehøyde: 58px; )

CSS3-effekter

Det er ikke noe spesielt i dette eksemplet - avrundede hjørner og skygger.

/*Avrundede hjørner*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kantradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS-animasjon

Animasjonen for denne saken varer lenger for å skape en jevn og interessant effekt.

/*Transition*/ -webkit-transition: Alle 0.8s letthet; -moz-overgang: Alle 0.8s letthet; -o-overgang: Alle 0.8s letthet; -ms-overgang: Alle 0.8s letthet; overgang: Alle 0.8s letthet;

Mus over

Nå er det på tide å flytte bakgrunnsbildet. Utgangsposisjonen var "0 0". Sett den andre parameteren til 150px. For å skifte horisontalt, må du endre den første parameteren.

#button3:hover (bakgrunnsposisjon: 0px 150px;)

Simulering av 3D-knapptrykk

Det siste eksemplet i leksjonen vår handler om den populære 3D-metoden for å simulere et knappetrykk når du holder musepekeren over den. Animasjonen for denne saken er så enkel at den ikke engang krever en CSS-overgang. Men sluttresultatet er ganske imponerende.

Grunnleggende CSS-kode

CSS-kode for knappen vår.

#button4 (bakgrunn: #5c5c5c; tekstskygge: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; høyde: 58px; bredde: 155px; margin: 50px 0 0 50px 0 0 overflow: hidden ; display: block; text-align: center; line-height: 58px; )

CSS3-effekter

I dette tilfellet slutter CSS3 å være et fint alternativ. For å oppnå effekten kreves det skygger og en gradient. En skarp skygge skaper utseendet til en 3D-knapp.

/*Avrundede hjørner*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; kantradius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ bakgrunnsbilde: -webkit-lineær-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -o-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: -ms-lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bakgrunnsbilde: lineær-gradient(topp, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Mus over

I dette tilfellet har vi den største svevedelen. Lengden på skyggen reduseres og margene brukes til å lage en blanding av det mørke området. Alt sammen skaper en illusjon av å trykke på en knapp. Å snu gradienten forsterker effekten.

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ bakgrunnsbilde: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: -moz-linear-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); bakgrunnsbilde: -o-lineær-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: -ms-lineær-gradient( bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bakgrunnsbilde: lineær-gradient(bunn, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Vlad Merzhevich

Standardknapper opprettet via tag eller , ser bra ut, selvfølgelig, men å prøve å endre utseendet gjennom stiler fører til et forferdelig resultat. Knappene er et nikk til grensesnittene for ti år siden med deres vinklethet (fig. 1). Selvfølgelig oppstår en slik metamorfose bare når du bruker bakgrunns- og kantegenskapene, med andre ord kan du ikke endre bakgrunnsfargen på knappen og kanten rundt den.

Ris. 1. Original og modifisert knapp

For å radikalt endre utseendet til en knapp, kan du bruke bilder, men sammenlignet med CSS-funksjoner 3 dette alternativet virker nå hjemmelaget.

Jeg tar den originale knappen i nettleseren som grunnlag, som inneholder en lineær vertikal gradient og avrundede kanter.

Den enkleste måten er å runde hjørnene, som vi bruker grense-radius eiendom, og gir den ønsket avrundingsradius. Som vanlig fungerer det ikke i alle nettlesere, så du må legge til fult sett. Resultatet er følgende.

Moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */

Type knapper i forskjellige nettlesere vist i fig. 2.

Ris. 2. Knapper med avrundede hjørner

Generelt er alt forventet. Gamle versjoner av IE støtter ikke CSS 3, de andre lager riktig hjørnene jeg trenger. Av en eller annen grunn viser ikke Opera bakgrunnen som standard, slik andre nettlesere gjør, men Opera vil bli diskutert separat.

Nå er den morsomme delen å lage en vertikal lineær gradient. For å gjøre dette vil individuelle stiler for hver nettleser igjen bli brukt.

bakgrunn: -moz-lineær-gradient(#00BBD6, #EBFFFF);

En gradient spesifiserer et startpunkt, en gradientvinkel, en startfarge og en sluttfarge. I vårt tilfelle, når gradienten går vertikalt fra topp til bunn, er det nok å angi bare fargene; de ​​resterende parametrene brukes som standard.

Chrome, Safari

bakgrunn: -webkit-gradient(lineær, 0 0, 0 100%, fra(#00BBD6), til(#EBFFFF));

Her spesifiserer du typen gradient (lineær), startpunktet for å bruke gradienten (venstre øverste hjørne), sluttpunktet (nedre venstre hjørne), og start- og sluttfargene.

Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

IE-nettleseren går sine egne veier for ulike effekter bruker filteregenskapen, inkludert for gradienten. Her er alt mer trivielt, bare start- og sluttfargene til gradienten er skrevet.

Opera hviler; gradienter er ennå ikke implementert.

Vi samler alle egenskapene for nettlesere, hjørner og gradienter (eksempel 1).

Eksempel 1. Knapper med lineær gradient

Hjem-knapp

Ny knapp

Det ble ganske fint (fig. 3), men det er det også åpenbare forskjeller fra den originale knappen - den ser flat ut, som et brett.

Ris. 3. Knappevisning med gradient

Du kan igjen lage en knapp med ønsket form ved å bruke en gradient, "leke" med farger. To gradientverdier er ikke lenger nok; heldigvis tilbyr Firefox og Safari en løsning.

bakgrunn: -moz-lineær-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

I stedet for to verdier, sett inn ønsket antall farger, gradienten vil jevnt overgå fra en farge til en annen.

Chrome, Safari

bakgrunn: -webkit-gradient(lineær, 0 0, 0 100%, fra(#D0ECF4), til(#D0ECF4), color-stop(0.5, #5BC9E1));

Fargestopp-parameteren spesifiserer punktet der den nye fargen skal brukes. Verdien varierer fra 0 til 1.

Eksempel 2: Knapper med forbedret gradient

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Hjem-knapp

Ny knapp

Resultatet av eksemplet er vist i fig. 4.

Ris. 4. Gradient, hva slags gradient trengs

På samme måte kan du lage andre gradienter på en knapp eller et annet element (fig. 5). Men gjør dette selv, derfor har jeg lagt det til i verkstedet.

Ris. 5. Så forskjellige knapper

La meg oppsummere. Du kan lage en knapp med gradient og avrundede hjørner uten bilder. Det er imidlertid forvirring og vakling med nettlesere. Opera kan ikke fungere med gradienter i det hele tatt, i IE 9 er det en ubehagelig feil når man kombinerer en gradient med hjørner (fig. 6).

Ris. 6. Overlegg bakgrunn på hjørner i IE 9

Vel, for nå vil vi lage "skjønnheter" for nettleserne Firefox, Safari og Chrome.