Articles
مقدمة إلى CSS
خصائص CSS المتعلقة بتزيين نموذج الصندوق

خصائص CSS المتعلقة بتزيين نموذج الصندوق

تشرح هذه المقالة خصائص CSS المتعلقة بزخرفة نموذج الصندوق۔

يمكنك تعلم كيفية كتابة الخصائص مثل الحدود والظلال۔

YouTube Video

HTML للمعاينة

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

الزينة

خاصية border 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

تُستخدم خاصية border في CSS لتحديد إطار العنصر۔ border يتألف من ثلاثة عناصر: العرض (width)، النمط (style)، واللون (color)، ويتم دمجها لتحديد إطار العنصر۔

الهيكل الأساسي لخاصية border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • استخدم border-width لتحديد سماكة الحدود۔ يتم تحديد الوحدات بـ px، أو em، أو %، وغيرها۔

  • حدد نوع الحدود باستخدام border-style۔ يمكنك تحديد القيم التالية۔

    • قيم النمط:
      • none (بدون حدود)
      • solid (خط صلب)
      • dotted (خط منقط)
      • dashed (خط متقطع)
      • double (خط مزدوج)
      • groove (خط محزز)
      • ridge (خط بارز)
      • inset (خط ظل مدخل)
      • outset (خط ظل مخرج)

حدد لون الحدود باستخدام border-color۔ يمكنك تحديد اللون باستخدام أسماء الألوان، أو rgb()، أو rgba()، أو hex، وغيرها۔

إعدادات فردية لكل جانب 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

يمكنك أيضًا تعيين أنماط مختلفة لكل جانب على النحو التالي۔

إعدادات فردية للعرض، النمط، واللون 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

يمكنك أيضًا تحديد كل جانب بشكل منفصل باستخدام border-width وborder-style وborder-color۔

الجمع مع border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

باستخدام خاصية border-radius، يمكنك تدوير زوايا الحدود۔

خاصية border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

تُستخدم خاصية border-radius لتدوير زوايا العنصر۔ يمكنك بثني الزوايا الأربعة لعنصر HTML بشكل سلس، وتحويل المستطيلات أو المربعات إلى تصميم دائري۔

توضيح:

  • الصنف border-radius-all-rounded يجعل جميع الزوايا مستديرة بمقدار 20 بكسل، مما يؤدي إلى إنشاء صندوق مستدير بشكل سلس۔
  • الصنف border-radius-top-left-rounded يقوم فقط بتدوير الزاوية العلوية اليسرى بمقدار 20 بكسل بينما تبقى بقية الزوايا مربعة۔
  • الصنف border-radius-ellipse-corners ينشئ زوايا بيضاوية، مما يؤدي إلى مربع ذو شكل دائري ممتد أفقيًا۔

صيغة خاصية border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • عادةً ما يتم تحديد قيمة خاصية border-radius بالبكسل أو بالنسبة المئوية۔ يمكنك أيضًا تعيين قيمة واحدة إلى أربع قيم۔
    • تحديد قيمة واحدة يجعل جميع الزوايا مستديرة بشكل موحد۔
    • تحديد قيمتين يطبق القيمة الأولى على الزاوية العلوية اليسرى والزاوية السفلية اليمنى، والقيمة الثانية على الزاوية العلوية اليمنى والزاوية السفلية اليسرى۔
    • من خلال تحديد أربع قيم، يمكنك تعيين نصف قطر مختلف لكل زاوية۔ يتم تطبيق القيم باتجاه عقارب الساعة بدءًا من الزاوية العلوية اليسرى۔
  • يمكنك أيضًا تحديدها بشكل فردي مثل border-top-left-radius۔
1border-radius: 50px / 25px;
  • يمكن لخاصية border-radius أيضًا تحديد نصف القطر الرأسي والأفقي بشكل فردي لجعل الزوايا بيضاوية۔ في هذه الحالة، قم بالفصل باستخدام /۔
    • على سبيل المثال، تحديد 50px / 25px يجعل نصف القطر الأفقي 50 بكسل ونصف القطر الرأسي 25 بكسل۔

الملخص

  • border-radius هي خاصية لتدوير زوايا العنصر۔
  • يمكنك تحديد استدارة الزوايا بالبكسل أو النسب المئوية، وتطبيقها على جميع الزوايا أو زوايا محددة أو جعلها بيضاوية۔
  • إنها مفيدة لتصاميم مرنة وتخصيص واجهات المستخدم۔

خاصية outline 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

خاصية outline هي خاصية CSS لتحديد الخط المرسوم حول العنصر۔

outline مشابهة لـborder، لكنها تختلف في النقاط التالية:۔

  • outline لا تؤثر على نموذج الصندوق الخاص بالعناصر، لذا فإنها لا ت impact تخطيط العنصر۔
  • نظرًا لأن outline يتم رسمه خارج العنصر، فإنه يظهر خارج border۔
  • border يتم رسمه داخل العنصر، لذا يمكن أن يؤثر على الحجم وتخطيط العنصر۔

في هذا المثال، تم تعيين خاصية outline على النحو التالي:۔

  • الفئة outline-solid تقوم بتعيين حد خارجي صلب باللون الأحمر بسماكة 2px۔
  • الفئة outline-dashed تقوم بتعيين حد خارجي متقطع باللون الأزرق بسماكة 3px۔
  • الفئة outline-double تقوم بتعيين حد خارجي بسمك 4px بخط مزدوج أخضر۔
  • الفئة outline-offset تقوم بتعيين مسافة 10px بين الحد الخارجي والعنصر۔

الصياغة الأساسية 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width تحدد سماكة الحد الخارجي۔
  • يمكنك تحديد قيم محددة مثل thin، medium، thick، أو بوحدات مثل px، em۔
outline-style
  • outline-style تحدد نمط الحد الخارجي۔
  • يمكنك تحديد أنماط مثل solid، dotted، dashed، double، groove، ridge، inset، outset، none، إلخ۔
outline-color
  • outline-color تحدد لون الحد الخارجي۔
  • يمكنك تحديد أي لون باستخدام الأسماء، أو الرموز الست عشرية (HEX)، أو RGB، إلخ۔
outline-offset
  • outline-offset تحدد المسافة بين الحد الخارجي والعنصر۔
  • يمكنك تحديد القيم الدقيقة بوحدات مثل px وem وما إلى ذلك.۔

خاصية box-shadow 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

تُستخدم خاصية box-shadow لإضافة ظلال إلى العناصر.۔ باستخدام هذه الخاصية، يمكنك إنشاء ظلال حول العناصر للتعبير عن الشعور بالأبعاد والعمق.۔

توضيح:

  • في الفئة box-shadow-basic-shadow، يتم عرض ظل أسود ضبابي عند الزاوية السفلية اليمنى للعنصر.۔

  • في الفئة box-shadow-inset-shadow، يتم عرض ظل ضبابي داخل العنصر.۔ مع دخول الظل للداخل، يمكنك تحقيق تصميم غائر.۔

  • في الفئة box-shadow-multiple-shadow، يتم تطبيق ظلين، أسود وأحمر، على العنصر.۔ نظرًا لأنها تُعرض في مواقع مختلفة، يتم تحقيق تأثير ثلاثي الأبعاد.۔

تنسيق خاصية box-shadow 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
معنى كل قيمة

الإزاحة الأفقية الأولى هي قيمة الإزاحة الأفقية، وتحدد موضع الظل بالنسبة إلى الجانب الأيسر من العنصر.۔ تحديد قيمة إيجابية يضع الظل إلى اليمين، وقيمة سلبية تضعه إلى اليسار.۔

الإزاحة العمودية الثانية هي قيمة الإزاحة العمودية، وتحدد موضع الظل بالنسبة إلى الجانب العلوي من العنصر.۔ تحديد قيمة إيجابية يضع الظل تحت، وقيمة سلبية تضعه فوق.۔

نصف القطر الضبابي الثالث هو قيمة مقدار الضبابية، ويحدد مدى ضبابية الظل.۔ كلما كانت القيمة أكبر، انتشر الظل أكثر، مما يؤدي إلى ظل أكثر ضبابية.۔ تحديد قيمة إيجابية يضع الظل تحت، وقيمة سلبية تضعه فوق.۔ هذا اختياري، والقيمة الافتراضية هي 0، مما يعني عدم وجود ضبابية على الظل.۔

نصف القطر الانتشاري الرابع هو قيمة مدى الانتشار، ويحدد مدى انتشار الظل.۔ تحديد قيمة إيجابية سيجعل الظل يكبر، بينما تجعل القيمة السلبية الظل ينكمش.۔ هذه القيمة أيضًا اختيارية.۔

اللون الخامس هو قيمة اللون، ويحدد لون الظل.۔ يمكن تحديد الألوان باستخدام أسماء الألوان، أو RGB، أو HEX، أو HSL، أو نماذج ألوان أخرى متاحة في CSS.۔ إذا تم تجاهله، فسيتم تطبيق لون النص الافتراضي للعنصر (قيمة خاصية color).۔

يمكنك أيضًا تحديد الكلمة المفتاحية inset أولاً.۔ تحديد الكلمة المفتاحية inset يرسم الظل داخل العنصر بدلاً من خارجه.۔ من الممكن أيضًا تعيين ظلال متعددة مفصولة بفواصل.۔

مثال على box-shadow

مثال ظل أساسي 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • الإزاحة الأفقية هي 10px، مما يؤدي إلى تشكيل ظل على بعد 10 بيكسل إلى اليمين۔
  • الإزاحة الرأسية هي 10px، مما يؤدي إلى تشكيل ظل على بعد 10 بيكسل إلى الأسفل۔
  • نصف قطر التمويه هو 5px، مما ينتج عنه ظل بتمويه قدره 5 بيكسل۔
  • اللون هو rgba(0, 0, 0, 0.5)، مما ينتج عنه لون أسود شبه شفاف۔
مثال على الظل الداخلي 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • استخدام inset يرسم الظل داخل العنصر۔
مثال على الظلال المتعددة 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • يمكنك أيضًا تعيين ظلال متعددة مفصولة بفواصل۔ في هذا المثال، تم تطبيق ظلين: ظل أسود وظل أحمر۔

الملخص

  • box-shadow هي خاصية تُستخدم لإضافة ظلال إلى العناصر لتكوين إحساس بالعمق۔
  • من خلال الجمع بين الإزاحات الأفقية والرأسية، التمويه، نصف قطر الانتشار، واللون، يمكن تحقيق مجموعة متنوعة من التأثيرات۔
  • يمكنك رسم الظلال داخل العنصر باستخدام inset، كما يمكنك أيضًا تعيين ظلال متعددة في آنٍ واحد۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالخلفيةخصائص CSS المتعلقة بالقوائم