Príklad tlačidla s funkciou Rollover 1 v CSS

Prevrátenie 1 CSS
V tomto príklade musíme mať 3 obrázky, ktoré budú fungovať ako;
Odpočívaj

On

Držané dole

Potom v tele nášho webu máme toto
Kód:


ZAČIATOK

Takže pre všetky naše tlačidlá, potom, čo budeme musieť používať CSS, začneme týmto kódom:
Kód:

# bot1 {
hranica: 0 0 0 0;
výplň: 0;
zarovnanie textu: na stred;
}
Keď hovoríme, že nechceme vonkajší a vnútorný okraj, zarovnáme text na stred, teraz pokračujeme týmto kódom:
Kód:

# bot1 do {
background-image: url (bg_menu_1.jpg);
Pozícia na pozadí: stred hore;
výška: 30px;
šírka: 100px;
displej: blok;
farba: # 990000;
dekorácia textu: žiadny;
výplň: 5px;
background-repeat: no-repeat;
váha písma: tučné;
}
Že je prakticky ten, kto robí všetko, pozrime sa riadok po riadku
background-image: url (bg_menu_1.jpg);
Týmto povieme, že chceme obrázok na pozadí, a tým dáme cestu
Pozícia na pozadí: stred hore;
Týmto naznačujeme, že poloha obrázka na pozadí bude vycentrovaná a nahor.
background-repeat: no-repeat;
Aby sa pozadie neopakovalo, akoby išlo o vzor.
výška: 30px;
šírka: 100;

Hovoríme vám, že výška bude 30 a šírka 100 pixelov, čo sú rozmery našich obrázkov na pozadí.
displej: blok;
Tak, aby generoval a rešpektoval políčko s opatreniami, ktoré sme predtým vložili.
farba: # 990000
Týmto dávame iba farbu textu, ktorý je vo vnútri nášho poľa.
dekorácia textu: žiadny;
Je to tak, aby sa zabránilo priamke, ktorá je pod odkazmi.
výplň: 5px;
Aby som v hornej časti nášho odkazu zachránil priestor 5px, a tým znížil pozíciu do stredu našej škatule.
váha písma: tučné;
Zvýrazní písmená
Potom už len musíte pridať triedy pre pseudo prvky „hover“ a „focus“
Kód:

# bot1 a: hover {
background-image: url (bg_menu_2.jpg);
}
# bot1 to: focus {
background-image: url (bg_menu_3.jpg);
}
Ale ako si uvedomujeme, zmenili sme iba cestu našich obrázkov na pozadí, aby sme dosiahli efekt, ktorý sme hľadali.
Kód nášho príklad prevrátenia v css zobrazené nižšie:
Kód:








ZAČIATOK


A obrázky je možné stiahnuť z tejto stránky kliknutím pravým tlačidlom myši na obrázok a uložením ako.