• Administratíva
  • Kurzy španielčiny
  • Spoločnosť.
  • Kultúra.
  • Slovak
    • Arabic
    • Bulgarian
    • Croatian
    • Czech
    • Danish
    • Dutch
    • English
    • Estonian
    • Finnish
    • French
    • Georgian
    • German
    • Greek
    • Hebrew
    • Hindi
    • Hungarian
    • Indonesian
    • Italian
    • Japanese
    • Korean
    • Latvian
    • Lithuanian
    • Norwegian
    • Persian
    • Polish
    • Portuguese
    • Romanian
    • Russian
    • Serbian
    • Slovak
    • Slovenian
    • Swedish
    • Thai
    • Turkish
    • Ukrainian
  • Twitter
  • Facebook
  • Instagram
  • Príklad tlačidla s funkciou Rollover 1 v CSS
    • Veda.
    • Spoznajte Nás
    • Psychológia. Top Definície
    • História. Top Definície

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

    Css   /   by admin   /   July 04, 2021

    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;

    instagram story viewer

    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:



    examplede.com




    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.

    Značky cloud
    • Css
    Hodnotenie
    0
    Názory
    0
    Pripomienky
    Odporučte priateľom
    • Twitter
    • Facebook
    • Instagram
    PREDPLATNÉ
    Prihlásiť sa na odber komentárov
    YOU MIGHT ALSO LIKE
    • Kurzy španielčiny
      04/07/2021
      Príklad slovies v postpreterite
    • Literatúra
      04/07/2021
      Charakteristika poézie
    • Príklad chemických zlúčenín
      Chémia
      04/07/2021
      Príklad chemických zlúčenín
    Social
    2529 Fans
    Like
    5857 Followers
    Follow
    3882 Subscribers
    Subscribers
    Categories
    Administratíva
    Kurzy španielčiny
    Spoločnosť.
    Kultúra.
    Veda.
    Spoznajte Nás
    Psychológia. Top Definície
    História. Top Definície
    Príklady
    Kuchyňa
    Základné Znalosti
    Účtovníctvo
    Zmluvy
    Css
    Kultúra A Spoločnosť
    Životopis
    Správny
    Dizajn
    Čl
    Zamestnanie
    Ankety
    Eseje
    Spisy
    Filozofia
    Financie
    Fyzika
    Geografia
    Príbeh
    História Mexika
    Asp
    Popular posts
    Príklad slovies v postpreterite
    Kurzy španielčiny
    04/07/2021
    Charakteristika poézie
    Literatúra
    04/07/2021
    Príklad chemických zlúčenín
    Príklad chemických zlúčenín
    Chémia
    04/07/2021

    Značky

    • Základné Znalosti
    • Účtovníctvo
    • Zmluvy
    • Css
    • Kultúra A Spoločnosť
    • Životopis
    • Správny
    • Dizajn
    • Čl
    • Zamestnanie
    • Ankety
    • Eseje
    • Spisy
    • Filozofia
    • Financie
    • Fyzika
    • Geografia
    • Príbeh
    • História Mexika
    • Asp
    • Administratíva
    • Kurzy španielčiny
    • Spoločnosť.
    • Kultúra.
    • Veda.
    • Spoznajte Nás
    • Psychológia. Top Definície
    • História. Top Definície
    • Príklady
    • Kuchyňa
    Privacy

    © Copyright 2025 by Educational resource. All Rights Reserved.