CSS pentru începători

CSS pentru începători

Am decis să încep o nouă serie de articole - "Sper că CSS pentru începători", va fi utilă pentru mulți. Prima lecție se va concentra pe butoanele ...

Desenând butonul

În primul rând, trebuie să desenați un buton astfel:







Pentru aceasta, "Instrumentul rotunjit dreptunghi" din Photoshop este cel mai bun pentru noi, vom începe cu el - vom desena ceva de genul:

Prin modificarea parametrului Radius, puteți specifica încărcarea dorită a butoanelor (în exemplul de claritate, conținutul este complet transparent ("Fill Opacity" => 0%)):

CSS pentru începători

Lățimea obiectului din acest exemplu este de 320 pixeli - adică Presupun că nu vor exista butoane de dimensiuni mai mari.

Eliminăm limita folosind "Stroke" (din "Blending Options"), tipul de gradient este de la # 000000 la # 676767:

CSS pentru începători

Acum ar fi recomandabil să umpleți butonul cu un gradient (parametrul de opacitate este indicat în partea de sus, culoarea din partea de jos, instrumentul "Overlay Overlay" din "Opțiunile de amestecare"):

CSS pentru începători






Rezultat cu o frontieră inundată:

Dacă facem un fundal de culoare:

Butonul este gata, vom trece la pasul următor ...

Buton simplu CSS

CSS pentru începători

Acum trebuie doar să corectăm CSS pentru aceste butoane:

Codul HTML în sine este elementar:

CSS pentru începători

Buton de cauciuc CSS

Acum vom complica sarcina - nu știm ce culoare vor fi butoanele și în ce mărime presupunem că butoanele nu vor avea o lățime mai mare de 320 de pixeli.

Clădirea DOM

Fiecare buton va fi un element , înfășurat

  • . element avem, de asemenea, nevoie de a crea butoane de cauciuc pentru a aduce claritate voi aduce următorul ecran:

    CSS pentru începători

    Ei bine, codul HTML:

    Observați rezultatul

    Comparați rezultatul activității noastre în diferite browsere:

    CSS pentru începători

    După cum puteți vedea, există mai multe probleme cu această implementare:

    • translucența în IE6 nu funcționează - putem modifica hacks, dar de ce - IE6 poate fi considerat mort
    • box-raza în IE și Opera nu funcționează - fie să refuze această caracteristică, fie să schițeze spațiu liber în culoarea de fundal (IE are, de asemenea, un hack murdar, a se vedea colțul curbat (border-raza) cruce browser)

    Knopochki poate fi simțit pe demo. toate tipurile sunt disponibile la următorul link:

    Mai multe link-uri conexe:

    informații







    Articole similare

    Trimiteți-le prietenilor: