Nagyon sok designer, tervező és fejlesztő hagyja figyelmen kívül a menük, gombok állapotait, mert alábecsülik a jelentőségüket, vagy csak egyszerűen lusták. Pedig elkészítésük igen egyszerű és gyors feladat. Javítja a használhatóságot és a felhasználó visszajelzéseket kap a kattintásának állapotáról. Egy ilyen három állású gombot fogunk most elkészíteni, melyhez egy képet és pár css beállítást alkalmazunk.
Cikkünk a hirdetés után folytatódik!
Demo és letöltés
Nézd meg a végeredményt a demo oldalon, vagy töltsd le a forrásfájlokat segítségként!
A design
Mielőtt nekilátunk a dolgoknak el kell készítenünk egy design-t. Nyissuk meg a photoshopot és tervezzünk egy gombot tetszés szerint. Az enyém ilyenre sikerült:
gomb
Ha kész, állítsuk a dokumentum magasságát pontosan a 3-szorosára, és másoljuk le a gombunkat, szépen egymás alá. A középső lesz a hover gomb az alsó pedig az active. Alakítsuk át őket tetszés szerint.
3 állás egy képen
A kész képet mentsük el button néven. Én png-t használtam, de ez nem kikötés. Menthetsz jpg-t, vagy gif-et is.
Miért is jó ez a megoldás?
- csökkenti a HTTP kéréseket, ami gyorsabb letöltődést tesz lehetővé
- megakadályozza a villódzó hatást, ami a különálló képeknél gyakori
A html és CSS kód
A html
Egy sima linket fogunk átalakítani css-el, amelyet gondolom mindenki ismer, de ha mégsem, így néz ki:
<a class="button" href="#" title="Gomb">Button</a>
A CSS
Illesszük a következő css kódot a stílusfájlunkba, vagy a html-be:
a.button { background: url(button.png) no-repeat 0 0; width: 200px; height: 50px; display: block; text-indent: -9999px; }
Mint láthatjuk, megadtuk a háttérképet, nem ismétlődve, és ami fontosabb, hogy a pozícióját úgy állítottuk be, hogy fönt, balra helyezkedjen el (0 0 ; x y). Ez a hover és active beállításnál lesz igazán érdekes amikor elmozgatjuk a képünket. Szélességet és magasságot is be kell állítanunk (figyeljünk arra,hogy a magasságot az eredeti képhez adjuk meg, tehát ne mind a 3 gombét). A text-ident felelős azért,hogy a linkben szereplő szöveg ne jelenjen meg a gombon, tulajdonképpen eltoljuk a szöveget 9999px-el, így biztosan nem fogunk vele találkozni.
A következő beállítás a hover. Itt megtartunk minden beállítást az előzőből, kivéve a háttér pozícióját. Mivel nekem 50px magas a gombom, pontosan ennyivel kellett elmozgatnom a hátteret az y tengelyen hogy megkapjam a hover állást:
a.button:hover { background-position: 0 -50px; }
Az utolsó állapotunk az active, ahol szintén elmozgatom a hátteret 50px-el. A többi beállítást itt is megtartjuk.
a.button:active { background-position: 0 -100px; }
Ezzel végére is értünk a segédletnek. A demo oldalon megtekintheted és kipróbálhatod a működő gombot. Alant pedig ajánlok egy pár oldalt ahol jobban megismerkedhetsz a gombkészítés rejtelmeivel.
- Simply-Buttons v2
- Pushing Your Buttons With Practical CSS3
- Build a Simple Button with CSS Image Sprites
Végszó
Mint láthatjátok egy egyszerű gomb esetében nem bonyolult a kivitelezés, viszont ezt a technikát alkalmazhatjuk komplett menüknél is, így csak egyszer szükséges letöltenünk a menühöz tartozó képet és nem fogja lassítani az oldalunkat, valamint a http kérések is csökkenni fognak. Sok sikert mindenkinek és ha elakadtok kérdezzetek nyugodtan.
Szólj hozzá!