CSS Border Images
الإطارات الصور في لغة CSS
سوف تتعلم في هذا الدرس طريقة عمل الإطارات بالصور بدلاً من الألوان في لغة CSS لتعطي شكلاً جمالياً.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
