CSS: Legge til tekst på knapper

I et tidligere innlegg, "Legge til knappelementer til en trådramme, " nevnte jeg at kraften til CSS er mer enn summen av delene. Ville det ikke være fint å bare lage noen få bakgrunnsbilder og være ferdig med det? Dette er grunnen til at jeg liker å lage skiver for bakgrunnsknapper og utnytte kraften til CSS for å vise teksten. Den samme bakgrunnsskiven med knappene kan brukes om og om igjen med bare en enkel CSS-kode. Merk: Alle filene som brukes i denne opplæringen er tilgjengelige i nedlastingen.

Merk : For alle filene som er inkludert i dette tipset, se Last ned lenke på slutten av innlegget.

Skive knapper for bakgrunn

Vi vil bruke skiver av to knapper for å utfylle bakgrunnsstiler som vil bli brukt i vår CSS-kode. Vær oppmerksom på at noen bilder er zoomet inn til 500% for å se og detaljere.

I forrige innlegg opprettet jeg knappen Button_02.psd (se nedlastingslenke nedenfor); vi åpner denne filen i Photoshop og velger beskjæringsverktøyet. Bruk beskjæringsverktøyet til å velge et avsnitt fra midten av knappen som har en bredde på 20x og hele høyden (20px høyde) som vist i figur A.

Figur A

Velg deretter enter, så har du 20 px bredde og 25 px høydeskive som vist i figur B.

Figur B

Lagre skiven som button_bg_slice.jpg , og gjør deretter de samme prosessene for knappen Button_Over_02.psd og lagre den som button_bg_slice_over.jpg. De resulterende knappene vises i figurene C og D nedenfor.

CSS og HTML

Nå som bakgrunnsknappbildene er opprettet, la oss gå videre og merke opp CSS-koden vår og deretter demonstrere det i en enkel navigasjonsoverskrift i noen HTML-kode. Her er tekststiler CSS i Dreamweaver vist i figur E :

Figur E

(Klikk for å forstørre.)

Den komplette filen styles_text.css er tilgjengelig er i nedlastingslenken nedenfor. Så her er hovedpoengene til det jeg har dekket i Text-Styles CSS:

  1. Opprettet en lenke-stil og en: sveve-stil med tekstdekorasjoner og farger.
  2. Tilbakestill

    styling slik at marginene blir fikset fra standardverdiene.

  3. Opprettet knappeklassen. Legg merke til at det er definert som "a.button", eller med andre ord, alle tagger med class = "-knappen" i HTML. Det er en god sjanse for at det senere kan være en annen knappeklasse for innganger, så på denne måten vil de ikke utilsiktet samvirke, og det er derfor det ikke bare er definert en ".knapp". I knappeklassen vil du se polstring, farge, bakgrunnsbilde, som gjentas, og en linjehøydeattributt for å adressere noen IE-implementeringer som kan kutte av knappen. Det er også "a.button: hover" -stil med bakgrunnsbildebildet inkludert.

I den komplette CSS-filen vil du også legge merke til at jeg har lagt til "ul # navigation" og "ul # navigation li"-ID-er, slik at den uordnede listen i HTML vil vises på linje og jeg har lagt til posisjonering, marginer og polstring. Jeg har også adressert overskriften med litt polstring også.

HTML-en for eksempelnavigasjonen ser ut som figur F :

Og de resulterende knappene i HTML-filen vises i figur G :

HTML-filen ButtonText.html er tilgjengelig for nedlasting (se fil for nedlasting).

Navigasjonshodet med tjenesteknappen holder over aktivert vises over.

Disse knappene bruker et enkelt fargeskjema i gråtoner, et utgangspunkt, og du kan justere fargene til dine behov, så vel som CSS.

Det fantastiske med denne teknikken er at knappene skalerer bredden til hvilken som helst tekstlengde du legger til i navigasjonen. Dette eliminerer behovet for å lage en tilpasset knapp for hver tekst, og eliminerer å måtte lage en ny bakgrunnsknapp på nytt hver gang teksten kan endres.

  • Last ned alle filene for dette tipset, CSS: Legge til tekst til knapper.
  • Se også beslektet innlegg, Legge til knappelementer i en wireframe.

© Copyright 2020 | mobilegn.com