Panna CSS3 abil veebilehtede elemendid tuhmuma

The CSS3-s kasutusele võetud uued stiilid andis veebiprofessionaalidele võimaluse lisada oma lehtedele Photoshopi-laadseid efekte. Üks visuaalne efekt, mille saate lisada CSS3 on muuta veebilehed interaktiivseks, luues tuhmunud alad, mis on fookuses siis, kui saidi külastaja midagi teeb, näiteks hõljutades kursorit selle elemendi kohal. See efekt kasutab kombinatsiooni läbipaistmatus ja üleminek.

Muutke kursori peal läbipaistmatust

Üks interaktiivne element on muuta pildi läbipaistmatust, kui klient hõljub selle elemendi kohal. Selles näites (HTML on näidatud allpool) kasutame pilti klassi atribuudiga hallipäev.

Halliks muutmiseks lisage oma CSS-i stiililehele järgmised stiilireeglid:

.greydout {
-veebikomplekti läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
}

Need läbipaistmatuse sätted tähendavad 25 protsenti. See tähendab, et pilti näidatakse 1/4 ulatuses selle tavalisest läbipaistvusest. Täiesti läbipaistmatu ilma läbipaistvuseta oleks 100 protsenti, samas kui 0 protsenti oleks täiesti läbipaistev.

instagram viewer

Järgmisena lisage järgmine: et pilt saaks selgeks (või täpsemini, muutuks täielikult läbipaistmatuks), kui hiir selle kohal hõljub:

.greydout: hõljutage {
-veebikomplekt läbipaistmatus: 1;
-moz-läbipaistmatus: 1;
läbipaistmatus: 1;
}

Rohkem läbipaistmatuse korrigeerimisi

Märkate, et nende näidete puhul kasutame reegli tarnija eesliidetud versioone, et tagada nende brauserite vanemate versioonide tagurpidi ühilduvus. Kuigi see on hea tava, brauserid toetavad läbipaistmatuse reeglit hästija on ohutu need müüja eesliidetud read maha jätta.

Sellegipoolest pole põhjust neid eesliiteid mitte lisada, kui soovite tagada vanemate brauseriversioonide tugi. Järgige kindlasti aktsepteeritud parimat tava, kuidas deklaratsioon lõpetatakse stiili tavalise, eesliiteta versiooniga.

Saidil juurutatuna on see läbipaistmatuse korrigeerimine järsk muudatus. Esiteks on see hall ja siis ei ole, ilma et nende kahe vahel oleks ajutisi olekuid. See on nagu valguslüliti - sisse või välja. See võib olla see, mida soovite, kuid võite katsetada ka järkjärgulisemat muudatust.

Kena efekti lisamiseks ja selle tuhmumise järkjärguliseks muutmiseks lisage üleminek vara:

.greydout
klass: .greydout {
-veebikomplekti läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
-veebikomplektile üleminek: kõik kolm lihtsustuvad;
-moz-üleminek: kõik 3 lihtsustavad;
-ms-üleminek: kõik 3 lihtsustavad;
-o-üleminek: kõik 3 lihtsustavad;
üleminek: kõik 3 lihtsustavad;
}