Button CSS. Përfitimet. Styles. estetikë

Ndoshta askush faqe nuk është pa referente e saj në faqen tjetër buttons. Gjithkush dëshiron të sjellë atë në vëmendjen tuaj faqen e internetit, dhe në të njëjtën kohë të përdorni një shumëllojshmëri e mjeteve. Në Web design në mesin e tyre përfshijnë hartimin e butonave, të cilat ndryshojnë në bazë të parametrave të ndryshme - si në madhësi dhe formë, dhe efektet dhe kështu me radhë.

buttons CSS janë më të përshtatshëm. Për momentin ata mund të ndryshojë tërësisht stilin. Dhe, sigurisht, ajo i jep mundësi të tjera për hartimin e faqes si një e tërë.

Për starters, për të shmangur konfuzionin dhe keqkuptimin, është e nevojshme për të kuptuar disa koncepte.

CSS, e cila është

CSS, që do të thotë në përkthim "Cascading Style Sheets", është sot një nga teknologjitë kryesore në internet. Pa këtë gjuhë nuk ka gjasa të kushtojë të paktën një vend.

CSS-code - një udhëzues për shfletuesit që përmbajnë informacion të tillë si elemente të shfaqur në faqen dhe ku për të bërë atë.

Lehtë për të ruajtur këto udhëzime në një skedar të veçantë me .css extension. Nga ana tjetër, ato mund të vendosen në fillim të HTML-dokument.

Button në vend. Çfarë është

Button, ose grafik për navigacion e faqes duhet të tërheqë vëmendjen e vizitorëve për të parë se ajo ishte fshehur informacionin e nevojshëm, dhe përveç kësaj, ajo do të duan të klikoni. Kur ajo është mjaft e ndritshme dhe të shquar, ai do të marrë vënë re. Ky buton mund të tërheq vizitorët, për shembull, të lënë komente në faqen e internetit, ose të dërgoni një kërkesë për të abonoheni në këtë buletin interesante, dhe, natyrisht, thjesht transferimin seksionin e kërkuar përdoruesit e faqes.

Buttons janë statike, të animuar, dinamike, të shëndoshë dhe pa të.

Ato mund të jenë krijuar enkas, për shembull, në Photoshop, dhe ngarkoni një imazh në faqen e internetit, dhe mund të lehtë dhe të shpejt të dalë me ta në CSS.

buttons CSS

Bëni këto butona shumë të lehtë. Përparësia e madhe e përdorimit të tyre është se ata në çdo kohë, vetëm disa sekonda, ju mund të ndryshojë përtej njohjes.

Siç e dimë, ekzistojnë tre pika kryesore:

• pushoni kur nuk ka bërë asgjë me atë, si vetëm duke shfletuar faqe;
• pozicionin e rri pezull kursorin mbi të;
• dhe aktivizuar kur klikuar.

Butonat e plotë shfaqet saktë në shfletues si Firefox, Safari, Opera, Chrome. Në të njëjtën kohë në Internet Explorer 9, butoni nuk do të shfaqet në mënyrë të plotë. Për shembull, të rrumbullakëta qoshet, hije tekst dhe goditje rreth butonin nuk do të jetë i dukshëm këtu për shkak të faktit se këto prona nuk janë mbështetur nga ky shfletues. Megjithatë, në përgjithësi, CSS-butona për faqe duket e mirë në këtë version të shfletuesit. Në Internet Explorer 8 dhe versione të tjera nën tetë në butonin e nuk do të jetë vëllimi i dukshëm, por në të njëjtën kohë, për të ruajtur pamjen e gradients.

Nëse krahasojmë butonin në formë të imazheve dhe butonin CSS, dallimi është hapësirë në server do të jetë krejtësisht e parëndësishme. Por button CSS do të zvogëlojë numrin e kërkesave në server, por do të jetë një avantazh të qartë në krahasim me butonin si një imazh.

Ajo rezulton se edhe në qoftë se mbështetja e disa pronave CSS në Internet Explorer dhe jo, këto butona do të vazhdojë të duken më të fituar se imazhet e thjeshtë, sepse e vetmja gjë që do të humbasin përdoruesit në Internet exporer, në mënyrë për të parë atë estetikë e teknologjisë moderne në Web -Design. Por kjo është defekt mjaft i parëndësishëm.

Për çdo pozicion është dhënë stilin e vet. Këto stile janë të shkruara në një .css veçantë file apo midis tags kreu në faqen shumë.

Vendi një buton në faqen e internetit

Mes kodit tags trupit të shkruar:

ku

id = "button2" këtu është emri i caktuar për butonin,

href = http: // site / artikull / 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 janë dhënë një lidhje të drejtpërdrejtë me dokumentin e dëshiruar,

TEXT - shtypur teksti që do të shfaqet në butonin.

Styles për butonat

1. button CSS Style është regjistruar veçmas në dokument ose në faqen e vetë:

2. Së pari butonat CSS shkruar kur ata janë në pushim:

3. Parametrat e mëtejshme janë të regjistruar, që korrespondon me butonin kur kursori sugjerojnë atë. Në qoftë se në këtë rast, vetëm ndryshon ngjyrën dhe mbrojtje nga drita, dhe stil, çdo gjë mbetet e njëjtë, me përjashtim të ngjyrës dhe mbrojtje nga drita:

4. Dhe opsioni i fundit është pozicioni i butonit shtypet kursorin mbi të. Shpesh në raste të tilla vetëm një ndryshim minimal, të tilla si ngjyra, si në këtë rast:

CSS - buttons bukur

Për të krijuar një gradient, ju mund të përdorni butonat. Ajo është e mirë që së pari të nxjerrë butonin në çdo redaktor imazh, të tilla si Photoshop, kështu që ju e dini saktësisht se çfarë do të ndodh në fund. Në qoftë se ju përdorni Photoshop, atëherë ajo fillimisht tashmë kanë disa gradients, por përveç kësaj, ju mund të shkarkoni gjithnjë e më shumë, lloj që do të donte për të marrë në këtë faqe interneti.

Eksperimente me CSS-kod dhe ndryshimin e parametrave të ndryshme, është e mundur për të ndryshuar butonat CSS bukur, dhe me anë të seleksionimit, për të arritur rezultatin e dëshiruar.

Këto parametra janë:

- ngjyra e tekstit mbi butonin;

- madhësia e tekstit dhe butonat;

- buttons ngjyra gradient;

- butona kënde radius;

- dhe ngjyra e pash të saj.

Të thuash të drejtën, ju mund të sigurtë, pa frikë, për të eksperimentuar dhe për të zgjedhur opsionin më të mirë. Pavarësisht numrit të vogël të parametrave, ju mund të krijoni shumë të ndryshme në butonat e tyre të stilit.