CSS3 Modules

css3 background gradient

آخر تحيين: 09-10-2014

CSS3 تأثيرات النص css3 background image


تعرفنا في الإصدارات القديمة للغة css على طرق إضافة الخلفيات المتدرجة الألوان للمحتوى ، و ذلك بإضافة صورة

بدل استعمال صورة متدرجة الألوان للخلفية يمكننا فعل ذلك عبر خاصيات css3 و ذلك من باب ربح الوقت أثناء تحميل الصفحة من جهة ، و من جهة أخرى الحفاظ على شكل الخلفية أثناء تكبير أو تصغير حجمها .
لإضافة خلفية متدرجة الألوان لدينا أربع خاصيات :

  • Linear Gradients : تدرج الالوان يبدأ من جانب و ينتهي إلى جانب آخر
  • Radial Gradients : تدرج الألوان يبدأ من الوسط في اتجاه جميع الجوانب
  • repeating-linear-gradient : تكرار تدرج الألوان من جهة إلى جهة
  • repeating-radial-gradient: تكرار تدرج الألوان بدءا من الوسط
رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
linear-gradient26.0
-webkit- 10.0
16.0
-moz- 3.6
6.1
-webkit- 5.1
12.1
-o- 11.1
10.0
radial-gradient26.0
-webkit- 10.0
16.0
-moz- 3.6
6.1
-webkit- 5.1
12.1
-o- 11.6
10.0
repeating-linear-gradient26.0
-webkit- 10.0
16.0
-moz- 3.6
6.1
-webkit- 5.1
12.1
-o- 11.1
10.0
repeating-radial-gradient26.0
-webkit- 10.0
16.0
-moz- 3.6
6.1
-webkit- 5.1
12.1
-o- 11.6
10.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -o- , -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

CSS3 Linear Gradients


تدرج الألوان يبدأ من جانب و ينتهي إلى آخر : من أعلى إلى أسفل أو من اليمين إلى اليسار أو العكس أو بشكل انحرافي
لإنشاء خلفية متدرجة الألوان ، يجب أولا تعيين اتجاه تدرج الألوان "direction" (إذا لم نحدد الإتجاه ، سيتم التدرج مبدئيا من الأعلى إلى أسفل) ، ثم سنحتاج إلى لونين على الأقل

background: linear-gradient(direction, color1, color2, ...);

من الأعلى إلى أسفل

لنأخذ المثال التالي : التدرج من اللون الأزرق "blue" إلى اللون الأصفر "yellow" بدءا من الأعلى في اتجاه الأسفل :

.top-gradient {
  background: -webkit-linear-gradient(blue, yellow); /* Safari 5.1 => 6.0 */
  background: -moz-linear-gradient(blue, yellow);    /* Firefox 3.6 => 15 */
  background: -o-linear-gradient(blue, yellow);      /* Opera 11.1 => 12.0 */
  background: linear-gradient(blue, yellow);         /* القيمة الأصلية*/
}
معاينة النتيجة

من اليسار إلى اليمين

.left-gradient {
  background: -webkit-linear-gradient(left, blue, yellow);
  background: -moz-linear-gradient(right, blue, yellow); 
  background: -o-linear-gradient(right, blue, yellow);
  background: linear-gradient(to right, blue, yellow); 
}
معاينة النتيجة

على شكل منحنى : diagonal

المثال أسفله يبين تدرج الألوان على شكل منحنى ، بدءا من أعلى اليمين إلى أسفل اليسار

.diagonal-gradient {
  background: -webkit-linear-gradient(right top, blue, yellow);
  background: -moz-linear-gradient(bottom left, blue, yellow);
  background: -o-linear-gradient(bottom left, blue, yellow);
  background: linear-gradient(to bottom left, blue, yellow);
}
معاينة النتيجة

استعمال الزوايا

يمكننا أيضا استعمال الزوايا بدل الإتجاهات ، للتحكم أكثر في تدرج الألوان
الدرجة "0" تعطينا تدرجا من الأسفل إلى أعلى
الدرجة "90" : من اليسار إلى اليمين
الدرجة "180" : من الأعلى إلى أسفل
يمكننا أيضا استعمال القيم السلبية لعكس تدرج الألوان ، مثلا الدرجة "-90" تعطينا تدرجا من اليمين إلى اليسار

.degre-gradient {
  background: -webkit-linear-gradient(90deg, blue, yellow);
  background: -moz-linear-gradient(90deg, blue, yellow);
  background: -o-linear-gradient(90deg, blue, yellow);
  background: linear-gradient(90deg, blue, yellow);
}
معاينة النتيجة

استعمال أكثر من لونين

لاستعمال أكثر من لونين ، نضيف جميع الألوان التي نريدها

.multiple-gradients {
  background: -webkit-linear-gradient(green, yellow, orange, red);
  background: -moz-linear-gradient(green, yellow, orange, red);
  background: -o-linear-gradient(green, yellow, orange, red);
  background: linear-gradient(green, yellow, orange, red);
}
معاينة النتيجة

استعمال الشفافية

لإضافة الشفافية للألوان ، نستعمل الدالة rgba() .
الدالة rgba() تستعمل الألوان على طريقة ()RGB زائد قيمة الشفافية .
قيمة الشفافية تتراوح بين "0" و "1" . أي استعمال الأعداد مثل : ... , "0.3" , "0.2" , "0.1"
القيمة "0" تعني استعمال الحد الأقصى لشفافية اللون ، أما القيمة "1" تعني استعمال اللون كاملا بدون شفافية .
المثال أسفله يبين استعمال الشفافية على اللون الأحمر ، انطلاقا من الحد الأقصى للشفافية على اليسار تدرُّجا إلى اللون الأحمر كاملا على اليمين :

.transparency-gradient {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
}
معاينة النتيجة

CSS3 Radial Gradients


تدرج الألوان يبدأ من الوسط إلى جميع الإتجاهات
لإنشاء التدرج نستخدم الدّالة radial-gradient() و نعطيها لونين على الأقل :

background: radial-gradient(shape size, color1, color2, ...);
shape = شكل التدرج (دائري ، إهليليجي )
size : الحجم أو المساحة التي سيغطيها اللون
إذا لم نحدد الشكل و الحجم سيتم تعيينهما تلقائيا "بناء على عرض و طول العلبة" كما في المثال أسفله :
.radial-gradient {
  background: -webkit-radial-gradient(red, yellow, green);
  background: -moz-radial-gradient(red, yellow, green);
  background: -o-radial-gradient(red, yellow, green);
  background: radial-gradient(red, yellow, green);
}
معاينة النتيجة

تحديد حجم الألوان

.radial-size{
  background: -webkit-radial-gradient(red 10%, yellow 20%, green 50%);
  background: -moz-radial-gradient(red 10%, yellow 20%, green 50%);
  background: -o-radial-gradient(red 10%, gyellow 20%, green 50%);
  background: radial-gradient(red 10%, yellow 20%, green 50%);
}
معاينة النتيجة

يمكننا أيضا تحديد الحجم باستعمال المفاتيح التالية

  • closest-side : الجانب الأقرب
  • farthest-side : الجانب الأبعد
  • closest-corner : الزاوية الأقرب
  • farthest-corner : الزاوية الأبعد
.radial-size-keys {
  background: -webkit-radial-gradient(30% 65%,closest-side, red, yellow, green, black);
  background: -moz-radial-gradient(30% 65%,closest-side, red, yellow, green, black);
  background: -o-radial-gradient(30% 65%,closest-side, red, yellow, green, black);
  background: radial-gradient(closest-side at 30% 65%, red, yellow, green, black);
}
معاينة النتيجة

تحديد الشكل

مبدئيا يأخذ الشكل محتوى العلبة إذا لم نقم تحديده ، و يكون إهليلجيا للعلب المستطيلة ، لإعطائه شكلا دائريا ، نستعمل القيمة "circle"

.radial-shape {
  background: -webkit-radial-gradient(circle, red, yellow, green);
  background: -moz-radial-gradient(circle, red, yellow, green);
  background: -o-radial-gradient(circle, red, yellow, green);
  background: radial-gradient(circle, red, yellow, green);
}
معاينة النتيجة

تكرار تدرج الألوان

لدينا دالتان حسب نوع التدرج "Linear أو Radial"

repeating-linear-gradient()

.linear-repeat {
  background: -webkit-repeating-linear-gradient(red, yellow 15%, green 25%);
  background: -moz-repeating-linear-gradient(red, yellow 15%, green 25%);
  background: -o-repeating-linear-gradient(red, yellow 15%, green 25%);
  background: repeating-linear-gradient(red, yellow 15%, green 25%);
}
معاينة النتيجة

repeating-radial-gradient()

.radial-repeat {
  background: -webkit-repeating-radial-gradient(red, yellow 15%, green 25%);
  background: -moz-repeating-radial-gradient(red, yellow 15%, green 25%);
  background: -o-repeating-radial-gradient(red, yellow 15%, green 25%);
  background: repeating-radial-gradient(red, yellow 15%, green 25%);
}
معاينة النتيجة