CSS3 Transitions Create Nice Fade Effects
וועב דיזיינערז האט לאַנג געוואלט מער קאָנטראָל איבער די בלעטער וואָס זיי האבן געשאפן ווען קסס 3 שלאָגן די סצענע. די נייע סטיילז באַקענענ אין קסס 3 האט וועב פּראָפעססיאָנאַלס די פיייקייַט צו לייגן פאָטאָשאָפּ-ווי יפעקץ צו זייער בלעטער. דעם אַרייַנגערעכנט פּראָפּערטיעס ווי פאַלן שאַדאָוז און גלאָווס , ראַונדיד עקן, און מער. CSS3 אויך באַקענענ אַנאַמיישאַן-ווי יפעקץ אַז קענען ווערן גענוצט צו שאַפֿן פייַן ינטעראַקטיוויטי אויף זייטלעך.
איינער זייער פייַן וויזשאַוואַל ווירקונג איר קענען לייגן צו עלעמענטן אויף דיין וועבזייַטל ניצן CSS3 איז צו מאַכן זיי וועלקן אין און אויס ניצן אַ קאָמבינאַציע פון די פּראָפּערטיעס פֿאַר אָופּאַסאַטי און יבערגאַנג. דאָס איז אַ גרינג און געזונט געשטיצט וועג צו מאַכן דיין בלעטער מער ינטעראַקטיוו דורך שאַפֿן פאַדעד געביטן וואָס קומען אין פאָקוס ווען אַ פּלאַץ גאַסט טוט עפּעס ווי כאַווערינג איבער דעם עלעמענט.
זאל ס נעמען אַ קוק בייַ ווי גרינג עס איז צו לייגן דעם ינטעראַקטינג וויסואַל ווירקונג צו פאַרשידן עלעמענטן אויף דיין וועב זייַטלעך.
זאל טוישן די אָפּשיידונג אויף האָווער
מיר וועלן אָנהייבן דורך קוקן בייַ ווי צו טוישן די אָופּאַסאַטי פון אַ בילד ווען אַ קונה איז כאַווערינג איבער דעם עלעמענט. פֿאַר דעם בייַשפּיל (די HTML איז געוויזן אונטן) איך נוצן אַ בילד מיט די סאָרט אַטריביוט פון גריידאַוט.
צו מאַכן עס גריידיד אויס, מיר לייגן די פאלגענדע נוסח כּללים צו אונדזער קסס סטילעשעעט:
.גרויסונג {
-וועבקיט-אָופּאַסאַטי: 0.25;
-מאָז-אָופּאַסאַטי: 0.25;
אָופּאַסאַטי: 0.25;
}
די אָפּאַסיאַס סעטטינגס איבערזעצן צו 25%. דעם מיטל אַז די בילד וועט זיין געוויזן ווי 1/4 פון זייַן נאָרמאַל דורכזעיקייַט. גאָר אָופּייקאַן מיט קיין דורכזעיקייַט וואָלט זיין 100%, while 0% would be totally transparent.
ווייַטער, צו מאַכן די בילד קומען קלאָר (אָדער מער אַקיעראַטלי, צו ווערן גאָר אָופּייק) ווען די מויז איז כאַווערד איבער אים, איר וואָלט לייגן די: האָווער פּסעודאָ-קלאַס:
.גרויסונג: hover {
-וועבקיט-אָופּאַסאַטי: 1;
-מאָז-אָופּאַסאַטי: 1;
אָופּאַסאַטי: 1;
}
איר וועט באמערקן אַז, פֿאַר די ביישפילן, איך בין ניצן די פאַרקויפער פּרעפיקסעד ווערסיעס פון די הערשן צו ענשור צוריק קאַמפּאַטאַבילאַטי פֿאַר עלטערע ווערסיעס פון די בראַוזערז. בשעת דעם איז אַ גוטע פיר, די פאַקט איז אַז די אָופּאַסאַטי רעגולירן איז איצט געזונט געשטיצט דורך בראַוזערז און עס איז שיין זיכער צו פאַלן די ווענדאָר פּרעפיקסעד שורות. נאָך, עס איז אויך קיין סיבה נישט צו אַרייַננעמען די פּרעפיקסעס אויב איר ווילן צו ענשור שטיצן פֿאַר עלטערע בלעטערער ווערסיעס. נאָר זיין זיכער צו נאָכפאָלגן די אַפּטאַמייזד בעסטער פיר פון ענדיקן די דעקלאַראַציע מיט דער נאָרמאַל, ונ-פּרעפיקסעד ווערסיע פון דעם נוסח.
אויב איר האט דיפּלויד אויף דעם פּלאַץ, איר וועט זען אַז דאָס אָפּאַסאַסי אַדזשאַסטמאַנט איז אַ זייער פּלוצעמדיק ענדערונג. ערשטער עס ס גרוי און דערנאך עס איז נישט, מיט קיין ינטערים שטאַטן צווישן די צוויי. עס איז ווי אַ ליכט באַשטימען - אויף אָדער אַוועק. דעם קען זיין וואָס איר ווילט, אָבער איר קען אויך ווילן צו עקספּערימענט מיט אַ ענדערונג וואָס איז מער גראַדזשואַל.
צו לייגן אַ טאַקע פייַן ווירקונג און מאַכן דעם וועלקן ביסלעכווייַז, איר ווילן צו לייגן די יבערגאַנג פאַרמאָג צו די .גרויסע קלאַס:
.גרויסונג {
-וועבקיט-אָופּאַסאַטי: 0.25;
-מאָז-אָופּאַסאַטי: 0.25;
אָופּאַסאַטי: 0.25;
-וועבקיט-יבערגאַנג: אַלע 3 ס יז;
-מאָז-יבערגאַנג: אַלע 3 ס יז;
-מס-יבערגאַנג: אַלע 3 ס יז;
-א-יבערגאַנג: אַלע 3 ס יז;
יבערגאַנג: אַלע 3 ס יז;
}
מיט דעם קאָד, די ענדערונג וואָלט יבערגאַנג ביסלעכווייַז ווי נאָר סוויטשט פּלוצעמדיק.
אַמאָל ווידער מיר ניצן אַ נומער פון ווענדאָר פּרעפיקסעד כּללים דאָ. יבערגאַנג איז ניט ווי געזונט געשטיצט ווי אָופּאַסאַטי, אַזוי די פּרעפיקסעס טאָן זינען.
איין זאַך צו געדענקען ווי איר פּלאַן די ינטעראַקטיאָנס איז אַז פאַרבינדן פאַרשטעלן דעוויסעס טאָן ניט האָבן אַ "האָווער" שטאַט, אַזוי די יפעקס זענען אָפט פאַרלאָרן אויף ווער עס יז ניצן אַ פאַרבינדן פאַרשטעלן מיטל ווי אַ מאָביל טעלעפאָן. דער יבערגאַנג וועט אָפט פּאַסירן, אָבער עס כאַפּאַנז אַזוי שנעל אַז זיי טאַקע קענען נישט זען. אַז איז פייַן אויב איר זענט אַדינג דעם ווי אַ פייַן באָנוס ווירקונג, אָבער ויסמייַדן ענדערונגען וואָס דאַרפֿן צו זיין געזען פֿאַר צופרידן צו זיין פארשטאנען.
פאַדינג אָוט איז מעגלעך צו
איר טאָן ניט האָבן צו אָנהייבן מיט אַ פיידאַד בילד, איר קענען נוצן טראַנזישאַנז און אָופּאַסאַטי צו פיידן פון אַ גאָר אָופּייק בילד. ניצן די זעלבע בילד, נאָר מיט אַ סאָרט פון מיטפאַדעאָוט:
class = "withfadeout">
פּונקט ווי פריער, איר טוישן די אָופּאַסאַטי ניצן די: האָווער סעלעקטאָר:
.withfadeout {
-וועבקיט-יבערגאַנג: אַלע 2 ס יז-אין-אויס;
-מאָז-יבערגאַנג: אַלע 2 ס יז-אין-אויס;
-מס-יבערגאַנג: אַלע 2 ס יז-אין-אויס;
-א-יבערגאַנג: אַלע 2 ס יז-אין-אויס;
יבערגאַנג: אַלע 2 ס יז-אין-אויס;
}
.withfadeout: hover {
-וועבקיט-אָופּאַסאַטי: 0.25;
-מאָז-אָופּאַסאַטי: 0.25;
אָופּאַסאַטי: 0.25;
}
אין דעם בייַשפּיל, די בילד וואָלט יבערגאַנג פון גאָר אָופּייק צו עפּעס טראַנספּעראַנט - די פאַרקערט פון אונדזער ערשטער בייַשפּיל.
גיי ווייַטער פון בילדער
עס איז ויסגעצייכנט אַז איר קענען צולייגן די וויזשאַוואַל טראַנזישאַנז און פיידז צו בילדער, אָבער איר זענען נישט באגרענעצט צו נאָר נוצן בילדער מיט די קסס יפעקס. איר קענען לייכט מאַכן קסס-סטיילד קנעפּלעך אַז בלינד ווען קליקט און געהאלטן. איר וואָלט נאָר שטעלן די אָופּאַסאַטי ניצן די: אַקטיוו פּסעוודאָ קלאַס און שטעלן די יבערגאַנג אויף די סאָרט וואָס דיפיינז דעם קנעפּל. דריקט און האַלטן דעם קנעפּל צו זען וואָס כאַפּאַנז.
עס איז מעגלעך צו מאַכן יסענשאַלי קיין וויסואַל עלעמענט וועלקן ווען כאַווערד איבער אָדער קליקט אויף. אין דעם בייַשפּיל איך טוישן די אָופּאַסאַטי פון די דיוו און די קאָלירן פון די טעקסט ווען דער מויז איז איבער אים. דאָ איז די קסס:
#myDiv {
ברייט: 280 פּקס;
background-color: # 557A47;
color: #dfdfdf;
padding: 10px;
-וועבקיט-יבערגאַנג: אַלע 4 ס יז-אויס 0 ס;
-מאָז-יבערגאַנג: אַלע 4 ס יז-אויס 0 ס;
-מז-יבערגאַנג: אַלע 4 ס יז-אויס 0 ס;
-א-יבערגאַנג: אַלע 4 ס יז-אויס 0 ס;
יבערגאַנג: אַלע 4 ס יז-אויס 0 ס;
}
#myDiv: hover {
-וועבקיט-אָופּאַסאַטי: 0.25;
-מאָז-אָופּאַסאַטי: 0.25;
אָופּאַסאַטי: 0.25;
קאָליר: # 000;
}
נאַוויגאַציע מענוס קענען נוץ פון פאַדינג באַקקגראָונד קאָלאָרס
אין דעם פּשוט נאַוויגאַציע מעניו די הינטערגרונט פֿאַרב פיידז סלאָולי אין און אויס ווי איך מויז איבער די מעניו זאכן. דאָ איז די HTML:
- היים
- CSS3 Tutorials
- CSS3 Properties
און דאָס איז די CSS:
אין אַלע # מוסטערנאַוו {רשימה-סטיל: קיין; }
ul # sampleNav li {
ווייַז: ינלינע;
פלאָוט: לינקס;
padding: 5px 15px;
גרענעץ: 0 5 פּקס;
-וועבקיט-יבערגאַנג: אַלע 2 ס לינעאַר;
-מאָז-יבערגאַנג: אַלע 2 ס לינעאַר;
-מס-יבערגאַנג: אַלע 2 ס לינעאַר;
-א-יבערגאַנג: אַלע 2 ס לינעאַר;
יבערגאַנג: אַלע 2 ס לינעאַר;
}
די # מוסטער איז אַ {טעקסט-באַפּוצונג: גאָרניט; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
בראַוזער סופּפּאָרט
ווי איך האב שוין עטלעכע מאל גערירט, די סטיילז האָבן זייער גוט בלעטערער שטיצן, אַזוי איר זאָל פילן פֿרייַ צו נוצן זיי אָן קיין טרעפּידיישאַן. דער בלויז ויסנעם צו דעם איז פיל עלטערע ווערסיעס פון Internet Explorer, אָבער מיט מיקראָסאָפט פריש באַשלוס צו סוף שטיצן פֿאַר אַלע ווערסיעס פון IE ונטער 11, די עלטערע בראַוזערז ווערן ווייניקער און ווייניקער פון אַן אַרויסגעבן - און ריאַליסטיקלי, אויב אַן עלטערע בלעטערער טוט נישט זען דעם וועלקן יבערגאַנג, וואָס זאָל נישט זיין אַ הויפּט פּראָבלעם. ווי לאַנג ווי איר באַגרענעצן די קינדס פון יפעקץ צו ענדזשאַנירד ינטעראַקטיאָנס און טאָן ניט פאַרלאָזנ אויף זיי צו פאָרן פאַנגקשאַנאַליטי אָדער אַנטדעקן דער שליסל אינהאַלט, דעמאָלט עלטערע בראַוזערז וואָס טאָן ניט שטיצן די יפעקס וועט באַקומען אַ ווייניקער ענדזשויאַבאַל דערפאַרונג, אָבער וסערס אויף די בראַוזערז וועט נישט אַפֿילו וויסן די חילוק, ספּעציעל אויב זיי קענען נוצן דעם פּלאַץ ווי נאָרמאַל און באַקומען די אינפֿאָרמאַציע וואָס זיי דאַרפֿן.
עקסטרע ון; סוואַפּ צוויי בילדער
דאָ איז אַ בייַשפּיל פון ווי צו וועלקן איין בילד אין אנדערן. ניצן די HTML:
און די קסס וואָס מאכט איינער גאָר טראַנספּעראַנט, אָבער די אנדערע איז גאָר אָופּייק און דעמאָלט דער יבערגאַנג סוואַפּס די צוויי:
.swapMe img {-webkit-transition: all 1s ease-in-out; -מאָז-יבערגאַנג: אַלע 1 ס יז-אין-אויס; -מז-יבערגאַנג: אַלע 1 ס יז-אין-אויס; -א-יבערגאַנג: אַלע 1 ס יז-אין-אויס; יבערגאַנג: אַלע 1 ס יז-אין-אויס; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -מאָז-אָופּאַסאַטי: 1; אָופּאַסאַטי: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -מאַז-אָופּאַסאַטי: 0; אָופּאַסאַטי: 0; }