![CSS pentru începători (html și css) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-3332bacd.png)
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 (educație) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-0406ce17.png)
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 incepatori (incepatori) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-7f0499e2.png)
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 incepatori (incepatori) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-448f4d23.png)
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 (html și css) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-6c69a936.png)
Acum trebuie doar să corectăm CSS pentru aceste butoane:
Codul HTML în sine este elementar:
![CSS pentru începători (html și css) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-8c7ef50f.png)
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
![CSS pentru incepatori (incepatori) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-1de91992.png)
Ei bine, codul HTML:
Observați rezultatul
Comparați rezultatul activității noastre în diferite browsere:
![CSS pentru incepatori (incepatori) CSS pentru începători](https://images-on-off.com/images/125/cssdlyanachinayushix-db7ba8dd.png)
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: