Tranżizzjonijiet CSS3 Oħloq Effetti ta 'Fade Wisq
Disinjaturi tal-web kienu ilhom mixtieqa aktar kontroll fuq il-paġni li kienu qed joħolqu meta CSS3 laqat ix-xena. L -istili l-ġodda introdotti fis-CSS3 taw lill-professjonisti tal-internet il-kapaċità li jżidu l-effetti ta 'Photoshop mal-paġni tagħhom. Dan inkluda proprjetajiet bħal dellijiet tal-waqgħa u glows , kantunieri ttundjati, u aktar. CSS3 introduċa wkoll effetti bħall-animazzjoni li jistgħu jintużaw biex tinħoloq interattività tajba fis-siti.
Effett viżwali sbieħ ħafna tista 'żżid ma' elementi fil-websajt tiegħek billi tuża CSS3 huwa li tagħmilhom jinħassu u jintfew bl-użu ta 'kombinazzjoni tal-proprjetajiet għall- opaċità u t-transizzjoni. Dan huwa mod faċli u sostnut tajjeb biex il-paġni tiegħek isiru aktar interattivi billi jinħolqu oqsma faded li jidħlu f'fokus meta viżitatur tas-sit jagħmel xi ħaġa, bħal li toqgħod fuq dak l-element.
Ejja nħarsu lejn kemm hu faċli li żżid dan l-effett viżwali interattiv ma 'diversi elementi fuq il-paġni web tiegħek.
Ħalli l-Opaċità tal-Bidla fuq il-Hover
Se nibdew billi nħarsu lejn kif tista 'tinbidel l-opaċità ta' immaġni meta klijent ikun qed toqgħod fuq dak l-element. Għal dan l-eżempju (l-HTML huwa muri hawn taħt) Qed nagħmel użu ta 'immaġni bl-attribut tal-klassi ta' greydout.
Biex inħarsuh, aħna żid ir-regoli ta 'l-istil li ġejjin għall-stylesheet tas-CSS tagħna:
.greydout {
-webkit-opaċità: 0.25;
-moz-opaċità: 0.25;
opaċità: 0.25;
}
Dawn l-issettjar tal-opaċità jgħaddu għal 25%. Dan ifisser li l-immaġini se tintwera bħala 1/4 tat-trasparenza normali tagħha. Kompletament opaka mingħajr trasparenza tkun 100% filwaqt li 0% tkun totalment trasparenti.
Sussegwentement, biex l-immaġni toħroġ ċara (jew b'mod aktar preċiż, biex issir kompletament opaka) meta l-maws jittajjar fuqha, tista 'żżid il-: pseudo-klassi imbagħad titbaxxa:
.greydout: hover {
-webkit-opaċità: 1;
-moz-opaċità: 1;
opaċità: 1;
}
Tinduna li, għal dawn l-eżempji, qed nagħmel użu mill-verżjonijiet prefixjati tal-bejjiegħ tar-regola biex niżgura kompatibilità b'lura għal verżjonijiet qodma ta 'dawk il-browsers. Filwaqt li din hija prattika tajba, ir-realtà hi li r-regola ta 'l-opaċità issa hija appoġġjata sew mill-browsers u huwa pjuttost tajjeb li tinżel dawk il-linji prefixati minn bejjiegħ. Xorta waħda, m'hemm l-ebda raġuni għalfejn ma tinkludix dawn il-prefissi jekk trid tiżgura appoġġ għal verżjonijiet tal-browser aktar qodma. Sempliċement kun żgur li ssegwi l-aħjar prattika aċċettata li ttemm id-dikjarazzjoni bil-verżjoni normali u mhux prefixata tal-istil.
Jekk skjerat dan f'sit, tara li dan l-aġġustament ta 'opaċità huwa bidla f'daqqa. L-ewwel huwa griż u mela mhux, mingħajr stati interim bejn dawk it-tnejn. Huwa bħal swiċċ tad-dawl - mixgħul jew mitfi. Dan jista 'jkun dak li trid, iżda tista' wkoll tkun trid tesperimenta b'bidla li tkun aktar gradwali.
Biex iżżid effett verament sbieħ u tagħmel dan jinħass gradwali, trid iżżid il-proprjetà ta 'transizzjoni għall-klassi .greydout:
.greydout {
-webkit-opaċità: 0.25;
-moz-opaċità: 0.25;
opaċità: 0.25;
-webkit-transition: kollha 3s faċilità;
-moz-transition: kollha 3s faċilità;
-ms-tranżizzjoni: it-3 faċilità kollha;
-o-transition: kollha 3s faċilità;
tranżizzjoni: it-3 faċilità kollha;
}
B'din il-kodiċi, il-bidla tinbidel gradwalment aktar milli sempliċement tinbidel f'daqqa.
Għal darb'oħra, qed nużaw numru ta 'regoli prefixi tal-bejjiegħ hawn. It-tranżizzjoni mhix appoġġjata sewwa bħala opaċità, għalhekk dawn il-prefissi jagħmlu sens.
Ħaġa waħda li tiftakar kif qed tippjana dawn l-interazzjonijiet hija li l-apparati ta 'touch screen m'għandhomx "imbagħad jerġgħu" l-istat, u għalhekk dawn l-effetti ta' spiss jintilfu fuq xi ħadd li juża apparat ta 'touch screen bħal mowbajl. It-tranżizzjoni spiss isseħħ, iżda jiġri hekk malajr li verament ma jistgħux jidhru. Dan huwa tajjeb jekk qed iżżid dan bħala effett ta 'bonus sabiħ, imma jevita kwalunkwe tibdil li BIL-ĦEĠA tkun tidher għall-kontenut li għandu jinftiehem.
It-tneħħija ta 'barra hija possibbli wisq
M'għandekx għalfejn tibda b'immaġni faded, tista 'tuża t-tranżizzjonijiet u l-opaċità biex titneħħa minn immaġni kompletament opaka. Uża l-istess immaġni, biss bi klassi ta 'fadeout:
klassi = "ma fadeout">
Eżatt bħal qabel, tibdel l-opaċità bl-użu tas-selettur tal-imblukkar:
.withfadeout {
-webkit-transition: kollha 2s faċilità-in-out;
-moz-transition: kollha 2s faċilità-in-out;
-ms-tranżizzjoni: kollha 2s faċilità-in-out;
-o-transition: kollha 2s faċilità-in-out;
tranżizzjoni: l-faċilità ta '2-in-out kollha;
}
.withfadeout: hover {
-webkit-opaċità: 0.25;
-moz-opaċità: 0.25;
opaċità: 0.25;
}
F'dan l-eżempju, l-istampa se transizzjoni minn kollox opaka għal kemmxejn trasparenti - il-maqlub ta 'l-ewwel eżempju tagħna.
Imorru Lilhinn mill-Stampi
Huwa eċċellenti li tista 'tapplika dawn it-tranżizzjonijiet viżwali u tgħib għal immaġini, imma m'intix limitat biss għall-użu ta' immaġini b'dawn l-effetti CSS. Tista 'faċilment tagħmel buttuni CSS-styled li fade meta għafast u miżmuma. Tkun biss issettja l-opaċità billi tuża: psewdo-klassi attiva u poġġi t-tranżizzjoni fuq il-klassi li tiddefinixxi l-buttuna. Ikklikkja u żomm din il-buttuna biex tara x'jiġri.
Huwa possibbli li essenzjalment kwalunkwe element viżiv jinħall meta titbattal jew tkun għafast fuqha. F'dan l-eżempju nibdel l-opaċità tad-div u l-kulur tat-test meta l-maws ikun fuqha. Hawn hu l-CSS:
#myDiv {
wisa ': 280px;
kulur fl-isfond: # 557A47;
kulur: #dfdfdf;
ikkuttunar: 10px;
-webkit-transition: l-4s ease-out 0s;
-moz-transition: l-4s ease-out 0s;
-ms-tranżizzjoni: l-eċċess ta 'l-4s 0s;
-o-transizzjoni: l-eċċess ta 'l-4s 0s;
tranżizzjoni: l-eħfef 4s 0s;
}
#myDiv: imbagħad jerġgħu {
-webkit-opaċità: 0.25;
-moz-opaċità: 0.25;
opaċità: 0.25;
kulur: # 000;
}
L-Oġġetti ta 'Navigazzjoni jistgħu jibbenefikaw minn kuluri ta' Sfond
F'dan il-menu tan-navigazzjoni sempliċi, il-kulur fl-isfond jinżel bil-mod u bil-mod kif I maws fuq l-oġġetti tal-menu. Hawn hu l-HTML:
- Dar
- CSS3 Tutorials
- CSS3 Properties
U hawn hija s-CSS:
ul # sampleNav {list-style: none; }
ul # kampjunNav li {
wiri: inline;
float: left;
ikkuttunar: 5px 15px;
marġini: 0 5px;
-webkit-transition: kollha 2s lineari;
-moz-transition: kollha 2s lineari;
-ms-transizzjoni: kollha 2s lineari;
-o-transizzjoni: kollha 2s lineari;
transizzjoni: kollha 2s lineari;
}
ul # sampleNav li a {text-decoration: xejn; }
ul # sampleNav li: hover {
kulur fl-isfond: # DAF197;
}
Appoġġ għall-Browser
Kif diġà semmejt xi ftit drabi, dawn l-istili għandhom appoġġ tal-brawżer tajjeb ħafna, għalhekk għandek tħossok liberu li tużahom mingħajr tħassib. L-unika eċċezzjoni għal dan hija verżjonijiet anzjani ħafna ta 'Internet Explorer, iżda mad-deċiżjoni riċenti ta' Microsoft li tieqaf appoġġ għall-verżjonijiet kollha ta 'IE taħt il-11, dawn browsers anzjani qed isiru inqas u inqas ta' kwistjoni - u realistikament, jekk browser anzjan ma ara din it-tranżizzjoni fade, li m'għandhiex tkun problema ewlenija. Sakemm inti tillimita dawn it-tipi ta 'effetti għal interazzjonijiet pjaċevoli u ma tistrieħx fuqhom biex issuq il-funzjonalità jew tiżvela kontenut ewlieni, allura browsers antiki li ma jappoġġjawx l-effetti se jkollhom esperjenza inqas pjaċevoli, iżda l-utenti fuq dawk il-browsers lanqas biss taf id-differenza, speċjalment jekk tista 'tuża s-sit bħala normali u tikseb l-informazzjoni li għandhom bżonn.
Pjaċir Extra; Swap Żewġ Stampi
Hawn hu eżempju ta 'kif fade immaġni waħda f'ieħor. Uża l-HTML:
U s-CSS li jagħmel waħda trasparenti għal kollox filwaqt li l-oħra hija kompletament opaka u mbagħad it-tranżizzjoni tpartat it-tnejn:
.swapMe img {-webkit-transition: kull faċilità ta 'ħeffa; -moz-transition: l-eħfef-1-out; -ms-tranżizzjoni: kollha 1s faċilità-in-out; -o-transizzjoni: kollha 1s faċilità-in-out; tranżizzjoni: l-eħfef-1-out; } .swap1, .swapMe: hover .swap2 {-webkit-opaċità: 1; -moz-opaċità: 1; opaċità: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opaċità: 0; -moz-opaċità: 0; opaċità: 0; }