CSS3 trantsizioak sortu Nice Fade Effects
Web diseinatzaileek nahi baino gehiago nahi izan zuten CSS3k eszenatokia igortzen zuten orrialdeetan kontrolatzen. CSS3-n sartutako estilo berriek web-eko profesionalek Photoshop-en antzeko efektuak gehitzeko gaitasuna eman zien. Honek propietateak zituen: itzalaren itzalak eta distirak , ertz biribilak, eta gehiago. CSS3k animazio-antzeko efektuak ere sartzen ditu webguneetan interaktibitate atsegina sortzeko.
Efektu bisual oso atsegina zure webguneko elementuak gehi ditzakezu CSS3 erabiliz, opakutasunerako eta trantsizioko propietateen konbinazio bat erabiliz desagertzeko. Hau da zure orrialdeak interaktiboago bihurtzeko modu erraza eta ongi moldatua, gunearen bisitaria zerbait egiten duenean gune desegokiak sortzen dituztenak, elementu horren gainean pasatzean.
Arakatu begirada bat nola erraza den zure web orrietan hainbat elementu bisualak eragina izan dezan.
Utzi Opakotasuna aldatzea Hover on
Irudi baten opakutasuna nola aldatzen den aztertzen hasiko gara bezeroak elementu horren gainean pasatzen duenean. Adibide honetarako (HTMLa azaltzen da) Irudi bat erabiltzen dut greydout-eko klase-atributuarekin.
Arbeltzea lortzeko, honako estilo-arauak gehitzen dizkiogu gure CSS estilo-orriari:
.greydout {
-webkit-opacity: 0.25;
-moz-opakutasuna: 0.25;
opakutasuna: 0.25;
}
Oparotasun ezarpen hauek% 25era itzultzen dira. Horrek esan nahi du irudia gardentasun normalaren 1/4 gisa agertuko dela. Gardena ez den guztiz opakoa% 100 izango litzateke eta 0% guztiz gardena izango litzateke.
Hurrengoa, irudia argia (edo zehaztasunez, opakua izan dadin) sagua gainetik pasatzean sartzen denean, gehitu: pasatzean pseudo-klase:
.greydout: pasatzean {
-webkit-opacity: 1;
-moz-opakutasuna: 1;
opakutasuna: 1;
}
Esate baterako, arauaren bertsioen hornitzaile aurrezenbakiak erabiltzen ditut, arakatzaile horien bertsio zaharragoak bateragarri egiteko. Praktika on bat den bitartean, errealitatea opakutasun araua arduratzen da nabigatzaileek ongi onartzen dutela eta nahiko segurua da saltzaileen aurrez aurre dauden lerroei jaramon egitea. Oraindik ere, ez dago arrazoirik aurrikus hauek ez egiteko, nabigatzaile zaharrago bertsioetarako euskarria bermatu nahi baduzu. Ziurtatu deklarazioa amaitzean praktika onen onartutakoa jarraitzea, estiloaren bertsio arruntaren aurrefabrikatuarekin.
Gune batean hau zabaldu baduzu, opakutasun doikuntza hau oso aldakorra den aldaketaren bat izango litzateke. Lehenik grisa da eta ez da horrelako bi estatuen artean. Pizteko argia bezalakoa da - aktibatu edo desaktibatuta. Hau nahi duzuna izan daiteke, baina nahiago baduzu, pixkanaka-pixkanaka aldatzen den aldaketa batekin esperimentatu.
Ederra benetan efektua gehitzeko eta pixkanaka desagertu egin dadin, trantsizio-propietatea gehitu behar duzu .greydout klasean:
.greydout {
-webkit-opacity: 0.25;
-moz-opakutasuna: 0.25;
opakutasuna: 0.25;
-webkit-transition: 3s erraztasuna;
-moz-trantsizioa: guztiak 3s erraztasuna;
-ms-trantsizioa: guztiak 3s erraztasuna;
-o-trantsizioa: guztiak 3s erraztasuna;
trantsizioa: 3 erraztasuna;
}
Kodea honekin, aldaketa aldatu egingo litzateke pixkanaka-pixkanaka, baizik eta etengabe aldatuz.
Berriro ere, saltzaileen aurrizki arauak erabiltzen ditugu hemen. Transizioa ez da ongi onartzen opakutasun gisa, beraz aurrizkien horiek zentzurik ez badute.
Interakzio horiek planifikatzeko gauza bat gogoratzea da ukipen-pantailako gailuak ez dituztela "estutu" egoera bat, beraz, efektu horiek maiz entzuten dira edonork telefono mugikor bezalako ukipen-gailu bat erabiliz. Transizioa askotan gertatuko da, baina oso azkar gertatzen da benetan ez direla ikusten. Horixe da hau bonus efektu atsegina gehitzen ari bazara, baina ulertu behar ez den edonolako aldaketak saihestu.
Degradatua posible da gehiegi
Irudi deseginez hasten ez zenuke, trantsizioak eta opakutasuna erabil ditzakezu irudi guztiz opakotik desagertzeko. Irudi berdina erabiliz, bakarkako klase batekin bakarrik:
class = "withfadeout">
Aurretik bezala, opakutasuna alda dezakezu: hover aukeratzailea:
.withfadeout {
-webkit-transition: 2s erraz-in-out;
-moz-trantsizioa: 2s erraztasuna-out;
-ms-transition: 2s erraz-in-out;
-o-trantsizioa: 2s erraz-out-a;
trantsizioa: 2s erraz-in-out;
}
.withfadeout: pasatzean {
-webkit-opacity: 0.25;
-moz-opakutasuna: 0.25;
opakutasuna: 0.25;
}
Adibide honetan, irudia guztiz gardena eta gardena den trantsizioa litzateke, gure lehen adibidearen alderantzizkoa.
Irudietatik haratago
Bikaina da ikusizko trantsizio horiek aplikatu eta irudiak desagertzea, baina CSS efektu horiek dituzten irudiak soilik mugatuta daude. Egin klik eta sakatu bitartean desagertzen diren CSS estiloko botoiak erraz egin ditzakezu. Objektibotasuna ezarri nahi zenuke: pseudo-klase aktiboa eta jarri botoia definitzen duen klasean trantsizioa. Egin klik eta mantendu botoi hau zer gertatzen den ikusteko.
Ezinbestekoa da elementu bisual guztiak desagertzen direnean edo gainean sakatuz gero. Adibide honetan, divaren opakotasuna eta testuaren kolorea aldatzen dut sagua gainetik pasatzean. Hemen dago CSSa:
#myDiv {
zabalera: 280 px;
background-color: # 557A47;
kolorea: #dfdfdf;
betegarria: 10px;
-webkit-transition: 4s erraz-out 0s;
-moz-trantsizioa: 4s erraz-out 0s guztiak;
-ms-trantsizioa: 4s erraz-out 0s guztiak;
-o-trantsizioa: 4s erraz-out 0s guztiak;
trantsizioa: 4s erraz-out 0s guztiak;
}
#myDiv: pasatzean {
-webkit-opacity: 0.25;
-moz-opakutasuna: 0.25;
opakutasuna: 0.25;
kolorea: # 000;
}
Nabigazio menuak atzeko planoko koloreak desgai daitezke
Nabigazio-menu erraz honetan, atzealdeko kolorea poliki-poliki desagertzen da saguarekin menu-elementuen gainean. Hona hemen HTMLa:
- Hasiera
- CSS3 Tutorialak
- CSS3 propietateak
Eta hemen CSS da:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
bistaratu: inline;
flotatzen: utzi;
betegarria: 5px 15px;
marjina: 0 5 px;
-webkit-transition: 2s lineal guztiak;
-moz-transition: 2s lineal guztiak;
-ms-transition: 2s lineal guztiak;
-o-trantsizioa: 2 lineal guztiak;
trantsizioa: 2s lineal guztiak;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
atzeko planoaren kolorea: # DAF197;
}
Arakatzailearen laguntza
Dagoeneko hainbat aldiz ukitu dudanez, estilo hauen arakatzaileen laguntza oso ona dute, beraz, dohainik erabili behar dituzu trepidation gabe. Salbuespen bakarra Internet Explorer-en bertsio zaharragoa da, baina Microsoft-en beheko IEren bertsio guztien euskarrirako azken erabakia hartzearekin batera 11, nabigatzaile zahar horiek gero eta arazo gutxiago dira eta, errealki, nabigatzaile zaharragoa ez bada ikusi fade trantsizio hau, hau ez da arazo nagusirik. Bakoitzak efektu mota horiek interakzio atseginak mugatzen dituzunean eta funtzio funtzionala gidatzeko edo gakoaren edukia ager ez dezaten, efektuak onartzen ez dituzten nabigatzaile zaharragoek esperientzia atsegina lortuko dute, baina nabigatzaile horien erabiltzaileek ez dute Ezagut itzazu desberdintasunak, batez ere gunea normal gisa erabili dezaketen eta behar duten informazioa lortzeko.
Extra Fun; Bi irudien trukatzea
Hemen irudi bat desagertzeko beste adibide bat da. Erabili HTMLa:
Eta guztiz gardena den CSS bat guztiz opakotzat hartzen duen bitartean eta trantsizioa bi trukatzen ditu:
.swapMe img {-webkit-transition: 1s erraz-out-a; -moz-trantsizioa: 1s erraz-out-a; -ms-transition: 1s erraz-out-out; -o-trantsizioa: 1s erraz-out-a; trantsizioa: 1s erraz-out-a; } .swap1, .swapMe: pasatzean .swap2 {-webkit-opacity: 1; -moz-opakutasuna: 1; opakutasuna: 1; } .swapMe: pasa .swap1, .swap2 {-webkit-opacity: 0; -moz-opakutasuna: 0; opakutasuna: 0; }