Pomocou CSS3 umožníte, aby prvky webovej stránky bledli a vypadali

click fraud protection

The nové štýly zavedené v CSS3 dal webovým profesionálom možnosť pridávať na svoje stránky efekty podobné Photoshopu. Jeden vizuálny efekt, ktorý môžete pridať pomocou CSS3 je urobiť interaktívne webové stránky vytvorením vyblednutých oblastí, ktoré sa zamerajú, keď návštevník webu niečo urobí, napríklad keď nad týmto prvkom prejde kurzorom myši. Tento efekt využíva kombináciu nepriehľadnosť a prechod.

Zmeniť nepriehľadnosť pri umiestnení kurzora myši

Jedným interaktívnym prvkom je zmena nepriehľadnosti obrázka, keď sa zákazník nad tento prvok umiestni. V tomto príklade (HTML je uvedený nižšie) používame obrázok s atribútom triedy greydout.

Ak chcete, aby bola sivá, pridajte do svojej šablóny štýlov CSS nasledujúce pravidlá štýlov:

.šedá {
-webkit-nepriehľadnosť: 0,25;
-moz-nepriehľadnosť: 0,25;
nepriehľadnosť: 0,25;
}

Tieto nastavenia krytia sa prekladajú do 25 percent. To znamená, že obrázok sa zobrazí ako 1/4 jeho normálnej priehľadnosti. Úplne nepriehľadné bez priehľadnosti by bolo 100 percent, zatiaľ čo 0 percent by bolo úplne priehľadné.

instagram viewer

Ďalej, aby bol obraz jasný (alebo presnejšie úplne nepriehľadný), keď nad ním umiestnite myš, pridali by ste nasledujúce:

.greydout: hover {
-webkit-nepriehľadnosť: 1;
-moz-nepriehľadnosť: 1;
nepriehľadnosť: 1;
}

Ďalšie úpravy nepriehľadnosti

Všimnite si, že v týchto príkladoch používame verzie pravidla s predponou dodávateľa, aby sme zaistili spätnú kompatibilitu pre staršie verzie týchto prehľadávačov. Aj keď je to dobrý postup, pravidlo nepriehľadnosti prehliadače dobre podporujúa tieto riadky s predponou dodávateľa je bezpečné vypustiť.

Nie je dôvod, aby ste tieto predpony nezahrnuli, ak chcete zabezpečiť podporu pre staršie verzie prehľadávača. Nezabudnite však dodržiavať akceptovaný osvedčený postup ukončenia deklarácie normálnou, predponou verzie štýlu.

Pri nasadení na webe je táto úprava krytia prudkou zmenou. Po prvé, je to sivá a potom nie, bez prechodných stavov medzi týmito dvoma. Je ako vypínač - zapnutý alebo vypnutý. Toto je možno to, čo chcete, ale môžete tiež experimentovať so zmenou, ktorá je postupnejšia.

Ak chcete pridať pekný efekt a dosiahnuť postupné blednutie, pridajte znak prechod nehnuteľnosť:

.šedá
trieda: .šedá {
-webkit-nepriehľadnosť: 0,25;
-moz-nepriehľadnosť: 0,25;
nepriehľadnosť: 0,25;
-webkit-transition: všetky 3 s uľahčujú;
-moz-prechod: všetky 3 s uľahčujú;
-ms-transition: všetky 3 s uľahčujú;
-o-prechod: všetky 3 s uľahčujú;
prechod: všetky 3 s uľahčujú;
}

instagram story viewer