CSS3 تكرار التدرجات [نصائح CSS3]
هناك العديد من ميزات CSS3 التي تغير الطريقة التي نزين بها موقع الويب ، واحدة منها هي التدرجات CSS3. قبل CSS3 ، نحتاج بالتأكيد إلى صور لإنشاء تأثير التدرج ؛ نحن الآن قادرون على تقديم نفس التأثيرات (وأفضل) باستخدام CSS فقط
في مشاركاتنا السابقة ، ناقشنا نوعين من التدرجات اللتين يمكن تحقيقهما باستخدام CSS3:
- شعاعي و
- التدرجات الخطية.
هذه المرة سننظر في إخوتهم: تكرار التدرجات.
التكرار الأساسي
تكرار التدرجات هو في الأساس امتداد. يشبه بناء الجملة كيفية تعريف التدرجات الشعاعية والخطية ، وهذا فقط كما يوحي الاسم ، كما أنه سيكرر الألوان في اتجاه محدد. لتكرار التدرجات الخطية ، يمكننا استخدام هذه الوظيفة: تكرار الخطية التدرج, أثناء تكرار التدرجات الشعاعية أو الإهليلجية ، نستخدم هذه الوظيفة: مكرر شعاعي الانحدار.
/ * Linear * / .gradient background: repeating-linear-gradient (0deg، # f9f9f9، #cccccc 20px)؛ / * Radial * / .gradient الخلفية: تدرج متكرر شعاعي (50٪ 50٪ ، دائرة ، # f9f9f9 ، #cccccc 20px) ؛
لا يوجد فرق كبير بالنسبة للباقي على الكود ، باستثناء تكرار اللون. يوجد أدناه توضيح بسيط لوصف كيفية عمل تكرار الألوان هذا.
على الرغم من أن الصورة أعلاه توضح فقط التدرجات الخطية المتكررة ، تنطبق الفكرة الأساسية أيضًا على التدرجات الشعاعية التي تتكرر فيها الألوان إلى ما لا نهاية ، في هذه الحالة ، في أي اتجاه. اتبع الرابط أدناه لرؤية التجريبي.
- عرض تجريبي
في القسم التالي ، سوف نوضح لك كيف يمكننا الاستفادة من التدرجات المتكررة CSS3 في أمثلة حقيقية.
مثال: إنشاء الأنماط
الأكثر شيوعا لتنفيذ تكرار التدرجات هو خلق أنماط الخلفية. في هذا المثال ، سنقوم بإنشاء أنماط شريطية رأسية بسيطة.
.gradient background: repeating-linear-gradient (0deg، # f9f9f9، # f9f9f9 20px، #cccccc 20px، #cccccc 40px)؛
لاحظ كيف نحدد لونين مختلفين - # f9f9f9 و #cccccc - في نفس المكان, 20px. هذا المثال سوف يزيد من حدة الفرق بين هذين اللونين ويزيل الغموض.
لتوجيه الاتجاه ، نحن ببساطة نغير الزاوية - 90deg سوف توجيهه أفقيا في حين 45deg سوف توجيهه قطريا وهلم جرا.
- عرض تجريبي
مثال: إنشاء Paperline
في هذا المثال الثاني ، سننشئ خطًا ورقيًا ربما تشاهده غالبًا في دفتر ملاحظات. لإنشاء هذا التأثير ، نحتاج فقط إلى شعبة, لا توجد صور ، فقط CSS.
.التدرج width: auto؛ الارتفاع: 500 بكسل ؛ الهامش: 0 50 بكسل ؛ الخلفية: -تدرج متكرر-خطي-التدرج (-90deg ، # f9f9f9 ، # f9f9f9 20px ، #cccccc 21px) ؛ الخلفية: -التدرج الخطي -moz-Repeating-linear (-90deg، # f9f9f9، # f9f9f9 20px، #cccccc 21px)؛ الخلفية: -o-Repeating-gradient-gradient (-90deg، # f9f9f9، # f9f9f9 20px، #cccccc 21px)؛ الخلفية: التدرج الخطي المكرر (-90deg ، # f9f9f9 ، # f9f9f9 20px ، #cccccc 21px) ؛ حجم الخلفية: 100٪ 21px ؛
لاحظ أننا أضفنا أيضًا CSS3 خلفية الحجم الخاصية لتحديد أحجام الصور الخلفية ل 100 ٪ ، 20px. على الرغم من أن التدرجات اللونية CSS3 تعرض "الألوان" ، إلا أنها مصنفة فعليًا على أنها صورة, ليس لون.
بعد ذلك ، سوف نستخدم :قبل شبه عنصر لإضافة شريط على الجانب الأيسر من الورق.
.التدرج: قبل content: ""؛ عرض: كتلة مضمنة. الارتفاع: 500 بكسل ؛ العرض: 4px ؛ الحدود اليسرى: 4px double # FCA1A1؛ الموقف: نسبي اليسار: 30 بكسل ؛
وقد انتهينا ، إنه حقًا بسيط حقًا؟ يمكننا الآن رؤيتهم جميعًا في العمل من خلال الروابط أدناه.
- عرض تجريبي
- تحميل المصدر
مزيد من الموارد
- Webkit CSS3 التدرجات
- التدرجات CSS3 في Microsoft Developer Network
