تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إنشاء الحدود والظلال


الصفحة السابقة

فصل جديد ، دفعة جديدة من خصائص CSS سنركز هنا على الحدود والتأثيرات التظليلية التي يمكن تطبيقها ، سواء على النص أو على الكتل التي تشكل صفحتنا.

على وجه الخصوص ، سوف نعيد استخدام معرفتنا بالألوان لاختيار لون حدودنا وظلالنا.

هل أنت مستعد ؟

الحدود


يوفر لك CSS مجموعة واسعة من الحدود لتزيين صفحتك. العديد من الخصائص CSS تسمح لك بتغيير مظهر من حدودكم: border-width، border-color، border-style... للوصول إلى هذه النقطة ، أقترح هنا استخدام الخاصية الفائقة borderالتي تشمل جميع هذه الخصائص مباشرةً. هل تتذكر الخاصية الفائقة(super-property) background؟ إنها تعمل على نفس المبدأ: سنكون قادرين على الجمع بين عدة قيم.

ل borderواحدة يمكن استخدام ما يصل إلى ثلاث قيم لتغيير مظهر الحدود:

  • العرض : حدد عرض حدودك. ضع قيمة بالبكسل مثل (2px).
  • اللون : هو لون حدودك. الاستخدام، كما تعلمنا، اما اسم اللون black، red، ... أو قيمة برمز سداسي عشري ( #FF0000)،او قيمة RGB ( rgb(198, 212, 37)).
  • نوع الحدود : هنا لديك الخيار. قد تكون حدودك عبارة عن سطر واحد أو خطوط منقطة أو شرطات ، إلخ. فيما يلي القيم المختلفة المتاحة:
    • none: لا حدود (تلقائي) ؛
    • solid: خط بسيط ؛
    • dotted: النقاط ؛
    • dashed: شرطات ؛
    • double: الحدود المزدوجة ؛
    • groove: في راحة ؛
    • ridge: تأثير الإغاثة الأخرى ؛
    • inset: تأثير 3D
    • outset: تأثير 3D

لذلك ، للحصول على حدود زرقاء ، في شرطات ، بسمك 3 بكسل حول العناوين ، سأكتب:


h1
{
    border: 3px blue dashed;
}    

يوضح لك الشكل التالي أنماط الحدود المختلفة التي يمكنك استخدامها.

css html file
أعلى ، يمين ، يسار ، أسفل ...

من قال إن عليك تطبيق نفس الحدود على الجوانب الأربعة للعنصر الخاص بك؟ تاراتاتا ، إذا كنت ترغب في وضع حدود مختلفة حسب الجانب (أعلى أو أسفل أو يسار أو يمين) ، يمكنك القيام بذلك دون مشكلة. في هذه الحالة ، ستحتاج إلى استخدام هذه الخصائص الأربعة:

  • border-top: الحدود العليا.
  • border-bottom: الحد السفلي ؛
  • border-left: الحدود اليسرى ؛
  • border-right: الحدود اليمنى.

هناك أيضًا معادلات لتعيين كل تفاصيل الحد إذا كنت ترغب في: border-top-width تغيير سمك الحد border-top-colorالعلوي ، للون العلوي ، إلخ. إنها أيضًا من الخصائص الفائقة border ، فهي تعمل ولكن تنطبق فقط على جانب واحد.

لإضافة حد فقط إلى يسار ويمين الفقرات ، سنكتب:


p
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}    

يمكنك تحديد حدود أي نوع من العناصر على الصفحة. لقد فعلناها هنا في الفقرات ، لكن يمكننا أيضًا تعديل حدود الصور ، والنصوص المهمة مثل ، إلخ.

حدود مدورة


الحدود الدائرية ، إنها العصفور النادر الذي ينتظره مصممي المواقع لآلاف السنين (أو تقريبًا). منذ وصول CSS3 ، أصبح من الممكن أخيرًا إنشاءه بسهولة!

تسمح لنا border-radius بالتجول بسهولة في زوايا أي عنصر. فقط أشر إلى حجم ("أهمية") التقريب بالبكسل:


    p
    {
        border-radius: 10px;
    }    

يتم رؤية التقريب خاصة إذا كان للعنصر حدود ، كما في الشكل التالي.

css html file

... أو إذا كان له لون خلفية ، كما في الشكل التالي.

css html file

يمكننا أيضا تحديد شكل التقريب لكل زاوية. في هذه الحالة ، أدخل أربع قيم:


p
{
    border-radius: 10px 5px 10px 5px;
}       

تتوافق القيم مع الزوايا التالية بهذا الترتيب:

  1. أعلى اليسار ؛
  2. أعلى اليمين ؛
  3. أسفل اليمين ؛
  4. أسفل اليسار.

أخيرًا ، من الممكن تحسين تقريب زوايانا عن طريق إنشاء منحنيات بيضاوية). في هذه الحالة ، يجب عليك تحديد قيمتين مفصولتين بشرطة مائلة (/) شرطة مائلة الأفضل بالتأكيد هو الاختبار لمعرفة التأثير:


p
{
    border-radius: 20px / 10px;
}    
css html file

الظلال


الظلال هي واحدة من الابتكارات الحديثة التي اقترحها CSS3 اليوم ، ما عليك سوى سطر واحد من CSS لإضافة ظلال إلى صفحة!

سنكتشف هنا نوعين من الظلال:

  • ظلال الصناديق.
  • ظلال النص.
BOX-SHADOW: ظلال الصناديق

box-shadow تنطبق الخاصية على الكتلة بأكملها وتأخذ أربع قيم بالترتيب التالي:

  1. التحول الأفقي للظل.
  2. التحول العمودي للظل.
  3. تليين التدرج.
  4. لون الظل.

على سبيل المثال ، للظلال السوداء من 6 بكسل ، دون تليين ، سنكتب:


p
{
    box-shadow: 6px 6px 0px black;
}    

هذا يعطي النتيجة الموضحة في الشكل التالي (أضفت حدًا للفقرة حتى نتمكن من رؤية التأثير بشكل أفضل).

css html file

دعنا نضيف تليين بفضل القيمة الثالثة (الشكل التالي). يمكن أن يكون التليين صغيرًا (أقل من الإزاحة) أو عاديًا (يساوي الإزاحة) أو عاليًا (أكبر من الإزاحة). لنجرب التليين الطبيعي


{
    box-shadow: 6px 6px 6px black;
}    
css html file

يمكننا أيضا إضافة قيمة اختيارية خامسة: inset. في هذه الحالة ، سيتم وضع الظل داخل الكتلة ، لإعطاء تأثير منخفض:


p
{
    box-shadow: 6px 6px 6px black inset;
}    

اسمح لك بمحاولة رؤية النتيجة.

css html file
TEXT-SHADOW: ظل النص

مع text-shadow، يمكنك إضافة الظل مباشرة على النص تعمل القيم تمامًا مثل box-shadow: الإزاحة و التليين واللون.


p
{
    text-shadow: 2px 2px 4px black;
}    

تظهر النتيجة في الشكل التالي.

css html file

الخلاصة


  • يمكنك تطبيق حد لعنصر مع الخاصية border. من الضروري الإشارة إلى عرض الحد ولونه ونوعه (خط مستمر ، خط منقط ...).
  • يمكنك وضع الحدود المدورة مع border-radius.
  • يمكنك إضافة ظل إلى كتل النص مع box-shadow. يجب الإشارة إلى الإزاحة العمودية والأفقية للظل ومستوى التليين ولونه.
  • يمكن أن يكون للنص أيضًا ظل text-shadow.