CSS3 التدرجات الدائرية والبيضاوية [نصائح CSS3]

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

بناء الجملة التدرج

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

القيمة الأولى تحدد موقف التدرج. يمكننا استخدام كلمة رئيسية وصفية مثل الأعلى والأسفل والوسط واليسار ، أو يمكننا أيضًا أن نكون أكثر تحديدًا مثل, 50٪ 50٪ لضبط التدرج في المركز أو 0٪ 0٪ لضبط التدرج اللوني للبدء في أعلى اليسار.

القيمة الثانية تحدد الشكل وحجم التدرج, هناك نوعان من الحجج لتشكيل التدرجات ، أولا الشكل البيضاوي وهو الافتراضي ، والثاني هو دائرة.

وبالنسبة لل حجم التدرج, يمكننا اختيار واحدة من الحجج الست التالية.

مصدر الجدول: موزيلا المطور الشبكة.

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

 body background-image: gradient-radial (center centre، ellipse cover، # ffeda3، # ffc800)؛  

لإنشاء دائري التدرج يمكننا ببساطة القيام بذلك بهذه الطريقة:

 body background-image: gradient-radial (center center، cover circle، # ffeda3، # ffc800)؛  

كما يوحي الاسم ، سيكون شكل التدرج دائرة.

دعم المتصفح

لاحظ فقط أن جميع المتصفحات لا تزال في طور توفير الدعم الكامل لهذه الميزة ، لذلك لا تزال بحاجة إلى بادئة البائع. وبالتالي ، فإن بناء الجملة الكامل الذي سيعمل في جميع المتصفحات الحديثة - IE10 + و Firefox 3.6+ و Chrome 4.0+ و Safari 4.0+ و Opera 11+ - سوف تبدو شيئا مثل هذا ؛

 body background-image: التدرج الشعاعي (أسفل الوسط ، غطاء القطع الناقص ، # ffeda3 ، # ffc800) ؛ خلفية الصورة: -o-radial-gradient (أسفل الوسط ، غطاء القطع الناقص ، # ffeda3 ، # ffc800) ؛ خلفية الصورة: -ms-radial-gradient (أسفل الوسط ، غطاء القطع الناقص ، # ffeda3 ، # ffc800) ؛ background-image: -moz-radial-gradient (أسفل الوسط ، غطاء القطع الناقص ، # ffeda3 ، # ffc800) ؛ خلفية الصورة: - التدرج اللوني لشبكة الويب (أسفل الوسط ، غطاء القطع الناقص ، # ffeda3 ، # ffc800) ؛  

تحقق من العرض التوضيحي أو قم بتنزيل المصدر للتجول باستخدام التدرجات.

• عرض
• تحميل المصدر

الكلمات الأخيرة

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

• Colorzilla التدرجات
• Gradientoo

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