تدرج الالوان فى CSS3
الوان قوس قزح &
rainbow Colors
تدرج الالوان فى CSS3 ..... أو CSS3 Gradients
تكرار التدرج الخطى المائل
التدرج هو مزج بين اثنين أو أكثر من الألوان حيث يكون التحول بين الألوان على نحو سلس.
هذه التدرجات مفيده لكل من الخلفية، اللافتات والأزرار و غيرها.
تدرج الالوان فى
CSS3
في وقت سابق، كان يتم استخدام الصور لعمل هذه التأثيرات
باستخدام التدرجات يمكنك تقليل وقت التحميل
بالإضافة إلى ذلك العناصر مع التدرجات تبدو أفضل عند التكبير
، ، لأن يتم إنشاء التدرج من قبل المستعرض .
يحدد CSS3
نوعين من التدرجات:
- أولا : التدرجات الخطية Linear Gradients
- و أتجاهاتها /تحت / أعلى / يسار / يمين / قطريا
- ثانيا : التدرجات الشعاعية Radial Gradients
========================
المتصفحات التى تدعم هذه الخاصيه
تظهر من الشكل السابق ان اغلب المتصفحات تدعم هذه االخاصيه
========
التدرج الخطي Linear Gradients
لإنشاء التدرج الخطي يجب تحديد اثنين على الأقل من الألوان. الألوان التي تريد أن تجعل التحولات تحدث على نحو سلس بينها. يمكنك أيضا تعيين نقطة انطلاق واتجاه (أو زاوية) جنبا إلى جنب مع تأثير التدرج.
بناء الجمله فى التدرح Syntax
background:linear-gradient(direction,color-1,color-2,...)
مثال على التدرج
التدرج الخطي
التدرج الخطي - يبدا من الأعلى إلى الأسفل (هذا افتراضي)
ويوضح المثال التالي تدرج خطي يبدأ من الأعلى. يبدأ باللون الأحمر ، وينتقل إلى اللون الأصفر:
وهذه هى النتيجه
تدرج خطى يبدا من اعلى الى اسفل . .
يبدا باللون الاحمر ويتحول الى اللون الاصفر
التدرج الخطي - من اليسار إلى اليمين
يوضح المثال التالي تدرج خطي يبدأ من اليسار الى اليمين يبدأ باللون الأحمر ، وينتقل إلى اللون الأصفر:
هذا هو الكود فى القسم <style>
background: linear-gradient(to right,red, yellow)
وهذه هى النتيجه
تدرج خطى يبدا من اليسار الى اليمين . .
يبدا باللون الاحمر ويتحول الى اللون الاصفر
التدرج الخطي - من اليمين الى اليسار
يوضح المثال التالي تدرج خطي يبدأ من اليمين الى اليسار يبدأ باللون الأحمر ، وينتقل إلى اللون الأصفر:
هذا هو الكود فى القسم <style>
background: linear-gradient(to left,red, yellow)
وهذه هى النتيجه
تدرج خطى يبدا من اليمين الى اليسار . .
يبدا باللون الاحمر ويتحول الى اللون الاصفر
التدرج الخطي - قطري
يمكنك عمل تدرج قطري عن طريق تحديد كل من مواضع البداية الأفقية والرأسية.
يوضح المثال التالي تدرج خطي - قطري يبدأ من أعلى اليسار وينتقل إلى أسفل اليمين. يبدأ باللون الأحمر ، وينتقل إلى اللون الأصفر:
و ها هو الكود ضعه فى القسم <style>
background: linear-gradient(to bottom right,red, yellow)
وهذه هى النتيجه
تدرج خطي - قطري يبدأ من أعلى اليسار وينتقل إلى أسفل اليمين
خلفية الصورة: التدرج الخطي (زاوية ، لون توقف 1 ، لون توقف 2) ؛
يتم تحديد الزاوية كزاوية بين خط أفقي وخط التدرج.
التدرج باستخدام الزوايا
إذا كنت تريد مزيدًا من التحكم في اتجاه التدرج اللوني ، فيمكنك تحديد زاوية ، بدلاً من الاتجاهات المحددة مسبقًا (من الأسفل إلى الأعلى ومن اليمين إلى اليسار ومن الأسفل إلى اليمين ، إلخ).
يوضح المثال التالي كيفية استخدام الزوايا في التدرجات الخطية:
بناء الجملة
background-image: linear-gradient(angle, color-stop1, color-stop2)
يتم تحديد الزاوية كزاوية بين خط أفقي وخط التدرج.
يوضح المثال التالي كيفية استخدام الزوايا في التدرجات الخطية:
و ها هو الكود ضعه فى القسم <style>
background-image: linear-gradient(90deg, red, yellow)
وهذه هى النتيجه
تدرج قطرى يبدا من اعلى بزاويه 90 درجه . .
يبدا باللون الاحمر ويتحول الى
اللون الاصفر
وهذه مجموعه من التدرجات و يتم تغيير الزاويه حتى تعطى صوره واضحه عن كيفيه عمل التدرج
background-image: linear-gradient( 0deg, red, yellow)
0
background-image: linear-gradient(45deg, red, yellow)
45
background-image: linear-gradient(90deg, red, yellow)
90
background-image: linear-gradient(135deg, red, yellow)
135
background-image: linear-gradient(180deg, red, yellow)
180
background-image: linear-gradient(-90deg, red, yellow)
-90
استخدام تدرج لالوان متعددة
Using Multiple Color
استخدام تدرج لالوان متعددة
باستخدام الكود الاتى كمثال على تدرج ذو الوان متعدده
background-image: linear-gradient(red, yellow, green)
يوضح المثال التالي التدرج الخطي (من أعلى إلى أسفل) مع ألوان متعددة
تدرج من الوان متعدده يبدا باللون الاحمر .
. ويتحول الى اللون الاصفر ثم الاخضر
يوضح المثال التالي كيفية إنشاء تدرج خطي مجموعه الوان (من اليسار إلى اليمين) مع لون قوس قزح :
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
الوان قوس قزح
استخدام الشفافية Transparency
تدعم تدرجات CSS الشفافية أيضًا ، والتي يمكن استخدامها لإنشاء تأثيرات باهتة.
لإضافة شفافية ، نستخدم الدالة rgba () لتحديد نقاط توقف اللون.
المعامل الاخيرفى الداله "a " لتحديد الشفافيه و يأخذ قيمه من قيمة من 0 إلى 1 ، وهي تحدد شفافية اللون: 0 تشير إلى الشفافية الكاملة ، وتشير 1 إلى اللون الكامل (لا توجد شفافية).
يوضح المثال التالي تدرج خطي يبدأ من اليسار. يبدأ بالشفافية الكاملة ، وينتقل إلى اللون الأحمر الكامل:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
الشفافية
تكرار التدرج الخطي
تكرار التدرج الخطي
تُستخدم The repeating-linear-gradient() function لتكرار التدرجات الخطية:
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
تكرار التدرج الخطي
تم استخدام هذا الكود
background: repeating-linear-gradient(60deg,red,yellow 7%,green 10%;);
للوصول للشكل التالى
تكرار التدرج الخطى المائل
المصادر
نرجو ان تترك لنا تعليق او اذا كان لديا استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك
