CSS

Part 12 استخدام الخصائص المتقدمة في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 140 3 دقائق

استخدام الخصائص المتقدمة في CSS

الخصائص المتقدمة في CSS توفر لك العديد من التأثيرات المميزة التي يمكن أن تحسن تصميم الموقع بشكل كبير. سنتناول في هذا الدرس ثلاثة من هذه الخصائص المتقدمة وهي:

الظل (Box Shadows & Text Shadows): إضافة تأثيرات الظل على العناصر والنصوص.
الحدود المنحنية (Border Radius): منح العناصر حواف منحنية.
الشفافية (Opacity): استخدام الشفافية في العناصر.

1. الظل (Box Shadows & Text Shadows)

الظل (Box Shadow) و ظل النص (Text Shadow) هما خصائص تمنحك القدرة على إضافة ظلال جميلة للعناصر أو النصوص لتبدو أكثر عمقًا وتفاعلًا مع البيئة المحيطة.

1.1 Box Shadow (ظل العنصر)

التركيب

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

h-offset: المسافة الأفقية للظل (يمكن أن تكون قيمة موجبة أو سالبة).
v-offset: المسافة الرأسية للظل (يمكن أن تكون قيمة موجبة أو سالبة).
blur-radius: مدى تشويش الظل (يحدد مدى انتشار الظل).
spread-radius: مدى انتشار الظل من العنصر.
color: لون الظل.
inset: إذا كنت ترغب في أن يكون الظل داخليًا داخل العنصر.

مثال

/* إضافة ظل خارجي */
.box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);  /* 10px أفقيا، 10px رأسيا، 15px تشويش، لون الظل أسود نصف شفاف */
}

h-offset: المسافة الأفقية للظل.
v-offset: المسافة الرأسية للظل.
blur-radius: مدى تشويش الظل.
color: لون الظل.

مثال

/* إضافة ظل للنص */
h1 {
    font-size: 50px;
    color: #ffffff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);  /* 3px أفقيا، 3px رأسيا، 5px تشويش */
}

الشرح:

في المثال الأول، يتم تطبيق ظل خارجي على العنصر باستخدام box-shadow، حيث يتم تحريك الظل بمقدار 10px على كلا المحورين الأفقي والرأسي، ثم يتم تشويشه بمقدار 15px، واللون سيكون أسود مع شفافية 50% (RGBA).
في المثال الثاني، يتم تطبيق ظل للنص باستخدام text-shadow على العنوان h1، حيث يتم تحريك الظل بمقدار 3px على كلا المحورين، ثم يتم إضافة تشويش بمقدار 5px.

2. الحدود المنحنية (Border Radius)

الحدود المنحنية تُستخدم لجعل زوايا العناصر أكثر نعومة وإعطائها مظهرًا أكثر حداثة. يمكن تطبيق border-radius على أي عنصر يحتوي على حدود.

2.1 تركيب `border-radius`

التركيب

border-radius: [قيمة];

قيمة واحدة: لجعل جميع الزوايا مستديرة بنفس الحجم.
قيمتان: قيمة واحدة للزوايا الأفقية والأخرى للرأسية.
أربع قيم: لكل زاوية قيمة خاصة بها.

مثال

/* مستطيل بحدود منحنية */
.box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 15px;  /* جميع الزوايا مستديرة بزاوية 15px */
}

/* مستطيل بحدود منحنية غير متساوية */
.box-2 {
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    border-radius: 20px 50px 30px 10px;  /* زوايا غير متساوية */
}

الشرح:

في المثال الأول، يتم تطبيق border-radius على المربع بحيث تكون جميع الزوايا مستديرة بزاوية 15px.
في المثال الثاني، يتم تطبيق border-radius مع قيم مختلفة لكل زاوية من زوايا المربع.

3. الشفافية (Opacity)

الشفافية (Opacity) في CSS تتحكم في مدى رؤية العنصر. قيمة opacity تتراوح من 0 (شاملًا شفافية كاملة، أي أن العنصر غير مرئي) إلى 1 (غير شفاف، العنصر مرئي بالكامل).

3.1 تركيب `opacity`

التركيب

opacity: [قيمة من 0 إلى 1];

مثال

/* عنصر شفاف */
.box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    opacity: 0.5;  /* العنصر شبه شفاف (50% من الشفافية) */
}

/* عنصر غير شفاف */
.box-2 {
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    opacity: 1;  /* العنصر غير شفاف (100% من الشفافية) */
}

الشرح:

في المثال الأول، يتم تطبيق opacity على العنصر بحيث يكون نصف شفاف (0.5 يعني 50% من الشفافية)، مما يجعل الخلفية مرئية من خلاله.
في المثال الثاني، العنصر غير شفاف (1 يعني 100% من الشفافية).

4. مثال كامل باستخدام الخصائص المتقدمة:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على الخصائص المتقدمة</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box"></div>
    <div class="box-2"></div>
    <h1>عنوان مع ظل نص</h1>
    <div class="transparent-box"></div>
</body>
</html>

CSS (styles.css)

/* مربع مع ظل */
.box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    margin: 20px;
}

/* مربع مع ظل داخلي */
.box-2 {
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    box-shadow: inset 10px 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 20px 50px 30px 10px;
    margin: 20px;
}

/* عنوان مع ظل نص */
h1 {
    font-size: 50px;
    color: #ffffff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

/* مربع شفاف */
.transparent-box {
    width: 200px;
    height: 200px;
    background-color: #2ecc71;
    opacity: 0.3;  /* شفافية 30% */
    margin: 20px;
}

الشرح:

Box Shadow & Border Radius:
- .box يحتوي على ظل خارجي مع box-shadow وحواف منحنية باستخدام border-radius.
Text Shadow:
- h1 يحتوي على text-shadow مما يجعل النص يظهر مع تأثير الظل في اتجاهات محددة مع تشويش.
Opacity:
- .transparent-box يحتوي على شفافية باستخدام opacity مما يجعل العنصر شفافًا بنسبة 30%.
Box Shadow (Inside):
- .box-2 يحتوي على ظل داخلي باستخدام inset والذي يجعل الظل يظهر داخل العنصر بدلًا من خارجه. كما أن الزوايا ليست متساوية، مما يعرض تأثيرًا مختلفًا.

خلاصة:

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