تدرج الالوان فى CSS3 ... .اى CSS3 Gradients

تدرج الالوان  فى CSS3
                                         
التدرج هو مزج بين اثنين أو أكثر من الألوان  حيث يكون التحول بين الألوان على نحو سلس.
 هذه التدرجات  مفيده لكل من الخلفية، اللافتات والأزرار و غيرها.





CSS3 Gradients

تدرج الالوان فى

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

* التدرجات الخطية      Linear Gradients

  و أتجاهاتها /تحت / أعلى / يسار / يمين / قطريا

* التدرجات الشعاعية   Radial Gradients

 واتجاهاتها  يحددها مركزها

========================

 المتصفحات التى  تدعم هذه الخاصيه
Attiya

 تظهر من الشكل السابق ان اغلب المتصفحات تدعم هذه االخاصيه
========
التدرج الخطي    Linear Gradients 

 فى هذه التدوينه نتحدث عن التدرج الخطي
لإنشاء التدرج الخطي يجب تحديد اثنين على الأقل من الألوان.  الألوان التي تريد أن تجعل التحولات تحدث على نحو سلس بينها. يمكنك أيضا تعيين نقطة انطلاق واتجاه (أو زاوية) جنبا إلى جنب مع تأثير التدرج.


بناء الجملة

  Syntax

background: linear-gradient(direction, color-stop1, color- stop2, ...);

التدرج الخطى

يبدا  من  اعلى  ألى اسفل   ووهذا هو الافتراضى

Linear Gradient - Top to Bottom  this is default

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



تدرج خطى يبدا من اعلى الى اسفل . .

يبدا باللون الاحمر ويتحول الى

اللون الاصفر

الكود


لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c

التدرج من الشمال الى اليمين و بالعكس

Linear Gradient - Left to Right

وضح المثال التالي التدرج الخطي الذي يبدأ من اليسار الى اليمين  يبدأ باللون الأحمر،والانتقال إلى اللون الأصفر


تدرج خطى يبدا من اليمين الى الشمال . .

يبدا باللون الاحمر ويتحول الى

اللون الاصفر

الكود

لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c
===
 مثال أخر يبين التدرج الخطي الذي يبدأ من اليمين الى اليسار  يبدأ باللون الأحمر،والانتقال إلى اللون الأصفر



تدرج خطى يبدا من الشمال الى اليمين . .
يبدا باللون الاحمر ويتحول الى
اللون الاصفر


    
لنسخ الكود . . .      select  All    .  .  . ثم . .   Ctrl + c
                                    =====
التدرج القطرى

 Linear Gradient - Diagonal

التدرج الخطي  القطري

يمكنك جعل التدرج قطريا من خلال تحديد كل من لنقطه الانطلاق  الأفقية والرأسية
بأستخدام هذا الكود
(background: linear-gradient(to bottom right, red, yellow

يوضح المثال التالي التدرج الخطي الذي يبدأ في أعلى اليسار ويذهب إلى أسفل اليمين يبدأ الأحمر، والانتقال إلى الأصفر


تدرج قطرى يبدا من اعلى الشمال الى اسفل اليمين . .
يبدا باللون الاحمر ويتحول الى

اللون الاصفر


لنسخ الكود . . .      select  All    .   . ثم . .   Ctrl + c

استخدام الزوايا

Using Angles


إذا كنت تريد المزيد من السيطرة على اتجاه التدرج، يمكنك تحديد زاوية، بدلا من الاتجاهات المحددة مسبقا إلى أسفل، إلى أعلى، إلى اليمين، إلى اليسار، إلى أسفل اليمين، وما إلى ذلك

بناء الجملة

Syntax

background: linear-gradient(angle, color-stop1, color-stop2);

 ;( background: linear-gradient (  deg , red, yellow

وتحدد الزاوية  deg  كزاوية بين خط أفقي وخط تدرج.

يوضح المثال التالي كيفية استخدام الزوايا على التدرجات الخطية:



تدرج قطرى يبدا من اعلى بزاويه 90 درجه . .
يبدا باللون الاحمر ويتحول الى
اللون الاصفر



لنسخ الكود . .    select  All    . . ثم . .   Ctrl + c

Using Multiple Color

استخدام تدرج  لالوان متعددة 
باستخدام الكود الاتى كمثال على تدرج ذو الوان متعدده

 ;( background: linear-gradient ( red, yellow, green

يوضح المثال التالي التدرج الخطي (من أعلى إلى أسفل) مع ألوان متعددة


تدرج من الوان متعدده يبدا باللون الاحمر .

.ويتحول الى اللون الاصفر

ثم اللون الاخضر


يوضح المثال التالي كيفية إنشاء تدرج خطي (من اليسار إلى اليمين) مع لون قوس قزح وبعض النص:



الوان قوس قزح




الشفافة  Transparency                                                                  

تدعم CSS3 أيضا الشفافية، التي يمكن استخدامها

لخلق آثار الخفوت او تلاشى اللون.

 

لإضافة الشفافية، نستخدم الدالة rgba()   لتحديد توقف الألوان.

المعامل الاخيرفى الداله "a " لتحديد الشفافيه و يأخذ قيمه من    

  0 إلى 1، وتحدد شفافية اللون:

حيث ان 0 تشير إلى شفافية كاملة، 1 تشير إلى اللون الكامل بدون شفافية

يتم استخدام هذا الكود
 ;(( background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1
يوضح المثال التالي التدرج الخطي الذي يبدأ من اليسار. ويبدأ شفافة تماما،والانتقال إلى اللون الأحمر الكامل 










  تكرار التدرج الخطي
Repeating a linear-gradient
تم استخدام هذا الكود
;(background: repeating-linear-gradient(60deg,red,yellow 7%,green 10%
للوصول للشكل التالى







                                                          
وتستخدم دالة التكرار الخطية
repeating-linear-gradient() function
 لتكرار التدرجات الخطية
                                         يوضح المثال التالي تكرار التدرج الخطي











في ليست هناك تعليقات:

...Float property CSS.........خاصيّة الطوفان


خاصيّة الطوف......Float property CSS....


من اهم الخصائص التى يجب على مبرمج الوب ان ىتقنها .  .

أعرف المزيد عن هذه الخاصيه . .  .

 .  .  المزيد  .  .  .  هنـــا
في ليست هناك تعليقات: