CSS3 Awọn iyipada Ṣẹda Awọn ipalara ti o dara
Awọn apẹẹrẹ oju-iwe ayelujara ti fẹ fẹ diẹ sii ju awọn oju ewe ti wọn n ṣẹda nigbati CSS3 lu aaye naa. Awọn aza titun ti a ṣe ni CSS3 fun awọn akosemo wẹẹbu ni agbara lati fi awọn ipa-fọto si awọn oju-iwe wọn. Eyi ni awọn ohun-ini bi awọn iho gbigbọn ati awọn glows , awọn igun yika, ati siwaju sii. CSS3 tun ṣe awọn ipa-idanilaraya ti o le ṣee lo lati ṣẹda ibaraẹnisọrọ to dara lori ojula.
Ipa ojulowo ti o dara julọ ti o le fi kun si awọn eroja ti o wa ninu aaye ayelujara rẹ nipa lilo CSS3 ni lati jẹ ki wọn ṣagbe ni ati jade nipa lilo apapo awọn ohun-ini fun opacity ati iyipada. Eyi jẹ ọna ti o rọrun ati ti a ṣe iranlọwọ lati ṣe awọn oju-iwe rẹ diẹ ibanisọrọ nipa sisẹ awọn agbegbe ti o ti sọnu ti o wa sinu aifọwọyi nigbati alejo alejo kan ba ṣe nkan kan, bi fifaju lori ẹri naa.
Jẹ ki a ṣe akiyesi bi o ṣe rọrun ti o jẹ lati fikun ipa oju-ọna ti o nlo pẹlu awọn eroja oriṣiriṣi lori awọn oju-iwe ayelujara rẹ.
Jẹ ki O Yiyan Opacity lori Isinmi
A yoo bẹrẹ nipa wiwo bi o ṣe le yi opacity ti aworan pada nigbati alabara ba n ṣatunṣe lori irọ naa. Fun apẹẹrẹ yii (awọn HTML ṣe afihan ni isalẹ) Mo n lo aworan pẹlu ipalara kilasi ti greydout.
Lati jẹ ki o ṣaṣeyọri, a fi awọn ofin ti o wa si isalẹ si CSS stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Awọn eto opacity wọnyi tumọ si 25%. Eyi tumọ si pe aworan naa ni yoo han bi 1/4 ti akoyawo deede rẹ. Opa ti o ni kikun pẹlu laisi akoyawo yoo jẹ 100% lakoko ti 0% yoo jẹ pipe.
Nigbamii ti, lati mu aworan naa han (tabi diẹ sii daradara, lati di oṣuwọn oṣuwọn) nigbati o ba fi isin po lori rẹ, iwọ yoo ṣe afikun:
.greydout: hover {
-iwadi-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Iwọ yoo ṣe akiyesi pe, fun awọn apẹẹrẹ wọnyi, Mo nlo awọn ọja ti o ti ṣaja ti o ti ṣajọ ti ofin naa lati rii daju pe afẹyinti ibamu fun awọn ẹya agbalagba ti awọn aṣàwákiri náà. Lakoko ti o jẹ iṣe ti o dara julọ, otitọ ni pe ofin ti opacity ti ni atilẹyin nipasẹ awọn aṣàwákiri ati pe o jẹ ailewu ailewu lati sọ awọn ila ti o ti ṣaju silẹ ti awọn onibara. Ṣi, tun ko si idi ti o ko gbọdọ fi awọn prefixes wọnyi wa ti o ba fẹ rii daju iranlọwọ fun awọn ẹya ẹrọ lilọ kiri agbalagba. O kan rii daju pe o tẹle ilana ti o dara ju ti o gba julọ ti ipari ipari pẹlu asọye deede, ti a ko le ṣalaye ti ara.
Ti o ba gbe eleyi lori aaye kan, iwọ yoo ri pe atunṣe opacity yii jẹ iyipada pupọ. Ni akọkọ o jẹ grẹy ati lẹhinna kii ṣe, laisi ipinnu laarin awọn meji. O dabi iwọn ina - tan tabi pa. Eyi le jẹ ohun ti o fẹ, ṣugbọn o tun le fẹ ṣàdánwò pẹlu iyipada ti o n tẹ diẹ sii.
Lati ṣe afikun ipa ti o dara julọ ki o si ṣe igbasẹ mimu yii, iwọ fẹ lati fi awọn ohun-ini gbigbe si ẹgbẹ kilasii:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-iwadii igbiyanju-gbogboiṣe: gbogbo 3s Ease;
-moz-transition: gbogbo 3s Ease;
-ms-transition: gbogbo 3s Ease;
-o-transition: gbogbo awọn 3s Ease;
iyipada: gbogbo awọn 3s Ease;
}
Pẹlu koodu yi, iyipada yoo ṣe iyipada ni kuku ju dipo yiyi pada laiṣe.
Lẹẹkankan, a nlo nọmba ti awọn ofin ti a fi ofin ti o wajajaja nibi. A ko ṣe atilẹyin ti ilọsiwaju bi opacity, nitorina awọn prefixes ṣe ori.
Ohun kan lati ranti bi o ṣe gbero awọn ibaraẹnisọrọ wọnyi ni pe awọn iboju iboju ifọwọkan ko ni ipo ipo "hover", nitorina awọn ipalara wọnyi npadanu nigbagbogbo lori ẹnikẹni nipa lilo ẹrọ iboju ifọwọkan gẹgẹbi foonu alagbeka kan. Awọn iyipada yoo maa ṣẹlẹ, ṣugbọn o ṣẹlẹ ki sare pe wọn ko le ri gan. Ti o jẹ dara ti o ba fi eyi kun bi idiyele ti o dara ju, ṣugbọn yago fun awọn iyipada ti o nilo lati wa fun akoonu lati ni oye.
Fading Out is Possible Too
O ko ni lati bẹrẹ pẹlu aworan ti o ti sọnu, o le lo awọn itumọ ati agbara ominira lati fa jade kuro ni aworan opa patapata. Lilo aworan kanna, nikan pẹlu ẹgbẹ kan pẹlu iffadeout:
kilasi = "withfadeout">
Gẹgẹ bi tẹlẹ, o yi opacity pada pẹlu lilo: olutọ rọba:
.withfadeout {
-iwadii igbiyanju-gbogboiṣe: gbogbo awọn 2s jẹ ailewu-in-jade;
-moz-transition: gbogbo awọn 2s irorun-in-jade;
-ms-transition: gbogbo awọn 2s irorun-in-jade;
-o-transition: gbogbo awọn 2s jẹ ailewu-in-jade;
Ilana: gbogbo awọn 2s jẹ ailewu-jade;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ni apẹẹrẹ yii, aworan yoo ṣe iyipada lati inu oṣuwọn patapata si itumọ sihin - iyipada ti apẹrẹ akọkọ wa.
Ti n lọ kọja awọn aworan
O jẹ o tayọ pe o le lo awọn itejade wiwo ati ti o lọ si awọn aworan, ṣugbọn iwọ ko ni opin si lilo awọn aworan nikan pẹlu awọn ipa CSS. O le ṣe awọn bọtini CSS-styled ni rọọrun ti o bajẹ nigbati o ba tẹ ati ti o waye. Iwọ yoo ṣeto opacity nikan pẹlu lilo: ile-iṣẹ ti nṣiṣe lọwọ ati ki o fi iyipada si kilasi ti o ṣe alaye bọtini naa. Tẹ ki o si mu bọtini yii lati wo ohun ti o ṣẹlẹ.
O ṣee ṣe lati ṣe pataki eyikeyi iwoye ojuṣe nigba ti o ba kọja tabi ti tẹ. Ni apẹẹrẹ yi Mo yi ipacity ti div ati awọ ti ọrọ naa pada nigbati o ba wa lori rẹ. Eyi ni CSS:
#myDiv {
iwọn: 280px;
lẹhin-awọ: # 557A47;
awọ: #dfdfdf;
padding: 10px;
-iwadii igbiyanju-gbogboiṣe: gbogbo awọn 4s Easy-out 0s;
-moz-transition: gbogbo 4s Ease-jade 0s;
-ms-transition: gbogbo 4s Ease-jade 0s;
-o-transition: gbogbo 4s Ease-jade 0s;
Ilana: gbogbo awọn 4s Easy-out 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
awọ: # 000;
}
Awọn akojọ aṣayan Lilọ kiri le ṣe anfaani lati awọn awọ Ikọlẹ Fading
Ninu akojọ aṣayan lilọ kiri yi rọrun awọ-awọ lẹhin rẹ n lọra laiyara sinu ati jade bi mo ti kọrin lori awọn ohun akojọ. Eyi ni HTML:
- Ile
- CSS3 Tutorials
- Awọn ohun-elo CSS3
Ati nibi ni CSS:
ul # sampleNav {akojọ-ara: kò; }
ul # sampleNav li {
àfihàn: ìlà;
float: osi;
padding: 5px 15px;
ala: 0 5px;
-iwadii-ipa-ọna-gbogbo: gbogbo awọn ila-ọna 2s;
-moz-transition: gbogbo 2s ilaini;
-ms-transition: gbogbo 2s ilaini;
-o-transition: gbogbo awọn ila 2s;
Ilana: gbogbo awọn ọna asopọ 2s;
}
ul # sampleNav ni a {ọrọ-ọṣọ: kò; }
ul # sampleNav li: hover {
awọ-lẹhin: # DAF197;
}
Abojuto Burausa
Bi mo ti fi ọwọ kan awọn igba diẹ tẹlẹ, awọn aza wọnyi ni atilẹyin lilọ kiri ti o dara julọ, nitorina o yẹ ki o ni ominira lati lo wọn laisi ijiduro. Iyatọ kan si eyi jẹ ẹya ẹya ti o ti dagba ju Internet Explorer lọ, ṣugbọn pẹlu ipinnu ti Microsoft ṣe laipe lati pari atilẹyin fun gbogbo awọn ẹya IE ti o wa ni isalẹ 11, awọn aṣàwákiri agbalagba wọnyi ti di eni ti o kere si ti nkan - ati ni otitọ, bi ẹrọ lilọ kiri agbalagba ko ba wo iyipada yii, eyi ko yẹ ki o jẹ iṣoro pataki kan. Niwọn igba ti o ba da awọn iru ipa wọnyi si awọn ibaraẹnisọrọ igbadun ati ki o ko gbekele wọn lati ṣisẹ iṣẹ tabi fi akoonu han, lẹhinna awọn aṣàwákiri agbalagba ti ko ṣe atilẹyin awọn ipa yoo ni iriri ti o kere ju, ṣugbọn awọn olumulo lori awọn aṣàwákiri naa kii yoo mọ iyatọ, paapaa ti wọn ba le lo ojula naa bi deede ati ki o gba alaye ti wọn nilo.
Afikun Funni; Swap Awọn Aworan meji
Eyi jẹ apẹẹrẹ ti bi o ṣe le fọ aworan kan si ẹlomiiran. Lo awọn HTML:
Ati CSS ti o mu ki ọkan ni kikun gbangba nigba ti ẹlomiiran ni o dara julọ ati lẹhinna iyipada ṣe opo meji:
.swapMe img {-webkit-transition: gbogbo awọn 1s jẹ irọra-in-jade; -moz-transition: gbogbo awọn 1 jẹ irorun-in-jade; -ms-transition: gbogbo awọn 1s irorun-in-jade; -o-transition: gbogbo awọn 1s jẹ irora-in-jade; Agbegbe: gbogbo 1s jẹ irora-ni-jade; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }