01 פון 04
שאַפֿן קרייַז-בראַוזער לינעאַר גראַדיענץ מיט קסס 3
לינעאַר גראַדיענץ
די מערסט פּראָסט טיפּ פון גראַדיענט איר וועט זען איז אַ לינעאַר גראַדיענט פון צוויי פארבן. דעם מיטל אַז דער גראַדיענט וועט קער אין אַ גלייַך שורה טשאַנגינג ביסלעכווייַז פון די ערשטער קאָליר צו די רגע צוזאמען אַז שורה. די בילד אויף דעם בלאַט ווייזט אַ פּשוט לינק-צו-רעכט גראַדיענט פון # 999 (פינצטער גרוי) צו # פפף (ווייַס).
לינעאַר גריידיאַנץ זענען די יזיאַסט צו דעפינירן און האָבן די מערסט שטיצן אין בראַוזערז. CSS3 לינעאַר גריידיאַנץ זענען געשטיצט אין אַנדרויד 2.3+, קראָום 1+, פירעפאָקס 3.6+, אָפּעראַ 11.1+, און סאַפאַרי 4+. Internet Explorer קענען לייגן גריידיאַנץ ניצן אַ פילטער און שטיצט זיי צוריק צו הייבן 5.5. דעם איז ניט CSS3, אָבער עס איז אַן אָפּציע פֿאַר קרייַז-בלעטער קאַמפּאַטאַבילאַטי.
ווען איר באַשיצן אַ גראַדיענט איר דאַרפֿן צו באַשטימען עטלעכע פאַרשידענע זאכן:
- וואָס טיפּ פון גראַדיענט עס איז - לינעאַר אָדער ריידיאַל
- ווו די גראַדיענט זאָל אָנהייבן
- ווו די גראַדיענט זאָל האַלטן
- וואָס פארבן זענען אין די גראַדיענט און ווו זיי זאָל אָנהייבן און האַלטן
צו באַשטימען לינעאַר גריידיאַנץ ניצן CSS3, איר שרייַבן:
לינעאַר-גראַדיענט ( ווינקל אָדער זייַט אָדער ווינקל , קאָלירן האַלטן , קאָלירן האַלטן )
- קודם איר דעפינירן דעם טיפּ פון גראַדיענט מיט די נאָמען לינעאַר- גראַדיענט.
- דערנאָך, איר באַשליסן די אָנהייב און האַלטן פונקטן פון די גראַדיענט אין איינער פון צוויי וועגן: די ווינקל פון די שורה אין דיגריז 0-359, מיט 0 דיגריז פּוינטינג גלייַך אַרויף. אָדער מיט די "זייַט אָדער ווינקל" פונקציאָנירן, אַזאַ ווי לינקס, רעכט, דנאָ, און שפּיץ. דאס וועט זיין דערקלערט אין מער דעטאַל אויף דער ווייַטער בלאַט. אויב איר לאָזן די אויס, די גראַדיענט וועט לויפן פון די שפּיץ צו די דנאָ פון די עלעמענט.
- דעמאָלט איר באַשליסן די קאָליר סטאַפּס. איר דעפינירן די פֿאַרב סטאַפּס מיט די קאָליר קאָד און אַ אַפּשאַנאַל פּראָצענט. דער פּראָצענט דערציילט דעם בלעטערער וווּ אויף די שורה צו אָנהייבן אָדער סוף מיט דעם קאָליר. די פעליקייַט איז צו שטעלן די פארבן יוואַנלי צוזאמען די שורה. איר וועט לערנען מער וועגן קאָליר סטאַפּס אויף זייַט 3.
אַזוי, צו באַשטימען דעם אויבן גראַדיענט מיט CSS3, איר שרייַבן:
לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפפף 100%);
און צו שטעלן עס ווי די הינטערגרונט פון אַ דיוו איר שרייבט:
div {
הינטערגרונט-בילד: לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפפף 100%;
}
בראַוזער יקסטענשאַנז פֿאַר קסס 3 לינעאַר גראַדיענץ
צו מאַכן דיין גראַדיענט צו אַרבעט קרייַז-בלעטערער, איר דאַרפֿן צו נוצן בלעטערער יקסטענשאַנז פֿאַר רובֿ בראַוזערז און אַ פילטער פֿאַר Internet Explorer 9 און נידעריקער (פאקטיש 2 פילטערס). אַלע פון די נעמען די זעלבע יסודות צו דעפינירן דיין גראַדיענט (אַחוץ אַז איר קענען בלויז דעפינירן 2-קאָליר גריידיאַנץ אין הייסט).
מייקראָסאָפֿט פילטערס און עקסטענסיאָן - Internet Explorer איז די מערסט טשאַלאַנדזשינג צו שטיצן, ווייַל איר דאַרפֿן דרייַ פאַרשידענע שורות צו שטיצן די פאַרשידענע בלעטערער ווערסיעס. צו באַקומען די אויבן גרוי צו ווייַס גראַדיענט איר וואָלט שרייַבן:
/ * IE 5.5-7 * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', גראַדיענטטיפּע = 1);
/ * IE 8-9 * /
-מס-פילטער: "ווייַטער: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff, GradientType = 1)";
/ * הייסט 10 * /
לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפפף 100%);
מאָזיללאַ עקסטענסיאָן די-מאָז-געשפּרייט אַרבעט ווי די CSS3 פאַרמאָג, נאָר מיט די-מאָז-געשפּרייט. צו באַקומען די אויבן גראַדיענט פֿאַר פירעפאָקס, שרייַבן:
-מאָז-לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפפף 100%);
אָפּעראַ עקסטענסיאָן -די -אָ-עקסטענסיאָן מוסיף גריידיאַנץ צו אָפּעראַ 11.1+. צו באַקומען די אויבן גראַדיענט, שרייַבן:
-א-לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפף 100%);
וועבקיט עקסטענסיאָן -די -וועבקיט-געשפּרייט אַרבעט ווי אַ CSS3 פאַרמאָג. צו באַשטימען די אויבן גראַדיענט פֿאַר סאַפאַרי 5.1 אָדער קראָום 10+ איר שרייַבן:
-וועבקיט-לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפף 100%);
עס איז אויך אַן עלטערע ווערסיע פון די וועבקיט געשפּרייט וואָס אַרבעט מיט קראָום 2+ און סאַפאַרי 4+. אין עס איר באַשליסן די טיפּ פון גראַדיענט ווי אַ ווערט, אלא ווי אין די פאַרמאָג נאָמען. צו באַקומען די גרוי צו ווייַס גראַדיענט מיט דעם פאַרלענגערונג, שרייַבן:
(0%, # 999999), קאָלירן האַלטן (100%, # פפפפף));
גאַנץ קסס 3 לינעאַר גראַדיענט קסס קאָוד
פֿאַר גאַנץ קרייַז-בלעטערער שטיצן צו באַקומען די גרוי צו ווייַס גראַדיענט אויבן איר זאָל ערשטער אַרייַננעמען אַ פאָלבאַקק האַרט קאָליר פֿאַר בראַוזערז וואָס טאָן ניט שטיצן גראַדיענץ, און די לעצט נומער זאָל זיין די CSS3 נוסח פֿאַר בראַוזערז וואָס זענען גאָר געהאָרכיק. אַזוי, איר שרייַבן:
הינטערגרונט: # 999999;
background: -moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
(0%, # 999999), קאָלירן-האַלטן (100%, # פפפפף));
background: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
הינטערגרונט: -א-לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפף 100%);
הינטערגרונט: -מאַס-לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפפף 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', גראַדיענטטיפּע = 1);
-מס-פילטער: ווייַטער: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', גראַדיענטטיפּע = 1);
הינטערגרונט: לינעאַר-גראַדיענט (לינקס, # 999999 0%, # עפפפף 100%);
די ווייַטער בלעטער אין דעם טוטאָריאַל דערקלערן די טיילן פון אַ גראַדיענט אין מער דעטאַל, און די לעצטע בלאַט ווייזט איר צו אַ געצייַג וואָס איז אַ ויסגעצייכנט וועג צו שאַפֿן קסס 3 גריידינגז אויטאָמאַטיש.
זען דעם לינעאַר גראַדיענט אין קאַמף ניצן נאָר קסס.
02 פון 04
שאפן דיאַגאָנאַל גראַדיענץ-די ווינקל פון די גראַדיענט
דער אָנהייב און האַלטן ווייזט באַשטימען די ווינקל פון די גראַדיענט. רובֿ לינעאַר גריידיאַנץ זענען פון שפּיץ צו דנאָ אָדער לינקס צו רעכט. אבער עס איז מעגלעך צו בויען אַ גראַדיענט אַז באוועגט אויף אַ דיאַגאָנאַל שורה. דער בילד אויף דעם בלאַט ווייַזט אַ פּשוט גראַדיענט וואָס באוועגט אין אַ 45 דיגרעס ווינקל אַריבער די בילד פון רעכט צו לינקס.
אַנגלעס צו דעפינירן די גראַדיענט ליניע
דער ווינקל איז אַ שורה אויף אַ ויסגעטראַכט קרייַז אין דעם צענטער פון דעם עלעמענט. 0 דענטאַלד ווייזט אַרויף, 90 דאָרט ווייזט צו די רעכט, 180 דאָרט ווייזט אַראָפּ, און 270 דעג ווייזט צו די לינקס. איר קענען דעפינירן קיין ווינקל פון 0-359 דיגריז.
איר זאָל טאָן אַז אין אַ קוואַדראַט, אַ 45 גראַד ווינקל מאָוועס פון די שפּיץ לינקס ווינקל צו די דנאָ רעכט, אָבער אין אַ גראָדעק די אָנהייב און סוף ווייזט זענען אַ ביסל אַרויס די פאָרעם, ווי איר קענען זען אין דעם בילד.
די מער פּראָסט וועג צו באַשטימען אַ דיאַגאָנאַל גראַדיענט איז צו באַשטימען אַ ווינקל, אַזאַ ווי שפּיץ רעכט און די גראַדיענט וועט קער פון דעם ווינקל צו די פאַרקערט ווינקל. איר קענען דעפינירן דעם אָנהייב פּאָסיאָן מיט די פאלגענדע טערמינען:
- אויבן
- רעכט
- bottom
- לינקס
- צענטער
און זיי קענען זיין קאַמביינד צו זיין מער ספּעציפיש, אַזאַ ווי:
- top right
- שפּיץ לינקס
- שפּיץ צענטער
- bottom right
- bottom left
- bottom center
- רעכט צענטער
- לינקס צענטער
דאָ איז די קסס פֿאַר אַ גראַדיענט ענלעך צו די איין פּיקטשערד, רויט צו ווייַס מאָווינג פון די שפּיץ רעכט ווינקל צו די דנאָ לינקס:
הינטערגרונט: ## 901 אַ 1 ק;
background-image: -moz-linear-gradient (right top, # 901A1C 0%, # FFFFFF 100%);
(0, # 901A1C), קאָלירן-האַלטן (1, #FFFFFF));
background: -webkit-linear-gradient (right top, # 901A1C 0%, #ffffff 100%);
הינטערגרונט: -א-לינעאַר-גראַדיענט (רעכט שפּיץ, # 901 אַ 1 ק 0%, # עפפפף 100%);
הינטערגרונט: -מאַס-לינעאַר-גראַדיענט (רעכט שפּיץ, # 901 אַ 1 ק 0%, # עפפפף 100%);
הינטערגרונט: לינעאַר-גראַדיענט (רעכט שפּיץ, # 901 אַ 1 ק 0%, # עפפפף 100%);
איר קען האָבן באמערקט אַז עס זענען קיין הייסט פילטערס אין דעם בייַשפּיל. וואָס איז ווייַל IE נאָר אַלאַוז צוויי טייפּס פון פילטערס: שפּיץ צו דנאָ (די פעליקייַט) און לינקס צו רעכט (מיט די גראַדיענטטיפּע = 1 באַשטימען).
זען דעם דיאַגאָנאַל לינעאַר גראַדיענט אין קאַמף ניצן נאָר קסס.
03 פון 04
Color Stops
מיט CSS3 לינעאַר גריידיאַנץ, איר קענען לייגן קייפל פארבן צו דיין גראַדיענט צו שאַפֿן אפילו פאַנסיער יפעקס. צו לייגן די פארבן, איר שטעלן נאָך פארבן צו דער סוף פון דיין פאַרמאָג, אפגעשיידט דורך קאָמבאַס. איר זאָל אַרייַננעמען ווו אויף די שורה די פארבן זאָל אָנהייבן אָדער סוף ווי געזונט.
Internet Explorer פילטערס בלויז שטיצן צוויי פֿאַרב סטאַפּס, אַזוי ווען איר בויען דעם גראַדיענט, איר זאָל נאָר אַרייַננעמען די ערשטער און צווייט פארבן איר ווילן צו אַרויסווייַזן.
דאָ איז די CSS פֿאַר די אויבן 3-קאָליר גראַדיענט:
background: #ffffff;
background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
(0%, # פפפפף), קאָלירן-האַלטן (51%, # 901 אַ 1 ק), קאָלירן-האַלטן
background: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
הינטערגרונט: -א-לינעאַר-גראַדיענט (לינקס, # עפפפף 0%, # 901 אַ 1 ק 51%, # פפפפף 100%);
הינטערגרונט: -מאַס-לינעאַר-גראַדיענט (לינקס, # עפפפף 0%, # 901 אַ 1 ק 51%, # פפפפף 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', גראַדיענטטיפּע = 1);
הינטערגרונט: לינעאַר-גראַדיענט (לינקס, # עפפפף 0%, # 901 אַ 1 ק 51%, # פפפפף 100%);
זען דעם לינעאַר גראַדיענט מיט דרייַ פֿאַרב סטאַפּס אין קאַמף ניצן נאָר קסס.
04 פון 04
מאַכן בילדינג גראַדיענץ גרינגער
עס זענען צוויי זייטלעך איך רעקאָמענדירן פֿאַר העלפּינג איר צו בויען גראַדיענץ, זיי יעדער האָבן בענעפיץ און דיסאַדוואַנטידזשיז צו זיי, איך האָבן נישט געפונען אַ גראַדיענט בילדער וואָס טוט אַלץ נאָך.
לעצט קסס גראַדיענט גענעראַטאָר
דעם גראַדיענט גענעראַטאָר איז זייער פאָלקס ווייַל עס פּערפאָרמז אין אַ ענלעך שטייגער צו גראַדיענט בילדערז אין מגילה ווי פאָטאָשאָפּ. איך אויך ווי עס ווייַל עס גיט אַלע די קסס יקסטענשאַנז, נישט נאָר וועבקיט און מאָזיללאַ. די פּראָבלעם מיט דעם גענעראַטאָר איז אַז עס נאָר שטיצט האָריזאָנטאַל און ווערטיקאַל גריידיאַנץ. אויב איר ווילן צו טאָן דיאַגאָנאַל גריידיאַנץ, איר האָבן צו גיין צו די אנדערע גענעראַטאָר איך רעקאָמענדירן.
CSS3 גראַדיענט גענעראַטאָר
דעם גענעראַטאָר גענומען מיר אַ ביסל מער צו פֿאַרשטיין ווי דער ערשטער איינער, אָבער עס טוט שטיצן טשאַנגינג די ריכטונג צו אַ דיאַגאָנאַל.
אויב איר וויסן פון אן אנדער קסס גראַדיענט גענעראַטאָר אַז איר ווי בעסער ווי די, ביטע לאָזן אונדז וויסן .