Gumbi CSS. Prednosti. Slogi. Estetika

Verjetno nobena stran ne bo storila, ne da bi se nanašala na druge strani gumbov. Vsakdo želi pritegniti pozornost na svojo spletno stran in obenem uporabiti različne načine. V spletnem oblikovanju vključujejo oblikovanje gumbov, ki se razlikujejo po različnih parametrih - glede na velikost, obliko, učinek in tako naprej.

Gumbi CSS so najbolj primerni. Za trenutek se lahko njihov stil popolnoma spremeni. In, seveda, to zagotavlja dodatne možnosti za oblikovanje spletne strani kot celote.

Za začetek, da ne pride do zmede in nesporazuma, je treba razumeti nekatere koncepte.

CSS, kaj je to

CSS, kar pomeni "kaskadne slogovne liste" v prevodu, je danes ena glavnih tehnologij na internetu. Brez tega jezika verjetno ne bo upravljalo vsaj ene strani.

Koda CSS je navodila za brskalnike, ki vsebujejo informacije o prikazovanju predmetov na strani in kje to storiti.

Takšne napotke je priročno shraniti v ločeni datoteki, ki ima razširitev .css. Po drugi strani pa jih lahko postavite na začetek html-dokumenta.

Gumb na strani. Kako je?

Gumb ali grafični element za navigacijo spletnega mesta bi morali pritegniti pozornost, tako da bo obiskovalec videl, da se za njim skrivajo informacije, ki jih zanima, poleg tega pa bi jo radi pritisnili. Ko je dovolj svetla in vidna, se bo opazila. Takšen gumb lahko spodbudi obiskovalce, na primer, da zapustijo povratne informacije na spletnem mestu ali pošljejo prijavo, naročijo na zanimivo glasilo in seveda enostavno prevedejo del spletnega mesta, ki ga zahteva uporabnik.

Gumbi so statični, animirani, dinamični, z zvokom in brez njega.

Lahko jih posebej ustvarite, na primer v Photoshopu, in naložite sliko na spletno mesto, zato jih lahko preprosto in hitro prikličete v CSS.

Gumbi CSS

Naj bodo ti gumbi zelo preprosti. Velika prednost njihove uporabe je, da jih je mogoče kadarkoli spremeniti brez priznanja, dobesedno v nekaj sekundah.

Kot veste, imajo gumbi tri položaje:

• počitek, ko se z njo nič ne naredi, ampak preprosto brskanje po strani;
• položaj, s kurzorjem na njem;
• in aktiviranje, ko pritisnete.

Gumbi bodo v celoti prikazani v takih brskalnikih, kot so Firefox, Safari, Opera, Chrome. Istočasno pa v Internet Explorerju 9 gumbov ni mogoče prikazati v celoti. Na primer, koti vogalov, senca besedila in poteza okoli gumba ne bodo vidna tukaj, ker ta lastnosti tega brskalnika ne podpira. Kljub temu, na splošno CSS-gumbi za spletno mesto v tej različici brskalnika izgleda dostojno. V Internet Explorerju 8 in drugih različicah, ki so pod osmim, gumb ne bo prikazal večje količine, hkrati pa bo ostala vidnost naklonov.

Če primerjate gumb v obliki slike in gumba CSS, bo razlika v lokaciji na strežniku povsem nepomembna. Gumbi CSS pa bodo zmanjšali število zahtev na strežnik, to pa bo že v jasni prednosti nad gumbom v obliki slike.

Izkazalo se je, da tudi če nekatere lastnosti CSS niso podprte v brskalnikih Internet Explorer, bodo taki gumbi še vedno videti bolj ugodni kot preproste slike, saj bo edina stvar, ki jo bodo uporabniki programa Internet Explorer izgubili, videti estetiko sodobnih tehnologij v spletu -design. Ampak to je povsem nepomembna pomanjkljivost.

Za vsako pozicijo določite svoj slog. Ti slogi so napisani v posebni datoteki .css ali med oznakami glave na strani samega spletnega mesta.

Postavite gumb na spletno stran

Med oznakami telo je napisana koda:

kjer

id = "button2" tukaj pomeni ime, dodeljeno gumbu,

href = "HYPERLINK" tukaj je podana neposredna povezava z zahtevanim dokumentom,

TEXT - natisne besedilo, ki bo prikazano na gumbu.

Slogi gumba

1. Slog gumba CSS se zabeleži ločeno v dokumentu ali na sami strani:

2. Gumbi CSS so na začetku napisani, ko so mirovali:

3. Nato se zabeležijo parametri, ki ustrezajo gumbu, ko je kazalec usmerjen na to. Če se v tem primeru spremenijo samo barva in polnilo, potem v slogu ostane vse ostalo enako, razen barve in polnila:

4. Zadnji parameter zadeva položaj gumba, ko je kurzor pritisnjen na nanj. Pogosto v takih primerih le minimalne spremembe, na primer barve, kot v tem primeru:

CSS - lepi gumbi

Za ustvarjanje gumbov lahko uporabite naklon. Najboljši način je, da najprej narišete gumb v grafičnem urejevalniku, na primer v Photoshopu, da natančno ugotovite, s čim se bo končal. Če uporabljate Photoshop, potem že ima nekaj nagibov, poleg tega pa lahko prenesete še več in druge, kot bi želeli priti na spletno mesto.

Eksperimentiranje s CSS-kodo in spreminjanje različnih parametrov je možno spremeniti lepe gumbe CSS in z izbiro, da dosežete želeni rezultat.

Ti parametri so:

- barva besedila na gumbu;

- velikost besedila in gumbov;

- barvni gradientni gumbi;

- polmer vogalov gumba;

- in barvo njene kapi.

Natančneje, lahko mirno, brez strahu, eksperimentirate in izberete najboljšo možnost. Kljub majhnemu številu parametrov lahko ustvarite zelo raznolike v svojih slogovnih gumbih.