Gomb példa 1-es átfordítással CSS-ben

Áthúzás 1 CSS
Ehhez a példához 3 képpel kell rendelkeznünk, amelyek így fognak működni;
Nyugalom

Tovább

Vissza tartott

Aztán az oldalunk testében ez van
Kód:


KEZDET

Tehát minden gombunk esetében, miután CSS-t kell használnunk, ezzel a kóddal kezdjük:
Kód:

# bot1 {
határ: 0 0 0 0;
párnázás: 0;
text-align: center;
}
Ahol azt mondjuk, hogy nem akarunk külső és belső margót, a szöveget középre igazítjuk, most ezzel a kóddal folytatjuk:
Kód:

# bot1 - {
háttérkép: url (bg_menu_1.jpg);
háttér-helyzet: középső felső;
magasság: 30px;
szélesség: 100px;
kijelző: blokk;
szín: # 990000;
szövegdíszítés: nincs;
topding-top: 5px;
háttérismétlés: nem ismétlés;
betű súlya: félkövér;
}
Hogy gyakorlatilag ő csinál mindent, lássuk soronként
háttérkép: url (bg_menu_1.jpg);
Ezzel azt mondjuk, hogy háttérképet akarunk, és megadjuk ennek az útját
háttér-helyzet: középső felső;
Ezzel jelezzük, hogy a háttérkép helyzete középre és felfelé fog kerülni.
háttérismétlés: nem ismétlés;
Annak érdekében, hogy a háttér ne ismétlődjön, mintha minta lenne.

magasság: 30px;
szélesség: 100;
Azt mondjuk, hogy a magassága 30, a szélessége pedig 100 képpontos lesz, ami a háttérképünk mérete.
kijelző: blokk;
Annak érdekében, hogy generáljon és tiszteletben tartson egy dobozt az előttünk tett intézkedésekkel.
szín: # 990000
Ezzel csak színt adunk annak a szövegnek, amely a dobozunkban van.
szövegdíszítés: nincs;
A linkek alatti vonal elkerülése.
topding-top: 5px;
Annak érdekében, hogy 5px helyet spóroljak a linkünk felső részében, és ezzel a doboz közepére csökken.
betű súlya: félkövér;
Félkövérré teszi a betűket
Ezután csak osztályokat kell hozzáadnia a "lebegés" és a "fókusz" álelemekhez
Kód:

# bot1 a: lebeg {
háttérkép: url (bg_menu_2.jpg);
}
# bot1 to: fókusz {
háttérkép: url (bg_menu_3.jpg);
}
De amint rájövünk, csak azért változtattuk meg a háttérképeink útját, hogy elérjük a kívánt hatást.
A kódunk rollover példa css-ben lásd lent:
Kód:








KEZDET


A képek pedig erről az oldalról tölthetők le, jobb egérgombbal kattintva a képre, és mentés másként.