codeART

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!

CSS Gomb
(76.54 KB) | 462 letöltés
3 állású CSS gomb

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.