01 من 04
إنشاء التدرجات الخطية عبر المتصفحات باستخدام 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).
فلاتر وإضافات Microsoft - إن 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٪)؛
ملحق Mozilla - يعمل امتداد moz- مثل خاصية CSS3 ، فقط بالامتداد -moz-. للحصول على التدرج أعلاه لمتصفح فايرفوكس ، اكتب:
-moz-linear-gradient (left، # 999999 0٪، #ffffff 100٪)؛
إضافة Opera - تضيف الإضافة -o- تدرجات ل Opera 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 يشير ، 90 نقطة إلى اليمين ، 180 نقطة من أسفل ، و 270 نقطة إلى اليسار. يمكنك تحديد أي زاوية من 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 switch).
شاهد هذا التدرج الخطي القطري في الإجراء باستخدام 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 تريده أفضل من هؤلاء ، فالرجاء إخبارنا بذلك .