• 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;
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن