Butoane ca în Gmail și Google Reader
Salutări! Astăzi vom vedea cum sunt făcute aceste butoane frumoase din unele produse Google Web.
Ce este bun despre ei? Acestea necesită cod mic, toate arată la fel peste tot, puteți schimba cu ușurință designul butoanelor și, dacă doriți, le puteți face fără fotografii.
Aplicarea acestor butoane aparține lui Douglas Booman. La momentul scrisului, Douglas a făcut deja 3 versiuni ale unor astfel de butoane, dintre care unul, în general, fără a utiliza imagini, numai HTML și CSS.
Astăzi vom revedea doar ultimele două implementări și vom începe cu versiunea "imagine".
Versiune cu imagini
Ei bine, imaginea, de fapt, doar una - este gradientul butonului. Dacă gradientul nu este fundamental, puteți face fără o fotografie. Vrei cu un gradient și fără o imagine - întoarce-te jos ;-)
În general, vom avea 4 tipuri de butoane - stânga, dreapta, centru și unic.
Vom avea 2 versiuni de butoane - una folosind
În ambele cazuri vom folosi imbricate :
Versiune fără imagini
Vă voi spune doar principiul, puteți vedea implementarea în codul sursă al exemplului.
Ideea este că în plus față de două adăugăm mai mult înăuntru și . Folosindu-le, vom emula gradientul. Dar această implementare funcționează până acum doar bine în Firefox și Safari, dar nu funcționează în IE. Acum, să aruncăm o privire la un exemplu.
Co-fondator Temporar. Interesat de afaceri online, design, utilizare și programare pentru clienți. Participă la dezvoltarea mai multor proiecte de internet.
Uneori scrie pe Twitter. dar mai des pe Temporno.net.