Trawsnewidiadau CSS3 Creu Effeithiau Fade Nice
Roedd dylunwyr gwe wedi dymuno mwy o reolaeth dros y tudalennau roedden nhw'n eu creu pan fydd CSS3 yn cyrraedd yr olygfa. Rhoddodd yr arddulliau newydd a gyflwynwyd yn CSS3 roddwyr proffesiynol y we i ychwanegu effeithiau Photoshop fel eu tudalennau. Roedd hyn yn cynnwys eiddo fel cysgodion gollwng a glowiau , corneli crwn, a mwy. Hefyd, cyflwynodd CSS3 effeithiau tebyg i animeiddio y gellir eu defnyddio i greu rhyngweithgarwch neis ar safleoedd.
Un effaith weledol iawn y gallwch ei ychwanegu at elfennau yn eich gwefan gan ddefnyddio CSS3 yw eu gwneud yn diflannu yn ôl ac allan gan ddefnyddio cyfuniad o'r eiddo ar gyfer dibyniaeth a throsglwyddo. Mae hon yn ffordd hawdd ac wedi'i chefnogi'n dda i wneud eich tudalennau'n fwy rhyngweithiol trwy greu ardaloedd sydd wedi'u pellhau sy'n dod i ffocws pan fydd ymwelydd safle yn gwneud rhywbeth, fel troi dros yr elfen honno.
Edrychwn ar pa mor hawdd yw ychwanegu'r effaith weledol ryngweithiol hon i wahanol elfennau ar eich tudalennau gwe ..
Gadewch i ni Newid yn Agored ar Gludo
Byddwn yn dechrau trwy edrych ar sut i newid cymhlethdod delwedd pan fo cwsmer yn twyllo dros yr elfen honno. Ar gyfer yr enghraifft hon (dangosir yr HTML isod) Rwy'n defnyddio delwedd gyda phriodoledd dosbarth y glaswellt.
Er mwyn ei wneud yn llwyr, rydym yn ychwanegu'r rheolau arddull canlynol i'n taflen arddull CSS:
.greydout {
-wisg-opasrwydd: 0.25;
-moz-opacity: 0.25;
didwylledd: 0.25;
}
Mae'r gosodiadau cymhlethdodau hyn yn cyfieithu i 25%. Golyga hyn y bydd y ddelwedd yn cael ei ddangos fel 1/4 o'i dryloywder arferol. Byddai'n gwbl aneglur heb unrhyw dryloywder yn 100% tra byddai 0% yn hollol dryloyw.
Nesaf, i wneud y ddelwedd yn dod yn glir (neu yn fwy cywir, i fod yn hollol aneglur) pan fydd y llygoden yn cael ei hovered droso, byddech yn ychwanegu'r: ffug ddosbarth:
.greydout: hover {
-wisg-opacity: 1;
-moz-opacity: 1;
didwylledd: 1;
}
Byddwch yn sylwi, ar gyfer yr enghreifftiau hyn, yr wyf yn defnyddio fersiynau prefixed gwerthwr y rheol i sicrhau cydweddoldeb yn ôl i fersiynau hŷn o'r porwyr hynny. Er bod hyn yn arfer da, y gwir yw bod y rheol cymhlethdod bellach yn cael ei gefnogi'n dda gan borwyr ac mae'n eithaf diogel i ollwng y llinellau rhagosodedig hynny. Yn dal i fod, nid oes unrhyw reswm hefyd i beidio â chynnwys y rhagddodiadau hyn os ydych chi am sicrhau cefnogaeth ar gyfer fersiynau porwr hŷn. Dim ond sicrhewch y byddwch yn dilyn yr arfer gorau a dderbynnir o orffen y datganiad gyda'r fersiwn arferol, heb ei ragnodi o'r arddull.
Pe baech wedi defnyddio hyn ar y safle, byddech yn gweld bod y newid cymhlethdod hwn yn newid sydyn iawn. Yn gyntaf mae'n llwyd ac yna nid ydyw, heb unrhyw wladwriaethau interim rhwng y ddau. Mae fel newid ysgafn - ymlaen neu i ffwrdd. Efallai mai dyma'r hyn yr hoffech chi, ond efallai y byddwch hefyd am arbrofi gyda newid sy'n fwy graddol.
I ychwanegu effaith braf iawn a gwneud y pylu hwn yn raddol, rydych chi am ychwanegu'r eiddo trosglwyddo i'r dosbarth .greydout:
.greydout {
-wisg-opasrwydd: 0.25;
-moz-opacity: 0.25;
didwylledd: 0.25;
-webkit-transition: all 3s rhwyddineb;
-moz-transition: pawb 3s rhwyddineb;
-ms-transition: pawb 3s rhwydd;
-a-drawsnewid: pob un yn hawdd;
pontio: pob un yn hawdd;
}
Gyda'r cod hwn, byddai'r newid yn newid yn raddol yn hytrach na newid yn sydyn.
Unwaith eto, rydym yn defnyddio nifer o reolau prefixed gwerthwr yma. Nid yw trawsnewid yn cael ei gefnogi mor ddibwys, felly mae'r rhagddodiadau hyn yn gwneud synnwyr.
Un peth i'w gofio wrth i chi gynllunio'r rhyngweithiadau hyn yw nad oes gan ddyfeisiau sgrîn gyffwrdd wladwriaeth "hofran", felly bydd yr effeithiau hyn yn aml yn cael eu colli ar unrhyw un sy'n defnyddio dyfais sgrîn gyffwrdd fel ffôn symudol. Yn aml bydd y trawsnewid yn digwydd, ond mae'n digwydd mor gyflym na ellir eu gweld mewn gwirionedd. Mae hynny'n iawn os ydych chi'n ychwanegu hyn fel effaith bonws neis, ond osgoi unrhyw ddealltwriaeth y mae ANGEN i'w weld ar gyfer cynnwys i'w ddeall.
Mae Fading Out yn Posibl yn Rhy
Does dim rhaid i chi ddechrau gyda delwedd ddiddymedig, gallwch ddefnyddio trawsnewidiadau a chryn dipyn i ddileu allan o ddelwedd gwbl anghyson. Gan ddefnyddio'r un ddelwedd, dim ond gyda dosbarth o ddiffyg:
class = "withfadeout">
Yn union fel o'r blaen, rydych chi'n newid y cymhlethdod gan ddefnyddio'r: dewiswr hofran:
.withfadeout {
-webkit-transition: pawb 2s rhwydd-allan;
-moz-transition: pob 2 yn rhwydd-i-allan;
-ms-transition: pawb 2s rhwydd-allan;
-a-drawsnewid: pob un o'r ddau yn hawdd i mewn;
pontio: yr holl 2 yn hawdd i mewn;
}
.withfadeout: hover {
-wisg-opasrwydd: 0.25;
-moz-opacity: 0.25;
didwylledd: 0.25;
}
Yn yr enghraifft hon, byddai'r ddelwedd yn trosglwyddo o gwbl ddibiog i rywfaint o dryloyw - cefn ein enghraifft gyntaf.
Mynd ar Draws Delweddau
Mae'n ardderchog y gallwch chi gymhwyso'r trawsnewidiadau gweledol hyn a ffilmiau i ddelweddau, ond nid ydych chi'n gyfyngedig i ddefnyddio delweddau gyda'r effeithiau CSS hyn. Gallwch chi wneud botymau CSS-styled yn hawdd sy'n pylu wrth glicio a chadw. Fe fyddech chi ond yn gosod y cymhlethdod gan ddefnyddio'r: ffug ddosbarth gweithredol a rhowch y newid ar y dosbarth sy'n diffinio'r botwm. Cliciwch a dal y botwm hwn i weld beth sy'n digwydd.
Mae'n bosib gwneud unrhyw elfen weledol yn pwyso yn y bôn pan gafodd ei chwyddo neu ei glicio arno. Yn yr enghraifft hon, rwy'n newid cymhlethdod y div a lliw y testun pan fydd y llygoden drosodd. Dyma'r CSS:
#myDiv {
lled: 280px;
cefndir-liw: # 557A47;
lliw: #dfdfdf;
padio: 10px;
-webkit-transition: all 4s ease-out 0s;
-moz-transition: pob 4s hawdd-allan 0s;
-ms-transition: pob 4s hawdd-allan 0s;
-a-drawsnewid: pob un o'r 4s hawdd-allan 0s;
pontio: pob un o'r 4s hawdd-allan 0s;
}
#myDiv: hover {
-wisg-opasrwydd: 0.25;
-moz-opacity: 0.25;
didwylledd: 0.25;
lliw: # 000;
}
Gall Bwydlenni Llywio Fanteisio ar Lliwiau Cefndir Fading
Yn y ddewislen lywio syml hwn, mae'r lliw cefndir yn pylu'n araf i mewn ac allan wrth i mi fynd i'r llygoden dros yr eitemau bwydlen. Dyma'r HTML:
- Cartref
- Tiwtorialau CSS3
- Eiddo CSS3
A dyma'r CSS:
ul # sampleNav {rhestr-arddull: dim; }
ul # sampleNav li {
arddangos: inline;
arnofio: chwith;
padio: 5px 15px;
ymyl: 0 5px;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-a-drawsnewid: pob 2 yn llinellol;
pontio: pob 2 yn llinellol;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
cefndir-liw: # DAF197;
}
Cymorth Porwr
Gan fy mod wedi cyffwrdd ag ychydig o weithiau eisoes, mae gan yr arddulliau hyn gefnogaeth porwr da iawn, felly dylech chi deimlo'n rhydd i'w defnyddio heb unrhyw ddirywiad. Yr unig eithriad i hyn yw fersiynau llawer hŷn o Internet Explorer, ond gyda phenderfyniad diweddar Microsoft i roi'r gorau i gefnogaeth ar gyfer pob fersiwn o IE isod 11, mae'r porwyr hŷn hyn yn dod yn llai a llai o broblem - ac yn realistig, os nad yw porwr hŷn yn gwneud hynny gweler y newid hwn yn flinedig, ni ddylai hynny fod yn broblem fawr. Cyn belled â'ch bod yn cyfyngu'r mathau hyn o effeithiau i ryngweithio pleserus ac nad ydynt yn dibynnu arnyn nhw i yrru ymarferoldeb neu ddatgelu cynnwys allweddol, yna bydd porwyr hŷn nad ydynt yn cefnogi'r effeithiau yn cael profiad llai pleserus, ond ni fydd defnyddwyr ar y porwyr hynny hyd yn oed yn gwybod y gwahaniaeth, yn enwedig os gallant ddefnyddio'r safle fel arfer a chael y wybodaeth sydd ei hangen arnynt.
Hwyl Ychwanegol; Cyfnewid Dau Ddelwedd
Dyma enghraifft o sut i dorri un ddelwedd i mewn i un arall. Defnyddiwch y HTML:
Ac mae'r CSS sy'n gwneud un yn hollol dryloyw tra bod y llall yn gwbl anghyson ac yna mae'r newid yn cyfnewid y ddau:
.swapMe img {-webkit-transition: all 1s easy-in-out; -moz-transition: all 1s easy-in-out; -ms-transition: all 1s easy-in-out; -a-drawsnewid: pob un yn hwylus-allan; pontio: pob un yn hawdd i mewn; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; didwylledd: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; didwylledd: 0; }