إنشاء التدرجات الخطية عبر المتصفحات باستخدام CSS3
التدرجات الخطية
النوع الأكثر شيوعًا للتدرج الذي ستراه هو تدرج خطي لونيتين. هذا يعني أن التدرج سوف يتحرك في خط مستقيم يتغير تدريجيا من اللون الأول إلى الثاني على طول هذا الخط. تعرض الصورة في هذه الصفحة تدرجًا بسيطًا من اليسار إلى اليمين من # 999 (رمادي داكن) إلى #fff (أبيض).
التدرجات الخطية هي الأسهل في تحديدها ، ولها أكبر قدر من الدعم في المتصفحات. يتم دعم التدرجات الخطية في CSS3 في Android 2.3 والإصدارات الأحدث ، و Chrome 1+ ، و Firefox 3.6+ ، و Opera 11.1+ ، و Safari 4+. يمكن أن يقوم Internet Explorer بإضافة تدرجات لونية باستخدام منقي ويدعمهم العودة إلى IE 5.5. هذا ليس CSS3 ، لكنه خيار للتوافق بين المتصفحات.
عند تحديد التدرج ، يجب تحديد العديد من الأشياء المختلفة:
- أي نوع من التدرج هو؟
خطيأوشعاعي - حيث يجب أن يبدأ التدرج
- حيث يجب أن يتوقف التدرج
- ما هي الألوان في التدرج وأين يجب أن تبدأ وتتوقف
لتحديد التدرجات الخطية باستخدام CSS3 ، تكتب:
الخطي التدرج(زاوية أو الجانب أو الزاوية, توقف اللون, توقف اللون)
- أولا عليك تحديد نوع التدرج مع الاسم
خطي -الانحدار. - ثم ، يمكنك تحديد نقاط البداية والتوقف للتدرج بإحدى الطريقتين:
زاويةمن الخط من 0 إلى 359 ، مع 0 درجة تشير إلى أعلى بشكل مستقيم. أو مع وظيفة "الجانب أو الزاوية" ، مثلاليسار,حق,الأسفلوأعلى. سيتم شرح ذلك بمزيد من التفاصيل في الصفحة التالية. إذا تركت هذا الخروج ، فسوف يتدفق التدرج من أعلى إلى أسفل العنصر. - ثم تحدد توقف اللون. يمكنك تحديد توقف اللون باستخدام رمز اللون ونسبة مئوية اختيارية. تخبر النسبة المئوية المتصفح الذي يوجد على الخط أن يبدأ أو ينتهي باللون. الافتراضي هو وضع الألوان بالتساوي على طول الخط. سوف تتعلم المزيد عن محطات اللون في الصفحة 3.
لذلك ، لتحديد التدرج أعلاه مع CSS3 ، تكتب:
التدرج الخطي (اليسار ، # 999999 0٪ ، #ffffff 100٪) ؛
ووضعها كخلفية ل DIV انت تكتب:
div {background-image: linear-gradient (left، # 999999 0٪، #ffffff 100٪؛} ملحقات المتصفح لـ CSS3 التدرجات الخطية
للحصول على التدرج اللوني للعمل عبر المتصفح ، يلزمك استخدام إضافات المتصفح لمعظم المتصفحات و منقي لـ Internet Explorer 9 وأقل (فعليًا 2 من عوامل التصفية). تأخذ كل هذه العناصر نفسها لتحديد التدرج الخاص بك (باستثناء أنه يمكنك فقط تحديد تدرجات اللونين في IE).
مايكروسوفت مرشحات وامتداد-إن Internet Explorer هو الأكثر تحديًا للدعم ، لأنك تحتاج إلى ثلاثة أسطر مختلفة لدعم إصدارات المتصفح المختلفة. للحصول على التدرج الرمادي إلى الأبيض أعلاه ، يمكنك كتابة:
/ * IE 5.5–7 * /عامل التصفية: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛/ * IE 8–9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)"؛/ * IE 10 * /-ms-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛
ملحق موزيلا-ال -moz- يعمل مثل خاصية CSS3 ، فقط مع -moz- تمديد. للحصول على التدرج أعلاه لمتصفح فايرفوكس ، اكتب:
-moz-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛
تمديد الأوبرا-ال -o- يضيف امتداد التدرجات لأوبرا 11.1+. للحصول على التدرج أعلاه ، اكتب:
-o-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛
تمديد Webkit-ال -webkit- يعمل الكثير مثل خاصية CSS3. لتحديد التدرج الموضح أعلاه لـ Safari 5.1 أو الإصدار 10+ أو Chrome 10+ الذي تكتبه:
-webkit-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛
هناك أيضًا إصدار قديم من امتداد Webkit يعمل مع Chrome 2+ و Safari 4+. تحدد فيه نوع التدرج كقيمة ، وليس في اسم الخاصية. للحصول على التدرج الرمادي إلى الأبيض مع هذا الامتداد ، اكتب:
-webkit-gradient (الخطي ، أعلى اليسار ، أعلى اليمين ، توقف اللون (0٪ ، # 999999) ، توقف اللون (100٪ ، # ffffff)) ؛ كامل CSS3 التدرج الخطي المغلق رمز
للحصول على الدعم الكامل عبر المتصفحات للحصول على التدرج الرمادي إلى الأبيض أعلاه ، يجب أولاً تضمين لون احتياطي للمتصفحات التي لا تدعم التدرجات ، ويجب أن يكون العنصر الأخير هو نمط CSS3 للمتصفحات المتوافقة تمامًا. لذلك ، تكتب:
الخلفية: 999999 # ؛الخلفية: -moz-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛الخلفية: -webkit-gradient (الخطي ، أعلى اليسار ، أعلى اليمين ، توقف اللون (0٪ ، # 999999) ، توقف اللون (100٪ ، # ffffff))؛الخلفية: -webkit-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛الخلفية: -o-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛الخلفية: -ms-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛عامل التصفية: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛الخلفية: التدرج الخطي (اليسار ، # 999999 0٪ ، #ffffff 100٪) ؛
تشرح الصفحات التالية في هذا البرنامج التعليمي أجزاء التدرج بمزيد من التفاصيل ، وتوجهك آخر صفحة إلى أداة تعتبر طريقة ممتازة لإنشاء تدرجات CSS3 تلقائيًا.
انظر هذا التدرج الخطي في العمل باستخدام CSS فقط.
02 من 04إنشاء تدرجات قطرية - زاوية التدرج
تحدد نقاط البداية والنقطة زاوية التدرج. معظم التدرجات الخطية هي من أعلى إلى أسفل أو من اليسار إلى اليمين. ولكن من الممكن بناء تدرج يتحرك على خط قطري. تعرض الصورة في هذه الصفحة تدرجًا بسيطًا يتحرك بزاوية 45 درجة عبر الصورة من اليمين إلى اليسار.
الزوايا لتحديد خط التدرج
الزاوية هي خط في دائرة وهمية في وسط العنصر. 0deg يصل ، 90deg يشير إلى اليمين ، 180deg يشير إلى أسفل و 270deg يشير إلى اليسار. يمكنك تحديد أي زاوية من 0 إلى 359 درجة.
يجب ملاحظة أنه في مربع ، تتحرك زاوية 45 درجة من الزاوية العلوية اليسرى إلى أسفل اليمين ، ولكن في نقطة مستطيلة تكون نقاط البداية والنهاية خارج الشكل قليلاً ، كما ترى في الصورة.
والطريقة الأكثر شيوعًا لتعريف التدرج القطري هي تحديد زاوية ، مثل فوق على اليمين وسوف ينتقل التدرج من تلك الزاوية إلى الزاوية المقابلة. يمكنك تحديد بداية البداية باستخدام الكلمات الأساسية التالية:
- أعلى
- حق
- الأسفل
- اليسار
- مركز
ويمكن دمجها لتكون أكثر تحديدًا ، مثل:
- فوق على اليمين
- أعلى اليسار
- مركز أعلى
- أسفل اليمين
- أسفل اليسار
- مركز القاع
- المركز الصحيح
- المركز الأيسر
في ما يلي CSS الخاص بالتدرج المماثل للإشارة المصورة ، والأحمر إلى الأبيض الذي ينتقل من الزاوية اليمنى العليا إلى أسفل اليسار:
الخلفية: ## 901A1C؛background-image: -moz-linear-gradient (right top، # 901A1C 0٪، # FFFFFF 100٪)؛background-image: -webkit-gradient (linear، right top، left bottom، color-stop (0، # 901A1C)، color-stop (1، #FFFFFF))؛الخلفية: -webkit-linear-gradient (أعلى اليمين ، # 901A1C 0٪ ، #ffffff 100٪)؛الخلفية: -o-linear-gradient (أعلى اليمين ، # 901A1C 0٪ ، #ffffff 100٪) ؛الخلفية: -ms-linear-gradient (أعلى اليمين ، # 901A1C 0٪ ، #ffffff 100٪) ؛الخلفية: تدرج خطي (أعلى اليمين ، # 901A1C 0٪ ، #ffffff 100٪) ؛
ربما لاحظت عدم وجود عوامل تصفية IE في هذا المثال. وهذا لأن IE يسمح فقط نوعين من الفلاتر: من الأعلى إلى الأسفل (الافتراضي) ومن اليسار إلى اليمين (مع GradientType = 1 مفتاح كهربائي).
شاهد هذا التدرج الخطي القطري في الإجراء باستخدام CSS فقط.
03 من 04توقف اللون
مع التدرجات الخطية لـ CSS3 ، يمكنك إضافة ألوان متعددة إلى التدرج الخاص بك لإنشاء تأثيرات مربيًا. لإضافة هذه الألوان ، يمكنك إضافة ألوان إضافية إلى نهاية موقعك ، مفصولة بفواصل. يجب عليك تضمين المكان الذي يجب أن تبدأ أو تنتهي فيه الألوان على الخط.
تعتمد عوامل تصفية Internet Explorer فقط نقطتي توقف لونين ، لذلك عند إنشاء هذا التدرج ، يجب فقط تضمين الألوان الأولى والثانية التي تريد عرضها.
هنا هو CSS لتدرج الألوان الثلاثة أعلاه:
الخلفية: #ffffff؛الخلفية: -moz-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، #ffffff 100٪)؛الخلفية: -Webkit-gradient (الخطي ، أعلى اليسار ، أعلى اليمين ، توقف اللون (0٪ ، # ffffff) ، توقف اللون (51٪ ، # 901A1C) ، توقف اللون (100٪ ، # ffffff))؛الخلفية: -webkit-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛الخلفية: -o-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛الخلفية: -ms-linear-gradient (left، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛عامل التصفية: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff'، endColorstr = '# ffffff'، GradientType = 1)؛الخلفية: تدرج خطي (يسار ، #ffffff 0٪ ، # 901A1C 51٪ ، # ffffff 100٪)؛
شاهد هذا التدرج الخطي بثلاثة توقفات لونية تعمل باستخدام CSS فقط.
04 من 04جعل بناء التدرجات أسهل
هناك موقعان أوصيان بهما لمساعدتك في بناء التدرجات ، فلكل منهما فوائد وعيوب ، ولم أجد مصممًا متدرجًا يقوم بكل شيء حتى الآن.
في نهاية المطاف CSS التدرج مولديعتبر مولد التدرج هذا شائعًا جدًا لأنه ينفذ بطريقة مماثلة لبناة التدرج في برامج مثل Photoshop. أنا أيضا أحب ذلك لأنه يوفر لك جميع ملحقات CSS ، وليس فقط Webkit و Mozilla. تكمن المشكلة في هذا المولد في أنه يدعم التدرجات الأفقية والرأسية فقط. إذا كنت تريد إجراء تدرجات قطرية ، فيجب عليك الانتقال إلى المولد الآخر الذي أوصي به. CSS3 Gradient Generatorاستغرقني هذا المولد وقتًا أطول لفهمه من المولد الأول ، ولكنه يدعم تغيير الاتجاه إلى قطر. إذا كنت تعرف مولدًا آخر لـ CSS Gradient تريده أفضل من هؤلاء ، فالرجاء إخبارنا بذلك.
