Příklad tlačítka s rolloverem 1 v CSS

Převrácení 1 CSS
V tomto příkladu musíme mít 3 obrázky, které budou fungovat jako;
Odpočívat

Na

Držen dole

Pak v těle našeho webu máme toto
Kód:


ZAČÁTEK

Takže u všech našich tlačítek, poté, co budeme muset používat CSS, začneme s tímto kódem:
Kód:

# bot1 {
hranice: 0 0 0 0;
výplň: 0;
zarovnání textu: na střed;
}
Tam, kde říkáme, že nechceme vnější a vnitřní okraj, zarovnáme text do středu, nyní pokračujeme tímto kódem:
Kód:

# bot1 do {
background-image: url (bg_menu_1.jpg);
pozice na pozadí: střed horní;
výška: 30px;
šířka: 100px;
displej: blok;
barva: # 990000;
textová výzdoba: žádná;
vycpávka: 5px;
background-repeat: no-repeat;
váha písma: tučné;
}
To je prakticky ten, kdo dělá všechno, uvidíme řádek po řádku
background-image: url (bg_menu_1.jpg);
Tímto říkáme, že chceme obrázek na pozadí, a dáme tomu cestu
pozice na pozadí: střed horní;
Tím naznačujeme, že poloha obrázku na pozadí bude vycentrována a nahoru.
background-repeat: no-repeat;
Aby se pozadí neopakovalo, jako by šlo o vzor.
výška: 30px;
šířka: 100;

Řekneme mu, že výška bude 30 a šířka 100 pixelů, což jsou rozměry našich obrázků na pozadí.
displej: blok;
Aby to vygenerovalo a respektovalo krabici s opatřeními, která jsme předtím vložili.
barva: # 990000
Tímto způsobem dáváme pouze barvu textu, který je uvnitř našeho pole.
textová výzdoba: žádná;
Je to vyhnout se řádku, který je pod odkazy.
vycpávka: 5px;
Chcete-li ušetřit 5px místo v horní části našeho odkazu a tím snížit pozici do středu našeho pole.
váha písma: tučné;
Dělá písmena tučně
Pak už jen musíte přidat třídy pro 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 jak si uvědomujeme, změnili jsme pouze cestu našich obrázků na pozadí, abychom dosáhli efektu, který jsme hledali.
Kód našeho příklad převrácení v css je uvedeno níže:
Kód:








ZAČÁTEK


A obrázky lze stáhnout z této stránky kliknutím pravým tlačítkem na obrázek a uložením jako.