Príklad tlačidla s rolovaním 1 v CSS

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

Na

Podržané

Potom v tele našej stránky máme toto
kód:


ZAČIATOK

A tak pre všetky naše tlačidlá, keď budeme musieť použiť CSS, začneme s týmto kódom:
kód:

# robot1 {
hranica: 0 0 0 0;
výplň: 0;
text-align: center;
}
Tam, kde povieme, že nechceme vonkajší a vnútorný okraj, zarovnáme text na stred, teraz pokračujeme týmto kódom:
kód:

# robot1 až {
background-image: url (bg_menu_1.jpg);
pozadie-pozícia: stred hore;
výška: 30px;
šírka: 100px;
displej: blok;
farba: # 990000;
text-dekorácia: žiadna;
padding-top: 5px;
background-repeat: no-repeat;
váha písma: tučné;
}
Že je to prakticky on, kto robí všetko, pozrime sa rad za radom
background-image: url (bg_menu_1.jpg);
Týmto hovoríme, že chceme obrázok na pozadí a dávame tomu cestu
pozadie-pozícia: stred hore;
Tým naznačujeme, že poloha obrázka na pozadí bude vycentrovaná a smerom nahor.
background-repeat: no-repeat;
Aby sa pozadie neopakovalo, ako keby to bol vzor.
výška: 30px;
šírka: 100;

Hovoríme mu, ž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 rámček s opatreniami, ktoré sme zaviedli predtým.
farba: #990000
Týmto dávame farbu iba textu, ktorý je vo vnútri nášho poľa.
text-dekorácia: žiadna;
Je potrebné vyhnúť sa riadku, ktorý je pod odkazmi.
padding-top: 5px;
Takže v hornej časti nášho odkazu ušetrím priestor 5px a tým znížim pozíciu do stredu nášho boxu.
váha písma: tučné;
Zvýrazňuje písmená
Potom stačí pridať triedy pre pseudo prvky „hover“ a „focus“
kód:

# robot1 a: podržte kurzor myši {
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 si môžete stiahnuť z tejto stránky kliknutím pravým tlačidlom myši na obrázok a uložením ako.