اذهب إلى المحتوى
  • 0

كيف أصمم شكل مزركش بـ CSS؟

محمد بوسكوري

السؤال

بعد بعض المحاولات في تصميم شكل مزركش باستعمال تقنية css، حصلت على :

4fYC2.thumb.png.a613803c48f75fa6e8e1d567

لكن المشكل هو أن هذا الكود يحتوي على moz- والتي عند حذفها يتغير الشكل كليا، فكيف أحصل على نفس النتيجة باستعمال linear-gradient؟

هذا  هو الكود:

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

فقط عليك تغيير background-position،  بإعطاء هذه الخاصية عدة قيم بوحدة البكسل، بهذا الشكل:

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

لتكون نتيجة الكود السابق بعد التعديل:

56c174e537f6e_Screenshotfrom2016-02-1506

المشكلة المصادف مع استعمال moz- هي في قيمة درجة الزاوية المستعملة  45deg- في  linear gradient.

وهذا توضيح لذلك:

  • استعمال moz-linear-gradient-:

VZ5kX.thumb.png.57176987737293ee5add801f

  • استعمال linear gradient:

KefCL.thumb.png.b585c6a3bb48f3316ddb37dc

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...