Gumb za CSS. Prednosti. Slogi. estetika

Verjetno nihče stran ni brez njenega referenčnih na drugi strani gumbi. Vsakdo si želi, da bi ga na vašo pozornost stran, in hkrati uporabljajo različne načine. V web design med njimi vključujejo oblikovanje gumbov, ki se razlikujejo glede na različne parametre - tako po velikosti in obliki, ter učinke in tako naprej.

CSS gumbi so najbolj priročno. V tem trenutku se lahko povsem spremenijo slog. In, seveda, daje dodatne možnosti za oblikovanje območja kot celote.

Za začetek, da bi se izognili zmedi in nesporazumom, je treba razumeti nekatere pojme.

CSS, ki je

CSS, kar pomeni v prevodu "Cascading Style Sheets", je danes eden od glavnih tehnologij na internetu. Brez tega jezika je verjetno, da bi stalo vsaj eno mesto.

CSS-koda - vodnik za brskalnike, ki vsebujejo informacije, kot so prikazne elemente na strani, in kje, da to storite.

Enostaven za shranjevanje teh navodil v ločeno datoteko s pripono .css. Po drugi strani pa jih lahko dajo na začetku html-dokument.

Gumb na mestu. Kaj je to

Button, ali grafično za navigacijo mesta naj bi pritegnili pozornost obiskovalcev videti, da je bila skriva vse potrebne informacije, poleg tega pa bi želeli klikniti. Ko je dovolj svetlo in vidno, bo dobil opazil. Ta gumb lahko pritegnili obiskovalce, na primer, pustite komentarje na spletni strani, ali pošiljati prošnjo, da se naročite na e-novice zanimivo, in, seveda, preprosto prenese zahtevano uporabniško del mesta.

Gumbi so statične, animirane, dinamičen, dobro in brez njega.

Lahko se posebej ustvarjena, na primer, v Photoshopu, in naložite sliko na spletno stran, in jih je mogoče enostavno in hitro prišli do njih v CSS.

gumbi za CSS

Naj ti gumbi zelo enostavno. Velika prednost njihove uporabe je, da v vsakem trenutku, le nekaj sekund, lahko spremenijo do nerazpoznavnosti.

Kot vemo, so tri ključne točke:

• počitek, če ne delam nič z njo, kot le brskanje po strani;
• Kazalko lebdenje nad njim;
• in se aktivira, ko kliknili.

Celotna gumbi natančno prikaže v brskalnikih, kot so Firefox, Safari, Opera, Chrome. Ob istem času v Internet Explorer 9, gumb ne bo prikazan v celoti. Na primer, okrogli vogali, besedilo senca in giba okoli gumba ne bo viden tukaj zaradi dejstva, da so te lastnosti, ki jih ta brskalnik ne podpira. Vendar pa na splošno, CSS-gumbi za spletne strani izgleda dobro v tej različici brskalnika. V Internet Explorer 8 in druge različice pod osmi na gumb ne bo viden obseg, vendar pa hkrati, da se ohrani videz gradientov.

Če primerjamo gumb v obliki slik in gumb CSS, razlika je prostor na strežniku bo popolnoma nepomembno. Vendar bo gumb CSS zmanjšati število zahtev na strežnik, vendar pa bo jasno prednost v primerjavi z gumbom kot sliko.

Izkazalo se je, da tudi če bi podporo nekaterih CSS lastnosti v Internet Explorerju in ne, ti gumbi še vedno videti bolj nagrajeni kot preproste slike, saj je edina stvar, ki bodo izgubili uporabnike Internet Exporer, tako da ga vidim estetiko sodobne tehnologije na spletu -Design. Ampak to je zelo pomembno, napaka.

Za vsak položaj je dal svoj stil. Ti slogi so napisana v posebni datoteki CSS ali med glavo oznake v samem strani.

Postavite gumb na spletni strani

Med telesa oznake pisno kodo:

kjer je

id = "BUTTON2" tukaj je ime, dodeljeno gumb,

href = http: // stran / članek / 175.988 /% E2% 80% 9D% D0% 93% D0% 98% D0% 9F% D0% 95% D0% A0% D0% A1% D0% A1% D0% AB % D0% 9B% D0% 9A% D0% 90% E2% 80% 9D dobijo neposredno povezavo do želenega dokumenta,

BESEDILO - natisnjeno besedilo, ki se prikaže na gumb.

Slogi za gumbe

1. Gumb za CSS Style se evidentira ločeno v dokumentu ali v sami strani:

2. Prvi gumbi napisal CSS, ko so v mirovanju:

3. Nadaljnji parametri so zabeleženi, ki ustreza gumb, ko je kazalec jo kažejo. Če v tem primeru, samo spremeni barvo in senčenje in slog, vse ostaja enako, razen za barve in senčenje:

4. In zadnja možnost je položaj gumb pritisne kazalec na njej. Pogosto v takih primerih le minimalno sprememb, kot so barve, kot v tem primeru:

CSS - lepe gumbe

Če želite ustvariti preliv, lahko uporabite gumbe. Zato je najbolje, da najprej pripraviti gumb v vsakem urejevalniku slik, kot so Photoshop, tako da boste vedeli, kaj se zgodi na koncu. Če uporabljate Photoshop, potem je sprva že nekaj vzponi, vendar poleg tega, lahko prenesete več in več, vrste, ki bi radi, da se na mestu.

Eksperimentiranje z CSS-kodo in spreminjajoče različnih parametrov, je mogoče spremeniti lepe gumbe CSS, in z izbiro, da bi dosegli želeni rezultat.

Ti parametri so:

- barva besedila na gumb;

- velikost besedila in gumbov;

- gumbi barva gradient;

- gumbi koti polmer;

- in barva njenega kapi.

Strogo gledano, lahko varno, brez strahu, da eksperimentirate in izbrati najboljšo možnost. Kljub majhnemu številu parametrov, lahko ustvarite zelo raznolike gumbi slogu.