Background gradient ב - CSS3

Background-gradient היא תכונה חדשה, המשמחת מאוד רבים מבין מעצבי האתרים, המשבצים לעתים קרובות gradients באתרים שלהם. הבעיה היא שלא כל הדפדפנים תומכים בתכונה זו ולכן יש להיזהר בה וכן להשתמש בתחיליות המיוחדות לדפדפנים המובילים.

תחביר התכונה background-gradient

תחביר לדפדפני מוזילה כפיירפוקס ועוד:

-moz-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])

תחביר לדפדפני webkit כגון כרום וספארי:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

תחביר לדפדפני אופרה

background-image: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

דוגמאות קוד  ל- gradient ב - CSS3

קוד לאינטרנט אקספלורר

/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

קוד לדפדפני webkit כגון כרום וספארי:

/* for webkit browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));}

קוד לפיירפוקס 3.6+

/* for firefox 3.6+ */
bbackground: -moz-linear-gradient(top, #ccc, #000);

 

דוגמת קוד כוללת ליצירת gradient כרקע לאלמנטים

דוגמת הקוד הבאה כוללת קוד למרבית סוגי הדפדפנים וכן למצבים שבהם דפדפנים אינם תומכים בתכונה זו כלל.

.gradient-bg {

/* fallback/image non-cover color */
background-color: #1a82f7;

/* fallback image */
background-image: url(images/fallback-gradient.png);

/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10+ */
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

 

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש