Home-theater-designers
إذا كنت على الإنترنت لأكثر من بضع دقائق ، فمن المحتمل أنك صادفت تدرج CSS. يمكن استخدام خاصية CSS background لإنشاء مجموعة من الأنماط المختلفة ، ومن أكثر الأنواع إثارة للاهتمام ما يمكن أن تفعله بقيمة التدرج.
تعد معرفة كيفية تصميم وإنشاء تدرجات CSS مختلفة أحد الأصول لأي مصمم برامج أو مطور. من هذه المقالة ، ستتعلم كل ما تحتاج إلى معرفته لبدء دمج تدرجات CSS في مشاريعك.
ما هو التدرج CSS؟
التدرج اللوني CSS هو في الأساس مزيج من لونين أو أكثر ينتقل بسلاسة من لون إلى آخر. تعتمد الحالة الانتقالية لتدرج CSS على نوع التدرج المستخدم. هناك نوعان رئيسيان من التدرجات اللونية شائعة الاستخدام في تصميم البرامج: الخطي والشعاعي.
ومع ذلك ، هناك نوع ثالث من التدرج اللوني أقل شيوعًا والمعروف باسم التدرج المخروطي.
صيغة تدرجات CSS
Background-image: gradient-type (direction, color1, color2);
يجب تعيين تدرج CSS لخاصية CSS لصورة الخلفية. يمكن أن يكون نوع التدرج واحدًا من عدة أنواع ؛ التدرج الخطي أو التدرج الشعاعي أو التدرج المخروطي. يتبع نوع التدرج أقواس الفتح والإغلاق التي تحتوي على الاتجاه الانتقالي للتدرج ، بالإضافة إلى الألوان التي سيتم تضمينها في التدرج اللوني.
متعلق ب: كيفية تعيين صورة الخلفية في CSS
يوضح المثال أعلاه لونين ، ولكن يمكن أن يحتوي التدرج اللوني على عدة ألوان مختلفة. الشرط الوحيد هو أن يتم فصل كل لون في القائمة بفاصلة.
ما هو التدرج الخطي؟
التدرج الخطي هو التدرج اللوني الأكثر شيوعًا في CSS. يقوم بإنشاء تدرج انتقالي أفقي أو رأسي أو قطري باستخدام لونين أو أكثر.
مثال على التدرج الخطي CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
سوف ينتج الكود أعلاه تدرج CSS التالي:
هناك عنصر رئيسي واحد من بنية التدرج المحذوف من المثال أعلاه. هذا المكون هو الاتجاه الانتقالي للتدرج ، وقد تم حذفه لأن المحاذاة الافتراضية للتدرج الخطي تكون رأسية (من أعلى إلى أسفل) ؛ هذا هو الناتج المطلوب في هذا المثال.
ينتج عن الكود أعلاه نفس النتيجة مثل السطر التالي من التعليمات البرمجية. الفرق الوحيد بين الاثنين هو قسم الاتجاه في الكود.
استخدام مثال التدرج الخطي السفلي
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
كما ترى من الإخراج ، يُنشئ الكود أعلاه تدرجًا يبدأ باللون الأزرق في الأعلى ثم ينتقل ببطء إلى اللون البرتقالي في الأسفل. إذا كنت تريد عكس ترتيب الألوان ، يمكنك ببساطة استبدال للاسفل مع الى الاعلى وهذا سيعكس اتجاه التدرج ، مما ينتج عنه المخرجات التالية:
على غرار المحاذاة الرأسية ، يمكن تحقيق المحاذاة الأفقية للتدرج باستخدام مجموعتين من الكلمات الأساسية للاتجاه: إلى اليسار و إلى اليمين ، والتي ستنتج النواتج التالية ، على التوالي.
كيفية تنزيل الفرش على الإنجاب
التدرج الخطي القطري
من الممكن تحقيق انتقال تدرج خطي قطري في أي اتجاه للتدرج الخطي. هناك أربع قوائم محددة فقط من الكلمات الرئيسية التي تحتاج إلى معرفتها لجعل هذا ممكنًا.
- إلى أسفل اليمين
- إلى أسفل اليسار
- إلى أعلى اليمين
- إلى أعلى اليسار
باستخدام مثال التدرج الخطي القطري
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
ينتج المثال أعلاه المخرجات التالية:
كما ترى من الإخراج أعلاه ، فإن التدرج الخطي يجعل انتقاله في اتجاه قطري متحركًا من أعلى اليسار إلى القسم الأيمن السفلي من التدرج.
التدرج الخطي متعدد الألوان
يمكن أن يحتوي التدرج الخطي على لونين أو أكثر ، ولكن كيف تبدو المزيد من الألوان في التدرج اللوني؟ يعتمد ترتيب اللون الخطي المتدرج متعدد الألوان على اتجاهه. تلك التي تنتقل في اتجاه أفقي ستظهر كل لون جديد على يسار أو يمين التدرج الخطي ، اعتمادًا على الاتجاه الدقيق للتدرج الخطي.
مثال على التدرج الخطي متعدد الألوان
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
سينتج عن سطر الكود أعلاه الناتج التالي:
كما ترى ، يتم إضافة كل لون جديد إلى يمين التدرج اللوني ، مما يؤدي إلى ما يتحول في النهاية إلى قوس قزح. يمكن تحقيق نفس الناتج في اتجاه عمودي ؛ ومع ذلك ، فإن ترتيب اللون المحدد على التدرج الخطي سيعتمد على الكلمة الأساسية للاتجاه الرأسي (للأعلى أو للأسفل).
ما هو التدرج الشعاعي؟
ينشئ التدرج اللوني Radial gradient تدرجًا حلزونيًا من اثنين من الألوان التي تبدأ من المركز افتراضيًا. عندما ينتج التدرج الخطي تدرجًا مستقيمًا يتدفق عموديًا أو أفقيًا ، ينتج التدرج الشعاعي تدرجًا دائريًا يتدفق من المركز إلى الحواف الخارجية.
استخدام مثال التدرج الشعاعي
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
سينتج عن سطر الكود أعلاه الناتج التالي:
تغيير مركز التدرج الشعاعي
يبدأ التدرج الشعاعي افتراضيًا في مركز التدرج ؛ ومع ذلك ، من الممكن تغيير نقطة الأصل من خلال إدخال بعض الكلمات الرئيسية.
كيفية إنشاء ملف
مثال تغيير موضع بدء التدرج الشعاعي
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
سينتج عن سطر الكود أعلاه الناتج التالي:
كما ترى من الإخراج أعلاه ، يبدأ التدرج الآن من الزاوية اليمنى العليا بدلاً من المركز. هذا التغيير ممكن بسبب تضمين الكلمة الأساسية فوق على اليمين في الكود أعلاه. يمكن أيضًا استخدام قائمة الكلمات الرئيسية التالية لتغيير نقطة أصل التدرج الشعاعي:
- أعلى اليسار
- أسفل اليمين
- أسفل اليسار
تدرجات شعاعية متعددة الألوان
مثل التدرج الخطي ، يمكن أن يستخدم التدرج الشعاعي أيضًا لونين أكثر ، والفرق الرئيسي هو أنه حيث يضيف التدرج الخطي إلى التدرج اللوني في خط مستقيم ، يضيف التدرج الشعاعي ألوانًا جديدة على الحافة الخارجية.
مثال على التدرج الشعاعي متعدد الألوان
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
سينتج عن سطر الكود أعلاه الناتج التالي:
تخصيص التدرجات
لقد رأيت حتى الآن كيفية تغيير الاتجاه والنقطة المركزية للتدرج اللوني ، لكنك لم ترَ كيفية تخصيص التدرج اللوني. قد يبدو تخصيص التدرج اللوني يتطلب الكثير من العمل ، ولكن بمجرد أن تفهم أساسيات إنشاء تدرج خلفية CSS ، فإن الخطوة الواضحة التالية هي تعلم كيفية جعل تدرجات CSS أكثر تميزًا.
كيفية استخدام الهاتف كميكروفون
بشكل افتراضي ، تشغل الألوان الموجودة في التدرج اللوني مقدارًا موزعًا بالتساوي من المساحة مع انتقال كل لون بسلاسة إلى اللون الذي يليه. لذلك إذا تم الجمع بين لونين لتشكيل تدرج ، سيشغل كل لون نصف المساحة المتاحة أثناء الانتقال من لون إلى آخر. إذا تم الجمع بين ثلاثة ألوان ، فسيشغل كل لون ثلث المساحة المتوفرة.
باستخدام التدرج المخصص ، يمكنك تحديد مقدار المساحة التي سيشغلها اللون في التدرج اللوني عن طريق تعيين موضع توقف اللون .
مثال تخصيص التدرج الخطي 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
سينتج عن سطر الكود أعلاه الناتج التالي:
يُظهر الإخراج أعلاه اللون الثاني في التدرج الخطي متوقفًا عند نقطة 30٪ من اللون الأول في التدرج ، بدلاً من موضعه المعتاد ، ولأن اللون الثاني هو أيضًا اللون النهائي في التدرج اللوني فإنه يمتد بشكل طبيعي إلى النهاية .
إذا كنت ستضع 30٪ في الكود أعلاه في نهاية اللون الأول ، يجب أن تصبح الأشياء أكثر وضوحًا.
مثال تخصيص التدرج الخطي 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
سوف ينتج الكود أعلاه الناتج التالي.
يُظهر الإخراج أعلاه بوضوح اللون الأول في التدرج الذي يتوقف عند نقطة 30٪ من اللون الثاني في التدرج. يجب أن يساعد هذا المثال مع المثال أعلاه في تسهيل فهم تخصيص توقف اللون بالنسبة لك.
يتم تخصيص التدرج اللوني الشعاعي بنفس طريقة التدرج الخطي. الشيء الوحيد الذي عليك القيام به لتحقيق نفس النتائج أعلاه في التدرج الشعاعي هو تغيير نوع التدرج واتجاهه.
لم يكن إنشاء تدرجات CSS أسهل من أي وقت مضى
توفر لك هذه المقالة التعليمية الأدوات اللازمة لتحديد وإنشاء تدرجات لونية خطية وشعاعية. إذا وصلت إلى هذه النقطة ، فقد تعلمت كيفية تغيير اتجاه ومركز التدرج اللوني. بالإضافة إلى ذلك ، لديك الآن المهارات اللازمة لتخصيص تدرجات CSS وإنشاء تدرجات خلفية فريدة.
ومع ذلك ، إذا كنت لا تريد المضي قدمًا في إنشاء تدرجات لونية جديدة وفريدة من نوعها ، فيمكنك البدء بإنشاء تدرجات لونية رائعة المظهر موجودة مسبقًا.
يشارك يشارك سقسقة بريد الالكتروني 27 أمثلة على التدرج لخلفية CSS الأنيقةالألوان الصلبة حتى العام الماضي. التدرجات في! لكن كيف تنشئها في CSS؟
اقرأ التالي مواضيع ذات صلة- برمجة
- تطوير الشبكة
- تصميم المواقع
- CSS
قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مواد يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).
المزيد من Kadeisha Keanاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك