الدرس الرابع : عمل تدرج وظل لعناصر HTML ب ال CSS

* عمل تدرج وظل لعناصر HTML ب ال CSS مثال :
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}

كما يمكنك تغيير البداية والنهاية لهذا التدريج على الشكل التالي ;
#grad {
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, red , blue); /* Standard syntax */
}

#grad {
background: -webkit-linear-gradient(right, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}

#grad {
background: -webkit-linear-gradient(bottom right, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}

#grad {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left top, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left top, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left top, red , blue); /* Standard syntax */
}

نضع التدريج على الشكل الذي ترغب فيه من الاعلى او اسفل او من اليسار اوىمن اليمين.
وكذلك يمكن التحكم بزاوية التدرج مثال :
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}

كذلك يمكن وضع مجموعة من الالوان على شكل التالي :
#grad {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}

يمكن وضع نسبة مؤية لكثافة اللون مثال :
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

وكذلك يمكن وضع التدريج على شكل قطر مثال :
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}

#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}

او على شكل التالي :
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

* لوضع ظل للعناصر نقوم بكتابة الامر التالي :
h1 { text-shadow: 2px 2px 5px red; }