CSS

CSS Border Images
الإطارات الصور في لغة CSS

سوف تتعلم في هذا الدرس طريقة عمل الإطارات بالصور بدلاً من الألوان في لغة CSS لتعطي شكلاً جمالياً.

التاريخ

28 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2771

المواضيع

24
الشروحات chevron_left CSS Border Images chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Border Images
الإطارات الصور في لغة CSS

</> CSS Border Image
الإطارات الصور في لغة CSS

تستخدم خاصية border-image في لغة CSS لإضافة إطار صورة بدلاً من الإطارات الألوان حول العنصر وهي إختصار لمجموعة خصائص وهم:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat


قيم خاصية border-image في لغة CSS:

  • source slice width outset repeat وهي تحديد قيم الخصائص السابقة.


ترتيب القيم:

  • source: رابط الصورة.
  • slice تحديد من أين يتم قطع الصورة.
  • width عرض الإطار.
  • outset بعد الإطار نسبة للمحتوى الداخلي للعنصر.
  • repeat تكرار إطار الصوره.
CSS border-image syntac

طريقة كتابة خاصية border-image في لغة CSS.

border-image:value;
CSS border-image values

قيم خاصية border-image في لغة CSS.

border-image:source slice width outset repeat|initial|inherit;

</> CSS use border image round
طريقة إستخدام border-image مع round في لغة CSS

لكي تضيف صورة لإطار أي عنصر في لغة CSS يجب إضافة ثلاثة قيم:

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


توضيح: تأخذ خاصية border-image الصورة وتقسيمها إلى تسعة أقسام  ثم يضع الزوايا في الزوايا ، وتتكرر الأقسام الوسطى أو تتمدد حسب ما تحدده.

أحفظ الصورة
أحفظ الصورة
CSS use border image round

طريقة إستخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}
CSS use border image 40 round

طريقة إستخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}
CSS use border image 50 round

طريقة إستخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}

</> CSS use border image round percentage
طريقة إستخدام border-image مع round بالنسبة المئوية في لغة CSS

هناك قيمة تسمي different slice وهي العنصر الخاص بالتحكم في شكل الاطار وعلي اختلاف قيمة هذا العنصر يختلف شكل الاطار كما في الامثلة التالية

CSS use border image round percentage

طريقة استخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 20% round;
}
CSS use border image round 30 percentage

طريقة استخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 30% round;
}
CSS use border image round 50 percentage

طريقة استخدام border-image في لغة CSS.

p
{ 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.closetag.com/images/border-image.png) 50% round;
}
مصطلحات الدرس
Images
Images

صور

Property
Property

خاصية

Values
Values

قيم

Slice
Slice

قطعة

Different
Different

مختلف

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.