CSS-painikkeet. Hyötyjä. Tyylejä. estetiikka

Todennäköisesti yksikään sivusto ei voi tehdä ilmanpainikkeita muille sivuillesi. Jokainen haluaa kiinnittää huomiota sivustoonsa, ja samalla käytetään erilaisia ​​välineitä. Verkkosuunnitteluun sisältyy painikkeiden suunnittelu, jotka eroavat toisistaan ​​eri parametrien - koon, muodon ja tehosteiden - ja niin edelleen.

CSS-painikkeet ovat kätevinä. Hetkellä heidän tyylinsä voidaan muuttaa kokonaan. Ja tietenkin, tämä tarjoaa lisämahdollisuuksia koko sivuston suunnittelulle.

Aluksi, jotta ei olisi sekaannusta ja väärinkäsityksiä, on syytä ymmärtää joitain käsitteitä.

CSS mikä se on

CSS, joka tarkoittaa käännöksessä "kaskadisoivia tyylitaulukoita", on nykyään yksi Internetin tärkeimmistä tekniikoista. Ainakin yksi sivusto ei todennäköisesti tee ilman tätä kieltä.

CSS-koodi on ohje selaimille, joka sisältää tietoja siitä, kuinka sivun elementit näytetään ja missä ne tehdään.

Tällaiset ohjeet on kätevä tallentaa erilliseen tiedostoon, jonka tunniste on .css. Toisaalta voit laittaa ne html-asiakirjan alkuun.

Painike sivustolla. Millaista se on

Painike tai graafinen elementti navigointia vartensivuston pitäisi kiinnittää kävijän huomion nähdäkseen, että häntä kiinnostavat tiedot ovat piilossa sen takana, ja haluaisin lisäksi napsauttaa sitä. Kun se on kirkas ja riittävän näkyvä, he huomaavat sen varmasti. Tällainen painike voi saada kävijät saapumaan esimerkiksi jättämään arvosteluasi sivustolle tai lähettämään pyynnön, tilaamaan mielenkiintoisen uutiskirjeen ja tietysti yksinkertaisesti siirtymään käyttäjän pyytämään sivuston osaan.

Painikkeet ovat staattisia, animoituja, dynaamisia, äänellä ja ilman.

Ne voidaan luoda erityisesti Photoshopissa ja ladata sivuston kuvaan, tai voit keksiä ne helposti ja nopeasti CSS: ssä.

CSS-painikkeet

Näiden painikkeiden tekeminen on hyvin yksinkertaista. Sovelluksen suuri etu on, että niitä voidaan muuttaa tuntemattomina milloin tahansa, kirjaimellisesti muutamassa sekunnissa.

Kuten tiedät, painikkeilla on kolme asentoa:

• rauha, kun he eivät tee mitään hänen kanssaan, vaan vain selaavat sivua;
• sijainti kohdistimen ollessa sen päällä;
• ja aktivointi napsautettaessa.

Painikkeet näytetään kokonaan täsmälleen sellaisinaselaimet, kuten Firefox, Safari, Opera, Chrome. Samaan aikaan Internet Explorer 9: ssä painikkeita ei voida näyttää kokonaan. Esimerkiksi kulmien pyöristäminen, tekstin varjo ja painikkeen ympärillä oleva isku eivät ole tässä näkyvissä, koska tämä selain ei tue näitä ominaisuuksia. Sivuston CSS-painikkeet näyttävät kuitenkin yleensä hyvältä tässä selaimen versiossa. Internet Explorer 8: ssa ja muissa kahdeksannen alapuolella olevissa versioissa painike ei näe äänenvoimakkuutta, mutta samalla kaltevuuksien näkyvyys säilyy.

Jos vertaa -painiketta kuvana ja -painikettaCSS, ero palvelintilassa on täysin merkityksetön. Mutta CSS-painikkeet vähentävät palvelimelle osoitettujen pyyntöjen määrää, ja tämä on jo selvä etu verrattuna kuvan muodossa olevaan painikkeeseen.

Osoittautuu, että vaikka joidenkin tukiKoska Internet Explorer -selaimissa ei ole CSS-ominaisuuksia, tällaiset painikkeet näyttävät silti edullisemmilta verrattuna yksinkertaisiin kuviin, koska Internet Exporerin käyttäjät menettävät vain nykyaikaisen web-suunnittelutekniikan estetiikan. Mutta tämä on täysin merkityksetön virhe.

Jokaisella tyylillä on oma tyylinsä. Nämä tyylit on kirjoitettu erityiseen .css-tiedostoon tai itse sivustosivun otsikkotunnisteiden väliin.

Painike paikalleen

Tunnisteiden väliin koodi kirjoitetaan:

jossa

id = ”painike2” tarkoittaa tässä painikkeelle annettua nimeä,

href = ”HYPERLINK” tarjoaa tässä suoran linkin vaadittuun asiakirjaan,

TEXT - teksti tulostetaan, joka näkyy painikkeessa.

Nappityylit

1. CSS-painiketyyli kirjoitetaan erikseen asiakirjassa tai itse sivulla:

2. Ensinnäkin CSS-painikkeet kirjoitetaan lepotilassa:

3. Seuraavaksi näppäintä vastaavat parametrit kirjoitetaan, kun kohdistin on sen päällä. Jos tässä tapauksessa vain väri ja täyte muuttuvat, tyylillä kaikki pysyy samana, paitsi väri ja täyte:

4. Ja viimeinen parametri koskee painikkeen sijaintia kohdistimen painettaessa sitä. Usein tällaisissa tapauksissa vain minimaaliset muutokset, esimerkiksi väri, kuten tässä tapauksessa:

CSS - kauniit painikkeet

Voit käyttää gradienttia painikkeiden luomiseen. Parasta on ensin piirtää painike graafiseen muokkausohjelmaan, esimerkiksi Photoshopiin, jotta tiedät tarkalleen, mistä se lopulta tulee. Jos käytät Photoshopia, siinä on alun perin jo joitain kaltevuuksia, mutta lisäksi voit ladata myös muita, kuten haluaisit päästä sivustolle.

Kokeilemalla CSS-koodia ja muuttamalla erilaisia ​​parametrejä, on mahdollista muuttaa CSS: n kauniita painikkeita ja saavuttaa haluttu tulos valitsemalla.

Nämä parametrit ovat:

- painikkeen tekstin väri;

- tekstin koko ja painikkeet;

- painikkeen kaltevuusväri;

- napin kulmien säde;

- ja hänen aivohalvauksensa väri.

Itse asiassa voit rauhallisesti, ilman pelkoa, kokeilla ja valita parhaan vaihtoehdon. Parametrien pienestä määrästä huolimatta voit luoda hyvin erilaisia ​​painikkeita niiden tyyliin.