CSS3 Transiroj Krei Nice Fade Efektoj
Retejaj diseñistoj longe deziris pli da kontrolo super la paĝoj, kiujn ili kreis kiam CSS3 trafis la scenon. La novaj stiloj enkondukitaj en CSS3 donis al profesiaj retejo la kapablon aldoni fotojn-efektojn al iliaj paĝoj. Ĉi tio inkludis proprietojn kiel ŝildaj ombroj kaj brilas , rondaj anguloj, kaj pli. CSS3 ankaŭ enkondukis kuraĝajn efikojn, kiuj povas esti uzataj por krei belan interagadon en retejoj.
Unu tre bela vida efekto, kiun vi povas aldoni al elementoj en via retejo per CSS3, devas fari ilin malplenigi kaj ekstere uzante kombinaĵon de la propraĵoj por opakeco kaj transiro. Ĉi tio estas facila kaj bone subtenata maniero por fari viajn paĝojn pli interagaj kreante malplenajn areojn, kiuj fokusiĝas kiam retejo vizitanto faras ion, kiel ŝvebi tiun elementon.
Ni rigardu, kiel facile estas aldoni ĉi tiun interaktan vidan efikon al diversaj elementoj en viaj retpaĝoj ...
Lasu #? An? O Malfacilecon Sur Ŝvebado
Ni komencos rigardante kiel ŝanĝi la opakecon de bildo kiam kliento ŝvebas super tiu elemento. Por ĉi tiu ekzemplo (la HTML estas montrita sube) Mi uzas bildon kun la klasa atributo de greydout.
Por kreigi ĝin, ni aldonas la jenajn regulojn al nia CSS-stilfolio:
.greydout {
-speco-opakeco: 0.25;
-moz-opakeco: 0.25;
opakeco: 0.25;
}
Ĉi tiuj opacaj agordoj tradukas al 25%. Ĉi tio signifas, ke la bildo estos montrita kiel 1/4 de ĝia normala travidebleco. Plene opaka kun neniu travidebleco estus 100% dum 0% estus plene travidebla.
Poste, fari la bildon klare (aŭ pli precize, fariĝi tute opaka) kiam la muso estas kovrita super ĝi, vi aldonus la: ŝvebado de pseudo-klaso:
.greydout: ŝvebu {
-speco-opakeco: 1;
-moz-opakeco: 1;
opakeco: 1;
}
Vi rimarkos, ke pro ĉi tiuj ekzemploj mi uzas la preferantajn versiojn de la regulo de la regulo por certigi reen kongruon por pli malnovaj versioj de tiuj retumiloj. Dum ĉi tio estas bona praktiko, la realeco estas, ke la opakeco regas nun bone subtenata de retumiloj kaj ĝi estas sufiĉe sekura faligi tiujn vendistojn prefiksitajn liniojn. Ankoraŭ tiel, ankaŭ ne ekzistas kialo por ne inkluzivi ĉi tiujn prefiksojn, se vi volas certigi subtenon por pli malnovaj retumilaj versioj. Nur certu, ke vi sekvu la plej bonan praktikon de fini la deklaron kun la normala, ne-prefiksita versio de la stilo.
Se vi disfaldis ĉi tion en retejo, vi vidus, ke ĉi tiu opakeco estas tre abrupta ŝanĝo. Unue ĝi estas griza kaj tiam ĝi ne estas, sen interimaj ŝtatoj inter tiuj du. Ĝi estas kiel malpeza ŝaltilo - sur aŭ ekstere. Ĉi tio eble estas kion vi deziras, sed vi eble ankaŭ volas eksperimenti per ŝanĝo, kiu estas pli laŭgrada.
Por aldoni vere belan efikon kaj fari ĉi tiun malplenigon laŭgrade, vi volas aldoni la transirecon al la klaso .greydout:
.greydout {
-speco-opakeco: 0.25;
-moz-opakeco: 0.25;
opakeco: 0.25;
-speco-transiro: ĉiuj 3-a facileco;
-moz-transiro: ĉiuj 3-a facileco;
-ms-transiro: ĉiuj 3-a facileco;
-o-transiro: ĉiuj 3s facileco;
transiro: ĉiuj 3s facileco;
}
Kun ĉi tiu kodo, la ŝanĝo transirus iom post iom ol simple ŝaltante bruske.
Denove, ni uzas kelkajn vendistojn prefiksitajn regulojn ĉi tie. Transiro ne estas tiel subtenata kiel opakeco, do ĉi tiuj prefiksoj havas senton.
Unu afero por memori, kiel vi planas ĉi tiujn interagojn, estas, ke la ekranaj aparatoj ne havas "ŝvebadon", do tiuj efikoj ofte perdiĝas al iu ajn uzanta taksan ekranan aparaton kiel poŝtelefonon. La transiro ofte okazas, sed okazas tiel rapide, ke ili vere ne povas vidi. Tio bone estas, se vi aldonas ĉi tion kiel belan bonan efikon, sed evitas kompreni ajnajn ŝanĝojn, kiujn bezonas esti videblaj por enhavo.
Fading Out Estas Ebla Tro
Vi ne devas komenci per maldolĉa bildo, vi povas uzi transirojn kaj opakecon por malplenigi ekstere de tute opaka bildo. Uzante la saman bildon, nur kun klaso de kunfade:
class = "withfadeout">
Same kiel antaŭe, vi ŝanĝas la opakecon uzante la: ŝvebi elektilon:
.withfadeout {
-speco-transiro: ĉiuj 2-a facileco-en-ekstere;
-moz-transiro: ĉiuj 2-a facileco-en-ekstere;
-ms-transiro: ĉiuj 2-a facileco-en-ekstere;
-o-transiro: ĉiuj 2-a facileco-en-ekstere;
transiro: ĉiuj 2s facileco en ekstere;
}
.withfadeout: ŝvebu {
-speco-opakeco: 0.25;
-moz-opakeco: 0.25;
opakeco: 0.25;
}
En ĉi tiu ekzemplo, la bildo transirus de tute opaka al iom travidebla - la reverso de nia unua ekzemplo.
Irante Beyond Bildoj
Estas bonega, ke vi povas apliki ĉi tiujn vidajn translokojn kaj flanklasojn al bildoj, sed vi ne estas limigita al nur uzado de bildoj kun ĉi tiuj CSS-efikoj. Vi povas facile fari CSS-stilitajn butonojn, kiuj malfiksas kiam alklakis kaj tenis. Vi simple metus la opakecon per la: aktiva pseŭdo-klaso kaj metos la transiron sur la klaso, kiu difinas la butonon. Alklaku kaj tenu ĉi tiun butonon por vidi, kio okazas.
Eblas fari esence ajna vida elemento malfiksi kiam ŝvebis super aŭ alklakis. En ĉi tiu ekzemplo mi ŝanĝas la opakecon de la div kaj la koloron de la teksto kiam la muso estas super ĝi. Jen la CSS:
#myDiv {
larĝa: 280px;
fonkoloro: # 557A47;
koloro: #dfdfdf;
kompletigo: 10px;
-speco-transiro: ĉiuj 4-a facileco-ekstere 0s;
-moz-transiro: ĉiuj 4-a facileco-ekstere 0s;
-ms-transiro: ĉiuj 4-a facileco-ekstere 0s;
-o-transiro: ĉiuj 4s facileco-ekstere 0s;
transiro: ĉiuj 4s facileco ekstere 0s;
}
#myDiv: ŝvebu {
-speco-opakeco: 0.25;
-moz-opakeco: 0.25;
opakeco: 0.25;
koloro: # 000;
}
Navigaj menuoj povas utiligi de Fading Fona Koloroj
En ĉi tiu simpla navigila menuo, la fonkoloro malrapide eliras kaj ekstere kiel muso super la menueroj. Jen la HTML:
- Hejmo
- CSS3 Lerniloj
- Propraĵoj de CSS3
Kaj jen la CSS:
ul # sampleNav {listo de listo: neniu; }
ul # sampleNav li {
montri: inline;
flosas: maldekstre;
kompletigo: 5px 15px;
rando: 0 5px;
-speco-transiro: ĉiuj 2-a linearaj;
-moz-transiro: ĉiuj 2-a linearaj;
-ms-transiro: ĉiuj 2-a linearaj;
-o-transiro: ĉiuj 2-a linearaj;
transiro: ĉiuj 2s lineara;
}
ul # sampleNav li a {teksto-dekoracio: nenio; }
ul # sampleNav li: ŝvebu {
fonkoloro: # DAF197;
}
Foliumilo Subtenado
Kiel mi jam tuŝis kelkajn fojojn, ĉi tiuj stiloj havas tre bonan retumatan subtenon, do vi rajtas uzi ilin sen neniu timo. La sola escepto al ĉi tio estas multe pli malnovaj versioj de Interreto Esploristo, sed kun la lastatempa decido de Microsoft por fini subtenon por ĉiuj versioj de IE sub 11, ĉi tiuj pli malnovaj foliumiloj fariĝas malpli aŭ malpli da afero - kaj realis, se pli malnova retumilo ne vidu ĉi tiun malplenan transiron, tio ne devus esti grava problemo. Dum vi konfinos ĉi tiujn specojn de efikoj al ĝuaj interagoj kaj ne fidas al ili funkciigi funkciojn aŭ malkaŝi ŝlosilan enhavon, tiam pli malnovaj foliumiloj, kiuj ne subtenas la efikojn, ricevos malpli ĝuan sperton, sed uzantoj sur tiuj retumiloj eĉ ne scias la diferencon, precipe se ili povas uzi la retejon kiel normala kaj ricevi la informon, kiun ili bezonas.
Ekstra Amuzo: Interŝanĝi Du Bildojn
Jen ekzemplo de kiel malfiksi unu bildon en alian. Uzu la HTML:
Kaj la CSS, kiu faras plene travidebla dum la alia estas tute opaka kaj tiam la transiro interŝanĝas la du:
.swapMe img {-webkit-transition: ĉiuj 1s facile-en-ekstere; -moz-transiro: ĉiuj 1-a facileco-en-ekstere; -ms-transiro: ĉiuj 1-a facileco-en-ekstere; -o-transiro: ĉiuj 1-a facileco-en-ekstere; transiro: ĉiuj 1 facileco; } .swap1, .swapMe: ŝvebado .swap2 {-webkit-opacity: 1; -moz-opakeco: 1; opakeco: 1; } .swapMe: ŝvebado .swap1, .swap2 {-webkit-opacity: 0; -moz-opakeco: 0; opakeco: 0; }