عند قيامك بتطبيق خصائص ‏CSS‏ المتعددة بشكل مرتب، سينتج لديك أشكال ومناظر ساحرة، خصوصًا إذا ‏كان مضافًا إليها بعض من الحِيَل ‏CSS3 Tricks‏. دعنا نلق نظرة على معرض الصور الفورية (‏Polaroid‏) ‏بتنسيق ‏CSS‏ خالص. (‏Polaroid‏ تعني الصور التي تستطيع التقاطها واستخراجها على هيئة بطاقة مباشرة ‏من الكاميرات الفورية).‏

سنستخدم في هذا الدرس عدة خصائص من ‏CSS3‎‏، للأسف، فإن بعض ‏التأثيرات لن تظهر على متصفح الإنترنت إكسبلورر، بينما ستظهر كاملة على المتصفحات الأخرى مثل ‏FireFox‏ ‏وSafari‏. سنقوم باستخدام أساسيات ‏CSS‏ لتنسيق الصور، ومن ثم إدراج بعض التأثيرات الإضافية مثل الظل ‏والاستدارة، وبعدها نستخدم خاصية ‏z-index‏ لإرسال العناصر إلى الأمام لتبدو ظاهرة للمستخدمين.‏

تحضير الصور

لنبدأ العمل بتحديد مسارات الصور التي ترغب في وضعها، قمنا في درسنا هذا بجلب عدد من الصور الجميلة من ‏موقع ‏Flickr‎‏: ‏

• Iguassu Falls 006 by claudio
• Sweet Home Under White Clouds by galego
• Sunset over the highway by claudio
• Skies and fields from Argentina’s pampa 7 by claudio
• Sunrise by claudio
• Södermanland Lake by claudio

بنية الصفحة

ننتقل إلى الخطوة التالية، نشرع في إعداد بُنية الصفحة بوضع ‏Container‏ وسط الصفحة (‏Container‏ ‏هو العنصر الذي سيكون داخله باقي عناصر المشروع، تمامًا مثل الأب). 

قم بإدراج مجموعة الصور في قائمة عناصر ‏‎ul‎، وأرفق بكل صورة محور عنصر لإنشاء رابط لها. لا تنس أن ‏تقوم بإضافة وصف مناسب لكل صورة:

<div id="container">
<ul class="gallery"> 
    <li>
        <a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></a>
    </li> 
    <li>
        <a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></a>
    </li> 
    <li>
        <a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></a>
    </li> 
    <li>
        <a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-4"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></a>
    </li> 
    <li>
        <a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class ="pic-5"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></a>
    </li> 
    <li>
        <a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></a>
    </li> 
</ul>
</div>

الآن نقوم بتنسيق الصفحة، أضف خلفية الصفحة ‏wood ‎texture‏ مكررة لتضفي جمالا على الصفحة:

body { 
    background: #959796 url(images/wood-repeat.jpg);
}
‏#‏container‏ { 
    width: 600px; 
    margin: 40px auto‏;‏ ‏
}

تنسيقات معرض الصور

بدأنا العمل الآن فعليًا على تنسيقات معرض الصور بالـ‏CSS‏. بداية، سَنُزيل النقاط الافتراضية لعناصر القائمة. ‏ولتطبيق ذلك قم باستخدام ‏list-style: none‏:

ul.gallery li a‏ { 
    float: left‏;‏ 
    padding: 10px 10px 25px 10px‏;‏ 
    background: #eee‏;‏ 
    border: 1px solid #fff‏;‏
    ‏list-style: none
}

طبق تأثيرات ‏Polaroid‏‏‎ ‎للصور بإضافة بعض التنسيقات إلى المحاور. أولاً قم بتطبيق خاصية الـ‏float‏ ‏بالقيمة ‏‎left لإلصاقهم جنبًا إلى جنب، ثم أضف مقاسات الـ‏padding‏ المذكورة أدناه. غَيّر لون الخلفية إلى ‏الرمادي الفاتح حتى تضفي اللون التقليدي لشكل الـ‏Polaroid‏. بعد ذلك أضف تأثيرات الظل للحدود.

لإضفاء الواقعيّة الجمالية على التصميم، استخدم خاصية ‏box-shadow‏ في الـ‏CSS3‎‏ لتطبيق تأثيرات الظل ‏الجميلة على الصور. يلزمنا إضافة خاصية ‏position: relative‏ لضمان ترتيب العناصر ملتصقة:

ul.gallery li a‏ { 
    float: left‏;‏ 
    padding: 10px 10px 25px 10px‎‏;‏ 
    background: #eee‏;‏ 
    border: 1px solid #fff‏;‏
    -moz-box-shadow: 0px 2px 15px #333‎‏;‏ 
    position: relative‏;‏ ‏
}

‏الآن نحتاج إلى تطبيق تنسيق مفرد لكل صورة على حدة، فلنعد إلى الوراء قليلا ونعطي اسم ‏class‏ محدد لكل محور ‏عنصر بمفرده.‏ مثال:

<li>
    <a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></a>
</li> 

يمكننا الآن إضافة تنسيقات محددة لكل صورة بمفردها، عن طريق اسم ‏class‏ الخاص بكل منها. سنقوم الآن بكتابة ‏تنسيقات الـ‏CSS‏ مع تغيير خاصية ‏z-index‏ و‏rotation‏ لكل صورة على حدة:

ul.gallery li a.pic-1 { z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); } ul.gallery li a.pic-2 { z-index: 5; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); } ul.gallery li a.pic-3 { z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); }

نرى الآن تداخل الصور فيما بينها بعض الشيء وتموضعها بشكل عشوائي على السطح الخشبي.‏

قم بإضافة حدث التنسيق ‏‎:hover‎‏ لكل المحاور مرة واحدة، وأدرج فيه خاصية ‏z-index‏ لأعلى قيمة موجودة ‏لديك، وبذلك فإن الصورة التي يمر عليها الماوس تصبح بارزةً أمام باقي الصور الأخرى. اضبط خاصية ‏box-‎shadow‏ لتعطي انطباعًا أن تلك الصورة برزت أمام أخواتها:

ul.gallery li a:hover‏ { 
    z-index: 10‎‏;‏ ‏-‏
    moz-box-shadow: 3px 5px 15px #333‎‏;‏ ‏
}

مثال حي:  يمكن معاينة المثال من هنا

وصلنا إلى نهاية هذا الدرس، تصفح ملفات المشروع. تستطيع تطويره وربط الصور بتأثيرات ‏أخرى رائعة مثل ‏javascript lightbox‏ وعرضها في موقعك الخاص بك.‏

ترجمة وبتصرف للمقال: How To Create a Pure CSS Polaroid Photo Gallery.

shapes.zip

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائص الجديدة مثل ‏transform‏ و ‏border-radius‏ بإضافة تشكيلات ‏جديدة إلى الأشكال الأساسية بدلاً من رسمها وتصميمها على برامج الرسم والتصميم. ‏

في درسنا لهذا اليوم، دعنا ننشئ قائمة بالأشكال الأكثر شيوعًا، وذلك باستخدام ‏CSS3‎‏.‏

يمكنك تحميل الملفات المصدرية لهذا الدرس من هنا.

الدائرة

HTML‎

لإنشاء دائرة في الـCSS، نحتاج أولاً إلى ‏div‏ واسمٍ للشكل ‏id‏. وهنا ستأخذ الدائرة هذا الإسم:

‎<div id="circle"></div>‎

CSS‎

ضع مقاسات العرض والارتفاع ‏width‏ و ‏height‏ بالـ‏CSS‏ واجعل قيمة ‏border-radius‏ ‏نصف قيمة العرض والارتفاع:

‏#‏circle‏ } ‏ ‏
    width: 120px‏;‏ 
    height: 120px;‏
   ‏ ‏background: #7fee1d;‏ ‏ 
    -moz-border-radius: 60px‏;‏ 
    webkit-border-radius: 60px‏;‏‏ 
    border-radius: 60px‏;‏‏
}

المربع

‏

HTML‎

نحتاج إلى ‏div‏ مع وضع اسمٍ له، لإنشاء شكل مربع وربطه بالاسم:

‎<div id="square"></div>

‎CSS‎

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

#‏square‏ } ‏ ‏
    width: 120px‏;‏‏ 
    height: 120px‏;‏
    background: #f447ff‏;‏‏
}

المستطيل

HTML

أنشئ ‏div‏ وضع اسمًا له، ويفضل أن يكون الاسم نفس نوع الشكل:

‎<div id="rectangle"></div>‎

‎CSS‎

نضبط العرض والارتفاع تمامًا مثل المربع؛ ولكن بزيادة قيمة العرض أكثر من الارتفاع:

‏#‏rectangle‏ } ‏ ‏
    width: 220px‏;‏
    height: 120px‏;‏
    background: #4da1f7‎‏;‏‏
}

الشكل البيضاوي

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏oval‏:

‎<div id="oval"></div>‎

CSS‎

يشابه الشكلُ البيضاوي الدائرةَ إلى حد كبير؛ ومع ذلك، فإن الشكل البيضاوي هو مستطيل زواياه مستديرة بقيمة ‏نصف الارتفاع:

#‏oval‏ } ‏ ‏
    width: 200px‏;‏‏
    height: 100px‏;
    background: #e9337c‏;-‏
    webkit-border-radius: 100px / 50px‏;‏-‏
    moz-border-radius: 100px / 50px‏;‏
    border-radius: 100px / 50px‏;‏‏
}

المثلث

HTML

يحتاج المثلث إلى ‏div‏ باسم ‏triangle‏:‏

‎<div id="triangle"></div>‎

CSS‎

لإنشاء مثلث بواسطة الـ‏CSS‏، نقوم بالتعديل في خاصية ‏border‏. سنقوم بتعديل عرض الـ‏border‏ ‏حتى يعطينا نتائج مغايرة في قياس الزاويا:

#‏triangle‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-bottom: 140px solid #fcf921‎‏;‏‏‏
    border-left: 70px solid transparent‏;‏‏
    border-right: 70px solid transparent‏;‏‏
}

المثلث المقلوب

HTML

قُم بإنشاء ‏div‏ وأعطه اسمًا‏:

‎<div id="triangle_down"></div>‎

CSS‎

نحتاج إلى تعديل خاصية الحدّ السفليّ، لينتُج لدينا مثلث معكوس:

#‏triangle_down‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-top: 140px solid #20a3bf‏;‏‏
    border-left: 70px solid transparent‏;‏
    border-right: 70px solid transparent‏;
}

مثلث متجه إلى اليسار

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل وليكن ‏triangle_left‏‏:

‎<div id="triangle_left"></div>‎

CSS

نقوم بالتعديل في خاصية الحدّ الأيمن، حتى نحصلَ على مُثلث مُتَّجه لليسار:

#‏triangle_left‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‎‏;‏
    border-right: 140px solid #6bbf20‎;‏
   ‏ ‏border-bottom: 70px solid transparent‏;‏
}

مثلث متجه لليمين

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏triangle_right‏:

‎<div id="triangle_right"></div>

‎

CSS

بعد ذلك نقوم بالتعديل على خاصية الحدّ الأيسر، ليصبح عندنا مثلثًا متجهًا إلى اليمين:

#‏triangle_right‏ }
    ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‏;‏
    border-left: 140px solid #ff5a00‎‏;‏
    border-bottom: 70px solid transparent‏;‏
}

الشكل المعين (الماسة)‏

HTML

يحتاج المُعين إلى ‏div‏ باسم ‏diamond‏:

‎<div id="diamond"></div>‎

CSS‎

يُمكن عرض المُعيّن بعدة طرق، وذلك باستخدام خاصية ‏transform‏ مع ‏rotate‏. بهذا يصبح لديك مُثلثان ‏متقابلان ومتلاصقان ببعضهما:

#‏diamond‏ } ‏ ‏
    width: 120px‏;‏
    height: 120px‏;
    background: #1eff00‎‏;‏
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); ‏
    webkit-transform-origin: 0 100%‎‏;‏
    moz-transform-origin: 0 100%‎‏;‏ 
    -ms-transform-origin: 0 100%‎‏;‏‏ 
    -o-transform-origin: 0 100%‎‏;‏
    transform-origin: 0 100%‎‏;‏
    margin: 60px 0 10px 310px‏;‏
}

شبه المنحرف

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏trapezium‏‏:

‎<div id="trapezium"></div>‎

CSS‎

نقوم الآن بصناعة الشكل المطلوب، حيث نجعل الحدَّ الأيمن والأيسر متساويين مع الاحتفاظ بالحدّ السفليّ مُسَطّحًا:

#‏trapezium‏ } ‏ ‏
    height: 0‎;‏
   ‏ ‏width: 120px‏;‏‏
    border-bottom: 120px solid #ec3504‎‏;‏‏
    border-left: 60px solid transparent‏;‏
    border-right: 60px solid transparent‏;‏
}

متوازي الأضلاع

HTML‎

قُم بإنشاء ‏div‏ وأعطه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS‎

ثم قم بضبط قيمة الانحراف ‏skew‏ لخاصية ‏transform‏ لحرفه بزاوية 30 درجة:

#‏parallelogram‏ } ‏ ‏
    width: 160px‏;‏
    height: 100px‏;‏
    background: #8734f7‎‏;‏ 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
}

النجمة

HTML

‎يلزمنا ‏div‏ لإنشاء النجمة مع اسمٍ له وليكن ‏star‏‏:

‎<div id="star"></div>‎

CSS‎

يتطلب إنشاء النجمة بالـ‏CSS‏ تعديلات عجيبة في خصائص الحدود مع استعمال قيمة ‏rotate‏ لخاصية ‏‏‏transform‏، لاحظ ذلك في الكود‏:

#‏star‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    margin: 50px 0‎‏;‏
    color: #fc2e5a‏;‏
    position: relative‏;‏‏
    display: block‏;‏
    border-right: 100px solid transparent‏;‏
    border-bottom: 70px solid #fc2e5a‏;‏
    border-left: 100px solid transparent‏;‏ 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); ‏
}
‏#‏star:before‏ { 
    height: 0; 
    width: 0; 
    position: absolute; 
    display: block; 
    top: -45px; 
    left: -65px; 
    border-bottom: 80px solid #fc2e5a; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg);
‏}
#‏star:after‏ { 
    content: ''; 
    width: 0; 
    height: 0; 
    position: absolute; 
    display: block; 
    top: 3px; 
    left: -105px; 
    color: #fc2e5a; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid #fc2e5a; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); ‏
}

النجمة السداسية

HTML

تتطلب النجمة السداسية وجود ‏div‏ مع اسمٍ للشكل، ولنطلق عليه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS

بخلاف النجمة السابقة، فإننا سنقوم بتعديل خصائص الحدود. سننشئ مجموعة من الأشكال ومن ثم نُلصقُها ببعضها ‏البعض لنحصل على الشكل المطلوب:

#‏star_six_points‏} ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    display: block;‏
   ‏ ‏position: absolute‏;‏‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏
    border-bottom: 100px solid #de34f7‎‏;‏‏
    margin: 10px auto‏;‏ 
} 
‏#‏star_six_points:after‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏‏
    border-top: 100px solid #de34f7‎‏;‏‏
    margin: 30px 0 0 -50px‎‏;‏‏
}

‏

المضلع الخماسي

HTML

‎يتطلب المُضلعُ الخماسي وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pentagon‏‏:

‎<div id="pentagon"></div>‎

CSS‎

نحتاج إلى عنصرين لإنشاء المضلع الخماسي. أول عنصر نقوم بإنشائه هو شكل شبه المنحرف والعنصر الثاني هو ‏المثلث حيث سيكون أعلى الشكل الأول:

#‏pentagon‏ } ‏ ‏
    width: 54px‏;‏
    position: relative‏;‏
    border-width: 50px 18px 0‎‏;‏‏
    border-style: solid‏;‏
    border-color: #277bab transparent‏;‏ 
} 
‏#‏pentagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏height: 0‎‏;‏‏
    width: 0‎‏;‏‏
    position: absolute‏;‏‏
    top: -85px‎‏;‏
    left: -18px‎‏;‏‏
    border-width: 0 45px 35px‏;‏
    border-style: solid‏;‏‏
    border-color: transparent transparent #277bab‏;‏‏
}

المضلع السداسي

HTML

‎
يلزمنا ‏div‏ لإنشاء المُضلع السداسي مع اسم له وليكن ‏hexagon‏‏:

‎<div id="hexagon"></div>‎

CSS‎

هناك عدة طرق لإنشاء المُضلع السداسي. إحدى هذه الطرق مطابقة بشكل كبير لطريقة إنشاء المُضلع الخماسي. حيث ‏نقوم بإنشاء مستطيل في البداية ومن ثم نضيف أعلاه مُثلثين:

#‏hexagon‏ } ‏ ‏
    width: 100px‏;‏‏
    height: 55px‏;‏
    background: #fc5e5e‏;‏‏
    position: relative‏;‏‏
    margin: 10px auto‎‏;‏‏
} 
‏#‏hexagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;‏
    border-right: 50px solid transparent‏;‏‏
    border-bottom: 25px solid #fc5e5e‏;‏‏
}
‏#‏hexagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏‏
    bottom: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;
    border-right: 50px solid transparent‏;‏‏
    border-top: 25px solid #fc5e5e‏;‏‏
}

المضلع الثماني

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏octagon‏‏:

‎<div id="octagon"></div>‎

CSS‎

يُمكن إنشاء هذا الشكل بطرق مُشابهة للشكل السابق. حيث نقوم بإنشاء شكلين شبه منحرفين ومن ثم نضع مُثلثين على ‏كل جانب منهما. على الرغم من وجود بعض الطرق الأخرى لعمل ذلك؛ إلا أن هذه هي أفضل طريقة لذلك:

#‏octagon‏ } ‏ ‏
    width: 100px‏;‏
    height: 100px‏;‏‏
    background: #ac60ec‏;‏‏
    position: relative‏;‏‏
} 
‏#‏octagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 42px‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: 0‎‏;‏‏
    left: 0‎‏;‏
    border-bottom: 29px solid #ac60ec‏;
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
} ‏
#octagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 42px‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    bottom: 0‎‏;‏‏
    left: 0‎‏;‏
    border-top: 29px solid #ac60ec‏;‏
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
}

شكل القلب

HTML

يتطلب شكل القلب وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏heart‏‏:

‎<div id="heart"></div>

‎CSS‎

يُمكن أن يكون إنشاءُ شكل القلب صعبًا بعض الشيء؛ ولكن نستطيع القيام بذلك عن طريق عمل استدارة للعناصر من ‏زوايا مختلفة وتغيير قيمة خاصية ‏transform-origin‏ حتى نتمكن من تغيير موضع العنصر المُحَدَّد:

‏#‏heart‏ } ‏ ‏
    position: relative‏;‏ ‏
}
‏#heart:before, #heart:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 70px‏;‏‏
    height: 115px‏;‏
    position: absolute‏;‏
    background: red‏;‏
    left: 70px‏;‏‏
    top: 0‎‏;‏ 
    -webkit-border-radius: 50px 50px 0 0; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
‏{‏
#‏heart:after‏ {
   ‏ left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; ‏
}

البيضة

HTML

يلزمنا ‏div‏ لإنشاء شكل البيضة مع اسمٍ له وليكن ‏egg‏‏:

‎<div id="egg"></div>‎

CSS‎

إنَّ شكل البيضة مطابق إلى حدٍّ ما للشكل البيضاوي؛ إلا أن ارتفاعها أكبر بقليل من عرضها. نقوم بضبط خاصية ‏الزوايا المستديرة بشكل دقيق حتى نحصل على مرادنا بالضبط:

#‏egg‏ } ‏ ‏
    width: 136px‏;‏
    height: 190px‏;‏
    background: #ffc000‎‏;‏‏
    display: block‏;‏‏
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px‏;‏‏
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%‎‏;‏‏
} ‏

شكل اللانهائية

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏infinity‏‏:

‎<div id="infinity"></div>‎

CSS‎

يمكن الحصول على شكل اللانهائية بالضبط الدقيق لخصائص الحدود وزاويا الدائرة كما بالشكل السابق:

#‏infinity‏ } ‏ ‏
    width: 220px‏;‏
    height: 100px‏;‏
    position: relative‏;‏‏
}
‏#‏infinity:before, #infinity:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 60px‏;‏
    height: 60px‏;‏‏
    position: absolute‏;‏‏
    top: 0‎‏;‏
    left: 0‎‏;‏ 
    border: 20px solid #06c999; 
    -moz-border-radius: 50px 50px 0; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}
‏#‏infinity:after‏ { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
‏}

بالون التعليقات

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏comment_bubble‏‏:

‎<div id="comment_bubble"></div>‎

CSS‎

نقوم بصناعة هذا الشكل بواسطة إنشاء مستطيل ذي زوايا مستديرة، ثم ننشيء مُثلثًا ونضعه على الجانب الأيسر كما ‏بالصورة:

#‏comment_bubble‏ } ‏ ‏
    width: 140px‏;‏
    height: 100px‏;‏
    background: #088cb7‎‏;‏
    position: relative‏;‏ 
    -moz-border-radius: 12px; 
    -webkit-border-radius: 12px; ‏
    ‏border-radius: 12px‏;‏
}
‏#‏comment_bubble:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    right: 100%‎‏;‏‏
    top: 38px‏;‏‏
    position: absolute‏;‏‏
    border-top: 13px solid transparent‏;‏‏
    border-right: 26px solid #088cb7‎‏;‏‏
    border-bottom: 13px solid transparent‏;‏
}

شكل باكمان (لعبة آكلة الجبنة)‏

HTML

يتطلب شكل الباكمان وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pacman‏‏:

‎<div id="pacman"></div>‎

CSS‎

إنشاء شكل الباكمان غير صعب، فكل ما يحتاجه هو نفس خطوات إنشاء الدائرة مع تعديل بسيط في الحدود وخاصية ‏‏‏radius‏ لصنع فتحة على الجانب الأيسر من الدائرة‏:

#‏pacman‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-right: 70px solid transparent‏;‏
    border-top: 70px solid #ffde00‎‏;‏‏
    border-left: 70px solid #ffde00‎‏;‏‏
    border-bottom: 70px solid #ffde00‎‏;‏
    border-top-left-radius: 70px‏;‏‏
    border-top-right-radius: 70px‏;‏‏
    border-bottom-left-radius: 70px‏;‏
    border-bottom-right-radius: 70px‏;‏‏
}

في الختام

توجد هناك العديد من الميزات في استخدام الأشكال المصنوعة بالـ‏CSS‏، فهي أفضل بكثير من وضع صور ‏جاهزة على موقعك. فأنت تستطيع استخدامها الآن كجزء من تصاميم المواقع، على الرغم من أنها قد لا تعمل على ‏بعض المتصفحات مثل إنترنت إكسبلورر بإصداراته القديمة. ‏

الآن وقد انتهيت من درس اليوم، أتمنى أن تكون قد استمتعت فيه، وأنا على استعداد لتقبل أي تعليقات أو تساؤلات أو ‏اقتراحات في هذا المجال.‏

ترجمة وبتصرف للمقال: How to Create Different Shapes in CSS.

حقوق الصورة البارزة: Designed by Freepik.

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه.

ستكون تنبيهات هذا الدرس من الشكل التالي:

بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم:

<div class="tn-box tn-box-color-1">
    <p>Your settings have been saved successfully!</p>
    <div class="tn-progress"></div>
</div>

سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر:

.tn-box {
    width: 360px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 25px 15px;
    text-align: right;
    border-radius: 5px;
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.1), 
        inset 0 1px 0 rgba(255,255,255,0.6);  
    opacity: 0;
    cursor: default;
    display: none;
    transform: translateY(30px)
}

.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}

أما بالنسبة لشريط التقدم فسنعطيه التالي:

.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    right: 2%;
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.05), 
        0 -1px 0 rgba(255,255,255,0.6);
}

في البداية، سيكون عرض شريط التقدم 0.

في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه:

<input type="checkbox" class="fire-check">
<section>
    <div class="tn-box tn-box-color-1">
        <p>شريط التقدم الجميل!</p>
        <div class="tn-progress"></div>
      </div>
  </section>

الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده.

وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي:

.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}

أما بالنسبة للحركية (animation) فهي كالتالي:

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; transform: translateY(0px);}
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(30px);}
    100% { opacity: 0; }
}
@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }
}

ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم.

حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا).

مثال حي

See the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen.

ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس.

.tn-box:hover, 
.tn-box:hover .tn-progress{
    animation-play-state: paused;
}

ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou.

حقوق الصورة البارزة: Designed by Freepik.

تُقدّم أشباه العناصر (pseudo-elements) عناصر DOM إضافيّة وبدون عناء يُذكر، فهي تَسمح للمُطوّر في إضافة مُحتوى إضافي إلى الصفحات وبدون إضافة أيًا من عناصر HTML على الصفحة، كما يُمكن لها أنّ تتحرّك (animated).

ستتناول هذه المقالة استخدام شبه عنصر (pseudo-element) لإضافة تأثير بصري على زر.

شبه العناصر Pseudo-elements

يُمكن باستخدام CSS تحديد شبه عنصر باستخدام ::before أو ::after ليتم بعد ذلك إدراج شبه العنصر ضمن العنصر، أو بين العنصر و محتوى ما، وباعتبار أنّ شبه العنصر يعمل عمل أي عنصر، فمن المُمكن أنّ يتمّ تنسيقه، أو توضيعه، وستكون صياغة الشيفرة الخاصّة به على الشكل التّالي:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

يُمكن القول هنا، أنّ العنصر pebble. يملك عنصرين وهميين مُرتبطين به، ويُمكن تنسيقهما أيضًا.

ملاحظة حول الفرق بين استخدام "::" و ":"

يُقبَل عامًّا استخدام تضعيف النقطتان، وذلك للدلالة على استخدام شبه العناصر، وذلك على عكس شبه الأصناف (pseudo-classes) مثل :hover أو :first-child، ولكن يجب استخدام ( في حال الرغبة في دعم IE8، مع العلم أنّ جميع المُتصفّحات الأخرى وبإصداراتها الأخيرة تدعم النقطتان المُضاعفتان (::).

استخدام خاصية content

يجب عند استخدام شبه العناصر، ضبط الخاصّيّة content لكي يُصبح شبه العناصر مرئيًا على الصّفحة، ومن المُمكن الاحتيال عليه للظهور عبر استخدام مُحتوى فارغ كما في التّالي:

.pebble::before {
  content: ""
  ... more styling goes here...
}

يجب أنّ تجعل الشيفرة السابقة من العنصر مرئيًا على الصّفحة.

الزر البراق (Shiny button)

سيتمّ استخدام شبه العنصر لإتمام هذا المثال، وذلك عبر إنشاء تأثير اللّمعان عند المرور فوق الزر، كما في المثال.

البداية مع شيفرة HTML

<button>Oooh SHINY</button>

لا يوجد حاجة إلى كتابة المزيد من سطور HTML للمُتابعة، على اعتبار أنّه سيتمّ استخدام شبه العنصر لإضافة بقيّة المُحتوى، ولكن لا بأس من إضافة صنف (class) إلى الوسم <button> لتنسيقه عند وجود أكثر من نوع على الصّفحة، ولكن للمثال الحالي سيتمّ استخدام عنصر الزر على حاله للتبسيط.

إضافة التأثير

إن التأثير المُراد إضافته ما هو إلا تدرّج خطي (linear gradient) يمر عبر الزر، ولإنشاء هذا التدرّج سيتمّ استخدام شبه العنصر after، وتوضيعه في خارج الزر وفي بدايته.

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

يُصنع تأثير اللّمعان من تدرّج اللون الخارجي للزر إلى الأبيض ومن ثُمّ إلى العودة إلى اللون الأصلي.

يجب إخفاء طبقة اللّمعان لتظهر فقط عند حركة المرور (hover)، ولعمل ذلك سيتمّ ضبط خاصّيّة overflow إلى hidden للزر، وباعتبار أنّ شبه العنصر هو ضمن الزر، فهذا يعني أنّ تموضعه خارج الزر لن يكون مرئيًّا.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

تمّ إضافة بعض التنسيق إلى الزر لكي يظهر بارزًا وذو منظرٍ خاصٍّ به، تجدر الإشارة هنا إلى استخدام position: relative، وذلك لكي يكون شبه العنصر المتموضع بشكل مُطلق (absolutely) مُتواجدًا داخل الزر، فبدون ضبط هذه الخاصّيّة، سيتموضع العنصر ذو التَمَوْضُع المُطلق ضمن العنصر الأب.

إضافة التحريك (Adding the animation)

يجب لاستكمال هذا المثال باستخدام التحريك:

• أوّلًا: إخبار المُتصفّح ليستخدم التحريك عند حركة المرور (hover).
• ثانيًا: تحديد بالضَّبط ما هو التحريك المطلوب وذلك باستخدام keyframes.

يتمّ إضافة حالة المرور عبر إلحاق after إلى hover كما في التّالي:

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

تمّ في الشيفرة السابقة إخبار المُتصفّح، أنّه عند حركة المرور (hover)،
يجب على شبه العنصر after أنّ يُطبّق التحريك animation، ذو الاسم “sheen”، ولمدّة ثانية واحدة، ويتوقف عند النهاية بدون تكرار.

يجب الأخذ بعني الاعتبار الترتيب، فاستخدام ::after:hover لن يعمل، حيثُ عندها سيتمّ إخبار المُتصفّح ليتفاعل مع حالة المرور (hover) لشبه العنصر نفسه.

تتوفّر الشيفرة السابقة أيضًا على حالة التمركز (focus)، والّتي تعني أنّ المُستخدم الّذي يضغط على زر لوحة المفاتيح tab ضمن الصّفحة سيرى التأثير "sheen" أيضًا عند الوصول إليه، وبدون الحاجة لحركة المرور.

سيتمّ في الخطوة التّالية تعيين وضبط keyframes لهذا التحريك:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

تمّ في الشيفرة السابقة كتابة keyframe واحد فقط، وذلك باعتبار أنّ بداية التَمَوْضُع (0%) هي مُضمّنة من قبل تَمَوْضُع بداية شبه العنصر، فكل ما يجب فعله هو ضبط نهاية التَمَوْضُع، والتي ستكون أعلى يمين الزر، ليُحاكي المُتصفح هذا التأثير

دعم المتصفحات للتحريك

أصبحت الخاصّيّة animation، و شبه العناصر مدعومة بشكل جيّد مع آخر إصدارات المُتصفّحات، ولكن يُستحسن دائمًا إلحاق السوابق webkit و moz من أجل الخاصّيّة keyframes.

ترجمة وبتصرف للمقال Animating pseudo-elements.

في بعض الأحيان تحتاج التصاميم شديدة البساطة إلى بنية معقدة وتطبيق مهارات مختلفة على التنسيق. توسيط العناصر، ضبط المحتوى و المحاذاة هي طرق غير كافية لجميع الحالات. أحد العيوب التي يمكن أن تسببها الطرق السابقة تكمن عند ضبط الترويسة بحيث يكون: العنوان على اليسار وقائمة التنقل على اليمين. في هذه الحالة من الشائع استخدام الخواص float ،position مع إعطاء القيمة absolute، كأسلوب آخر يمكن التفكير باستخدام الخصائص padding, margin ، حيث يوجد بالتأكيد عدة طرق وأساليب ولكن السؤال المهم هو: أي هذه الطرق مناسب عند عمل تصميم متوافق مع جميع أجهزة العرض "responsive" ؟ فبعض الطرق تعطي نتائج جيدة على الشاشات كبيرة الحجم ولكنها تؤدي إلى نتائج غير مرغوبة في الشاشات الصغيرة.

ضمن هذا الدرس سنظهر كيفية توسيط عناصر الترويسة (أو أي عنصر آخر) وضبطها بشكل عمودي/شاقولي وباستخدام أشباه العناصر pseudo-elements فقط. وبدون استخدام الخصائص float أو absolute. وذلك للحصول على نتيجة مشابهة للتالي :

شيفرة HTML لهذا المثال بسيطة جدا وهي :

<header>
    <h1>Super Bad</h1>
    <nav>
        <a>First Link</a>
        <a>Second Link</a>
        <a>Third Link</a>
    </nav>
</header>

سنقوم بتطبيق بعض التنسيقات على هذه الترويسة لإعطائها ارتفاعًا ثابتًا وبعض الحشوة padding كما نقوم بإعطاء الخاصية text-align القيمة justify وذلك لضبط العناصر داخل الترويسة:

header {
   text-align: justify;
   letter-spacing: 1px;
   height: 8em;
   padding: 2em 10%;
   background: #2c3e50;
   color: #fff;
}

وفقاً للنتيجة المطلوب الوصول إليها، يجب أن يظهر كلً من العنوان وقائمة التنقل على سطر واحد، سنقوم بعمل هذا بدون استخدام float أو position إنما عبر تطبيق القيمة inline-block كالتالي :

header h1,
header nav {
   display: inline-block;
}

في الواقع فإن الخاصية text-align:justify والتي من شأنها أن تجعل العنوان على اليسار وقائمة التنقل على اليمين، فإنها لن تعطي النتيجة المرجوة منها بوجود الخاصية الأخرى inline-block إلا إذا كانت محتويات العنصر أكبر من العنصر نفسه، أي حدوث طفحان overflow وهذا غير موجود في مثالنا الحالي، لذلك نقوم استخدام شبه عنصر pseudo-element وذلك عبر استخدام الصنف after:: على الترويسة وظهوره معها ضمن نفس السطر عبر الخاصية inline-block وضمان حدوث الطفحان عبر الخاصية width: 100% :

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

لغاية الآن نكون قد حصلنا على النتيجة التالية.

حتى الآن تمكنا من الحصول على العناصر مرتبة بأسلوب صحيح بشكل أفقي وبدون استخدام الخصائص float أو absolute ولكن ما نرغب به زيادةً على هذا هو تطبيق التوسيط عمودياً، وهي حقيقة من المشاكل التي تواجه مطوري الويب بشكل مستمر (توسيط المحتوى عمودياً)، يوجد بالتأكيد عدة حلول ومن الشائع استخدام الخصائص margin،line-height أو حتى absolute. ولكن دعنا نناقش طريقة أفضل.

بدايةً لو قمنا بإعطاء الخاصية vertical-align: top إلى قائمة التنقل فإننا سنلاحظ أن جميع عناصر القائمة ستتحرك إلى الأعلى وبالتحديد إلى بداية قسم الترويسة وهذا طبيعي إلى الآن (معاينة).

الآن إذا قمنا بإعطاء ارتفاع الترويسة القيمة 100% فيصبح بإمكاننا توسيط عناصر قائمة التنقل عبر استخدام الخاصية vertical-align: middle نحصل على هذا.

ولكن كيف يمكن توسيط جميع عناصر الترويسة عموديا ؟ يكمن الحل بإضافة عنصر جديد وإعطائه ارتفاع 100% وذلك لنضمن عمل المحاذاة العمودية بالشكل الصحيح ، حيث سنلجأ إلى استخدام شبه عنصر نطبق عليه هذه الخاصية لنضمن توسيط باقي العناصر والحصول على النتيجة المرجوة، هذا الأسلوب تم شرحه من قبل Michal Czernow.

وبالتالي يكون تنسيق CSS :

header h1 {
   height: 100%;
}

header h1::before {
   content: '';
   display: inline-block;
   vertical-align: middle;  
   height: 100%;
}

وبالتالي نحصل على النتيجة المطلوبة.

كما يبدو فإننا حصلنا على النتيجة المطلوبة ولكن علينا أن نتأكد من أمرين اثنين :

1. Line-breaks : أي النتيجة التي ستظهر في حال النص الطويل والنزول لأكثر من سطر.
2. Responsiveness : أي توافقية العرض على جميع الأجهزة للحصول على نفس النتيجة المطلوبة.

لنبدأ بالنقطة الأولى: في حال كان العنوان يمتد على أكثر من سطر، عندئذ سيتم دفعه إلى الأسفل وهذا تصرف منطقي على اعتبار أن ارتفاع العنصر الوهمي هو 100%، أنظر هذا المثال.

لحل هذه المسألة دعنا بالبداية نضع العنوان ضمن عنصر div خاص به:

<header>
    <div>
        <h1>Super Bad</h1>
    </div>

    <nav>
        <a>First Link</a>
        <a>Second Link</a>
        <a>Third Link</a>
    </nav>
</header>

وبالتالي تطبيق شبه عنصر على هذه الفقرة الجديدة كالتالي:

header {
   text-align: justify;
   height: 15em;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header > div,
header nav,
header div h1 {
   display: inline-block;
   vertical-align: middle;
}

header > div {
   width: 50%;
   height: 100%;
   text-align: left;
}

header > div::before {
   content: '';
   display: inline-block;  
   vertical-align: middle;
   height: 100%;
}

وبالتالي الحصول على هذه النتيجة.

ننتقل الآن إلى النقطة الثانية وهي التوافق مع جميع أجهزة العرض. يمكن على سبيل المثال عدم تعريف ارتفاع الترويسة وإعطاء حشوة padding لجميع العناصر الداخلية للحصول على الارتفاع المطلوب. في هذه الحالة لن نحتاج إلى العنصر div الذي تم إضافته مسبقا ويكون تنسيق CSS كالتالي :

header {
   text-align: justify;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header h1,
header nav {
   display: inline-block;
   vertical-align: middle;
}

header h1 {
   width: 50%;
   text-align: left;
   padding-top: 0.5em;
}

header nav {
   padding-top: 1em;
}

ونحصل على هذه النتيجة.

وبالتالي نكون قد حصلنا على النتيجة المطلوبة، أما في حال رغبت بتحديد ارتفاع الترويسة عندئذ يجب إعادة استخدام العنصر div والاستعانة بـ media query من أجل الشاشات الصغيرة، ويصبح تنسيق CSS كالتالي:

@media screen and (max-width: 820px){
   header {
       height: auto;
   }

   header > div,
   header > div h1,
   header nav {
       height: auto;
       width: auto;
       display: block;
       text-align: center;
   }
}

وتكون النتيجة مشابهة لهذه.

ملاحظة:  إن ترغب بجعل هذا المثال يعمل بشكل صحيح على المتصفح انترنت اكسبلورر 8 فيجب استخدام ":" عوضا عن "::" ضمن العناصر والفئات الوهمية، حيث يكون تنسيق CSS كاملا كالتالي :

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);

* { padding: 0; margin: 0; }

body { 
    background: #1abc9c; 
    font-family: 'Lato', sans-serif; text-transform: uppercase; 
    letter-spacing: 1px;
}

header {
   text-align: justify;
   height: 8em;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header > div,
header > div::before,
header nav,
header > div h1 {
   display: inline-block;
   vertical-align: middle;
   text-align: left;
}

header > div {
   height: 100%;
}

header > div::before {
   content: '';
   height: 100%;
}

header > div h1 {
   font-size: 3em;
   font-style: italic;
}

header nav a {
   padding: 0 0.6em;
   white-space: nowrap;
}

header nav a:last-child {
   padding-right: 0;
}

@media screen and (max-width: 720px){
   header {
      height: auto;
   }

   header > div,
   header > div h1,
   header nav {
       height: auto;
       width: auto;
       display: block;
       text-align: center;
   }
}

والنتيجة ستبدو كهذه.

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

ترجمة -وبتصرّف- للدّرس  Justified and Vertically Centered Header Elements لكاتبه Mary Lou 

جميع حقوق المقال محفوظة لموقع codrops.

نستخدِم المحدِّدات Selectors في كلّ مرّة نستخدم فيها CSS. تبقى محدِّدات CSS - رغم كثرة الاستخدام - أحد الأجزاء الأكثر إهمالًا في ملفّ المواصفة Specification.

نتحدّث كثيرًا عن التّحويلات Transformations الكبرى في CSS3 لكنّنا دائمًا ننسى الأساسيّات. يجعل الاستخدام الجيّد للمحدّدات من كتابة الشّفرة أيسر وأكثر أناقة. سنغطّي في هذا المقال عشرة محدّدات يقلّ الانتباه إليها في الغالب، إلّا أنّها تجمع بين الفائدة العاليّة والفعاليّة.

*

ربّما يكون محدِّد * الأسهل تذكّرا إلّا أنّه في الغالب لا يُستخدَم بكثرة. يتمثّل عمل هذا المحدِّد في تنسيق جميع العناصر الموجودة في الصّفحة؛ ومن الجيّد استخدامُه لإعادة العناصر للوضع الابتدائيّ Reset وإنشاء بعض التّنسيقات الافتراضيّة للصّفحة مثل مجموعة الخطوط Font family والحجم Size.

* {
   margin: 0;
   padding: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 16px;
}

A + B

يُسمَّى محدّد المُجاوِر Adjacent ويعمل على تحديد العنصُر (B) الّذي يتبع العُنصُرَ الأوَّل (A) مباشرةً. العنصران A وB يوجدان في نفس المستوى. نحدّد في المثال التّالي أوَّلَ عنصر div بعد التّرويسة Header:

header + div {
  margin-top: 50px;
}

A > B

يُشبه عملُه عملَ المحدِّد A B. يكمن الاختلاف في أنّ A B يحدّد كلّ العناصر المتفرّعة من العنصُر A مهما كان المستوى الّذي توجد به ؛ أما A > B فيكتفي بالعناصر الفرعيّة ذات المستوى الأوّل. يُنصَح باستخدام المحدِّد A > B عند التّعامل مع الأبناء المباشرين للعنصُر الأب. لاحِظ المثال التّالي:

<h1>
  <em>هامّ:</em>
  هذا 
  <span>
    العنوان 
    <em>مهمّ</em> 
    جدًّا
  </span>
</h1>

التّنسيق التّاليّ يلوّن عنصُر em المتفرّع عن h1 مباشرةً بالأحمر:

h1 > em {
  color: red;
}

لو استخدمنا المحدّد A B لأعطى اللّون الأحمر لكلّ عناصر em في المثال السّابق.

["A[href*="example

يُستخدَم لتنسيق رابط خاصّ بطريقة مغايرة. يُقارن ما يوجد بين ظفريْن بعنوان الرّابط فإن وُجدت مطابقة نُفِّذ التّنسيق. المثال التّاليّ يجعل كلّ الّروابط الّتي تُحيل إلى فيسبوك تبدو زرقاء:

a[href*="facebook"] {
  color: blue;
}

يُمكن استخدام المحدِّد دون علامة *؛ يجب في هذه الحالة أن يكون التّطابق مع الرّابط تامًّا.

(A:not(B

يستخدم عبارة النّفي not لاستبعاد ما لا يُطابق B. المثال التّاليّ يحدّد كلّ عناصر div الموجودة في الصّفحة ما عدا التّذييل Footer:

div:not(.footer) {
  margin-bottom: 40px;
}

A:first-child / A:last-child

يسمح بتحديد أوّل أو آخر عنصُر فرعيّ من العنصُر A (على التّوالي A:first-child وA:last-child). يُمكن أن يكون المحدِّد مفيدًا عند التّعامل مع عناصر لائحة، لحذف هامش أو إطار على سبيل المثال. في ما يلي نحذف الإطار عن أوّل عنصُر من اللّائحة والهامش عن آخر عنصُر:

ul li:first-child {  
  border: none;  
}     
ul li:last-child {  
  margin-right: 0px;
}

(A:nth-child(n

يوفّر المحدِّد nth-child وسيلةً سهلة لاختيّار أيّ عنصُر فرعيّ حسب ترتيبه. يحدّد المثال التّالي العنصُر الثّالث ضمن لائحة غير مرتَّبة ul ويطبِّق عليه التّنسيق.

ul li:nth-child(3) {
  background: #ccc;
}

يُمكن استخدام هذا المحدّد أيضًا لاختيّار العناصِر الّتي ترتيبها مُضاعِف لعدد معيَّن عبر إضافة n بعد العدد. المثال التّالي يحدِّد العناصر ذات التّرتيب 3، 6، 9، 12 وهكذا.

ul li:nth-child(3n) {
  background: #ccc;
}

(A:nth-last-child(n

يُشبِه عمله عمل المحدِّد nth-child ويُستعمل على نفس المنوال؛ لكنه يبدأ حساب التّرتيب من آخر عنصُر، بدلًا من أوّل عنصُر. يعني هذا أنّك عند إعطاء العدد 2 لتحديد عنصُر من لائحة فسيختار العنصُر قبل الأخير في التّرتيب.

ul li:nth-last-child(2) {
  background: #ccc;
}

(A:nth-of-type(n

يحدّد العنصُر من نوع A الّذي يظهر للمرّة n. نختار في المثال التّاليّ ثالث فقرة (عنصُر p) ضمن div.

div p:nth-of-type(3) {
  font-style: italic;
}

A:visited

هل لاحظت في ما مضى أنّ الصّفحات الّتي سبقت لك زيّارتها تظهر بلون مختلف في نتائج Google؟ هذا بالضّبط هو عمل المحدِّد visited. يمثّل هذا التّنسيق إضافةً كبيرة للمستخدِم؛ إلّا أنّه يُهمَل في بعض الأحيان.

a:visited {
  color: blue;
}

خاتمة

يظهر لي - حسب خبرتي - أنّ هذا النّوع من المحدِّدات يُمكن أن يختصر الكثير من الوقت ويجنِّب تكدّس الكثير من المعرّفات ID داخل الوسوم. ليست هذه سوى البداية، توجد الكثير من محدِّدات CSS الأخرى المفيدة الّتي تُهمَل أحيانًا.

هل تستخدِم محدِّدات CSS؟ هل استخدامها أيسر من المعرِّفات والأصناف Classes؟ شاركنا تجربتك عبر التّعليقات.

ترجمة بتصرّف لمقال 10 CSS selectors you shouldn’t code without لصاحبته Sara Vieira.

نستخدم نحن المطوّرين ومُصمّمي الواجهات CSS في التنسيق والتَمَوْضُع (positioning)، وفي إنشاء مواقع تتسم بالجماليّة والمظهر الخلّاب، ونستخدمها غالبًا في إضافة الحركة إلى الصفحات باستخدام التنقّل (transitions) أو التحريك (animations)، ولكنّنا عادةً لا نتعمّق، ولا ندخل في خفايا خاصّيات CSS المُعقّدة.

يُمكن للتحريك أنّ يكون أداةً قويّة في مُساعدة زوّار مواقعنا وعُملائنا على فهم تصميم الموقع بالشكل الصحيح، ولذلك يوجد بعض المبادئ والتي بتطبيقها يمكن الاستفادة من التحريك بالشكل الأمثل.

إنّ هذه المبادئ ليست بالجديدة، وهي عبارة عن مُمارسات عمليّة وتجارب طويلة من عالم ديزني، فقد نُشرت هذه المبادئ الاثنا عشر للتحريك بكتاب وهو بعنوان:  "وهم الحياة: الرسوم المُتحركة في ديزني" في عام 1981، وصفت وصوّرت هذه المبادئ كيف يُمكن للتحريك أنّ يُستخدم في سلب عقل المُشاهدين في عالم وهميٍّ قابل للتصديق.

سأتناول في هذه المقالة، كلًا من المبادئ الاثنا عشر، ومُناقشة كيف لها أنّ تُطبّق في صناعة صفحات الويب مُستخدمًا الأمثلة التوضيحيّة، وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة عبر حساب الأكاديمية في Github.

التمدّد والانكماش (Squash and Stretch)

إنها المفهوم القائم على أنّ للأجسام كتلة فيزيائيّة، وبتحركها يجب أن تبقى الكتلة ثابتة دون أن تتغيّر، فستتوسّع الكرة عندما تصطدم مع الأرض، ولكنّها أيضًا ستصبح أقصر باعتبار أنّ كتلتها سيُعاد توزيعها.

يُمكن الاستفادة من هذا المفهوم عند إنشاء الكائنات الّتي نُريدها أنّ تبدو فيزيائيّة، مثل الأشخاص، الأشياء، أو تنطط الكرات.

يُمكن تجاهل هذه المبدأ عند التعامل مع عناصر صفحة الويب، فلا ترتبط عناصر الـ DOM بالضرورة مع الأجسام الفيزيائيّة، ويُمكن لها أنّ تكبر وتتقلّص على المُتصفّح كما تقتضي الحاجة، فعلى سبيل المثال، يُمكن للزر أنّ يكبر ومن ثم يتلاشى، أو يُمكن لرسائل الخطأ أنّ تظهر وتختفي كما يحلو لها.

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

التهيئة (Anticipation)

لا تحدث الحركات فجأةً، ففي الواقع العمليّ، تَنتج الحركة عادةً تدريجيًا، سواءً كان ذلك في دوران الكرة قبل السقوط من على الطاولة، أو عندما يثني شخصٌ ما قدميه استعدادًا للقفز.

يُمكننا استخدام ذلك في جعل التحوّل (transitions) والتحريك (animations) في CSS أكثر حيويّةً وواقعيّة، ويُمكن لهذا المبدأ أنّ يكون على شكل ارتداد خفيف للكرة، ليُساعد المُستخدم على إدراك ما الّذي يتغيّر ويتتبّع مسار الجسم على الشاشة.

فعلى سبيل المثال، يُمكن لعنصر من عناصر الصفحة أنّ يتقلّص قليلًا قبل أنّ يكبر في الحجم عند حركة المرور (hover)، أو لنقل مثلًا عند إضافة عناصر قائمة (items) جديدة إلى قائمة، فيُمكن أنّ يُمهد لهذه الحركة عبر إبعاد باقي العناصر وإفساح المجال لها أوّلًا.

التقديم (Staging)

يتأكّد هذا المبدأ من أنّ الجسم أو الشيء هو عنصر المشهد الرئيسي، وهو عندما تفسح باقي الأجسام الأخرى أو جوانب المشهد المجال لمكان حدوث الفعل الرئيسي، يعني هذا إما وضع الفعل الرئيسي في مكان بارز للعيان، أو حجب باقي العناصر بهدف التركيز على ما يجب للمُستخدم أنّ يراه.

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

يُمكن استخدام أسلوب آخر وهو الحركة، فعندما تتحرّك أجسام عدّة، فمن الصعب معرفة أي منها جديرٌ بالاهتمام والمُتابعة، ولكن إنّ توقّفت جميع التحركات وجسم واحد تحرّك، ولو بحركة صغيرة، فمن السهل جدًا اكتشافه.

يُستخدم هذا الأسلوب عادةً مع زر الحِفظ (save)، بحيث يتذبذب أو يتمايل أو يومض بخفّة ليوضّح للمُستخدم أنّ عليه حِفظ المُستند قبل المُتابعة، مع الحفاظ على بقية أجزاء الصفحة ساكنة وبدون أدنى حركة، مع العلم أنّ أي حركة ولو طفيفة ستبرز وتكون واضحة للعيان.

الحركة المُفصّلة والحركة من توقّف إلى توقّف (Straight-Ahead Action and Pose-to-Pose)

إن الفعل straight-ahead يكون عندما يتمّ رسم كل إطار صورة (frame) لإتمام التحريك، أما الفعل pose-to-pose (توقّف إلى توقّف) يكون عندما يتمّ رسم سلسلة من الإطارات المفتاحيّة (keyframes) وتُرسم الفترات فيما بينها لاحقًا، عادةً من قِبل مُساعد.

يُستخدم في عالم الويب معظم الأحيان التحريك من نوع pose-to-pose، فمثلًا الانتقال (transition) بين الإطارات المفتاحيّة (keyframes) يُمكن أنّ تتم معالجتها من قبل المُتصفّح، والذي يُقحم الاختلاف بين كل إطار ويرسم عددًا منها أيضًا بهدف جعل التحريك أكثر سلاسةً وواقعيّة.

يوجد استثناء وحيد، وهو دالة التوقيت steps، فمع هذه الدالة، سيخطو المُتصفّح خطوات على عدد الإطارات المُحدّدة، وبهذه الطريقة ستتمكن من رسم سلسلة من الصور وجعل المُتصفّح يعرض كل منها تتابُعيًا، ليُنشئ بذلك حركة بالأسلوب **Straight Ahead Action”.

توابع الفعل وتداخله (Follow Through and Overlapping Action)

لا تحدث الأشياء دائمًا في نفس الوقت، فعندما تتوقّف سيارة فجأةً، فإنّها تميل إلى الأمام، مع تصاعد الدخان نتيجة احتكاك العجلات مع الأرض، ومن داخل السيارة يواصل السائق ميلانه نحو الأمام إلى حين توقّف كل حدث بشكل مُنفصل.

إن هذه التفاصيل ما هي إلا أمثلة على توابع الحركة وتداخل الحركة، ويُمكن استخدام هذا المبدأ على الويب للمُساعدة على التأكيد أنّ شيئًا ما قد توقّف الآن لأنّه يجب أن يتوقّف، وليس أنّه قد توقّف عن التحريك بشكل مُطلق، على سبيل المثال، عنصر قائمة أُضيف إلى القائمة قد ينزلق، ليتقدّم شيئًا ما أكثر من اللازم، ومن ثُمّ يُصحّح نفسه إلى التَمَوْضُع الصحيح.

إن إنشاء حركة ذات طابع تداخلي، يتطلّب إنشاء عناصر تتحرّك خطًا مُختلفة وذات فروقات طفيفة عن بعضها البعض، وفي الحقيقة هذا الأسلوب مُستخدم بشكل جيّد في أنظمة التشغيل iOS، فعندما يتمّ التنقل بين صفحات التطبيق، بعض الأزرار والعناصر ستتحرّك بمُعدّل مختلف عن بعضها، ليظهر التأثير الكلي في النهاية بشكل مُفعم بالمرونة والسلاسة وأقل سطحيّة من إذا كان كلُ شيءٍ يتحرّك دفعة واحدة وبنفس المُعدّل، وهذا التنقل المتوحد في كينونة واحدة يُعطي المُشاهد أو المُستخدم فترةً زمنيّة ليُدرك هذا التغيير الحاصل بالشكل المطلوب، والابتعاد عن الالتباسات.

قد يُستخدم هذا الأسلوب في عالم الويب عبر تجميع التنقلات (transitions) أو التحريك (animations) تتابعيًا، بهدف إنشاء تأثيرات تظهر بمُعدّل سرعة مُختلف فيما بينها.

التباطؤ والتسريع (Slow In and Slow Out)

لا تنتقل الأجسام من السكون التام إلى السرعة القصوى فورًا، بل تميل الأجسام إلى رفع السرعة تدريجيًا، والتَبْطيء منها قبل التوقّف، فبدون التسارع والتباطؤ، ستكون الحركة وكأنها حركة آلة (روبوتي)

يُعرَف التباطؤ والتسريع في عالم CSS بالمُصطلح easing (تسهيل)، ويُستخدم كدالة توقيت (timing function)، وهو طريقة في وصف وتحديد مُعدّل التغيّر خلال مسار التحريك.

يُمكن وباستخدام دالات التوقيت جعل الأجسام المُتحركة تبدأ بطيئةً وترفع من السرعة (الدالة ease-in)، أو تبدأ سريعةً وتخفّف من السرعة (الدالة ease-out)، ويُمكن من أجل التأثيرات الأكثر تعقيدًا استخدام دالّة التوقيت cubic-bezier.

التقوّس (Arc)

لا شك أنّ الأجسام ستبدو أكثر حيويّة باستخدامها حركات التباطؤ والتسريع المُتبعة في المبدأ السابق، ولكن في حقيقة الأمر إن الأجسام نادرًا ما تتحرك بحركة مستقيمة، فهي تميل إلى اتباع انحناءات مقوّسة.

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

تكون الطريقة الثّانية عبر تدوير العنصر نفسه، حيثُ بإمكاننا التعديل على مركز دوران الجسم عبر ضبط مبدأ التغيّر (transform origin) ليُصبح خارج جسم العنصر، فعندما ندوّر الجسم، فإنه سيدور في تقوّس.

الفعل/الحدث الثانوي (Secondary Action)

بينما الحدث الرئيسي يحدث، يُمكن لحدثٍ ثانويٍ أن يُساعد على التأكيد منه أو حتَّى أنّ يزيد عليه، ربما على سبيل المثال، تأرجح ذراعي شخص يمشي (المشي حدث رئيسي والتأرجح حدث ثانوي) أو تنطط كرة (حدث رئيسي) مع ظهور بعض الغبار (حدث ثانوي) عند الارتطام.

يُمكن رؤية هذا المبدأ على مواقع الإنترنت، عندما تبعد العناصر من نفسها لإفساح المجال للعنصر الجديد، كما يحدث عند سحب عنصر قائمة ووضعه في منتصف القائمة.

التوقيت (Timing)

إن توقيت التحريك هو الوقت المُستغرق في إتمام حركته، فيُمكن للتوقيت أنّ يُستخدم في جعل الأجسام الوزنة تبدو بطيئة في حركتها، أو في إضافة طابع مُميّز وحيوي في الحركة نفسها.

إن التعديل وتسوية/ضبط الوقت في صفحات الويب بسيطٌ للغاية، فكل ما يتطلب فعله هو التعديل على قيمتي الخاصيتين animation-duration أو transition-duration.

المُبالغة (Exaggeration)

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

وفي صفحات الويب، يُمكن للأجسام أنّ تتوسّع وتتقلّص بهدف التأكيد عليها وجذب الانتباه إليها، على سبيل المثال عند ملئ نموذج ما (form)، فيُمكن للقسم النشط أنّ يكبر بينما بقية الأقسام تنكمش أو تتلاشى (fade).

الرسم المتين (Solid drawing)

عند تحريك الأجسام في الأبعاد الثلاثة (three dimensions)، يجب أنّ يكون الاهتمام مُنصبًا على أنّ هذه الأجسام تتبع قواعد الرسم المنظوري، فالناس مُعتادة على العيش والتعامل مع عالم ثلاثيّ الأبعاد، ولذلك عندما لا يبدو على الأجسام كما لها أنّ تكون في الواقع، فستبدو للمُشاهد غريبةً وغير مقبولة.

تدعم آخر إصدارات المُتصفّحات الأبعاد الثلاثيّة جيّدًا، يعني هذا أنّه يُمكننا تدوير وتوضيع الأجسام في الصفحة ليتولّى المُتصفّح عمليّة التحوّل بنفسه.

عامل الجذب (Appeal)

إن عامل الجذب هو خصائص ومُميّزات العمل الفني وكيف يُمكن له أنّ يجعل منا مُتصلين ذهنيًّا مع مقصد ونيّة الفنان، فهو كجاذبيّة المُمثّل (الكاريزما)، ففي النهاية الانتباه إلى التفاصيل واتحاد الحركات مع بعضها البعض تناغميًا تجعل من النتائج نتائج مُميّزة وذات ظهور خلاب.

يُمكن للتحريك المصنوع بأيدٍ احترافيّة وبعناية خاصّة أنّ يُنشئ جاذبيّة ومظهر ذو شأن على صفحات الويب، وقد أدركت بعض الشركات ذلك، فاستفادت Stripe من التحريك وسخرته في إضافة مصداقيّة إلى شاشة الدفع (checkout) الخاصّة بهم.

استخدم التحريك

إن استخدام المبادئ السابقة له فضلٌ كبير في تحسين التحريك، فالرسوم الّتي تحافظ على الوزن الفيزيائي للأجسام والتغييرات ذات الطابع الحدسي، وتستفيد من الحدث الثانوي مع التوقيت المُناسب سيجعل منها ذو جودة عالية لُساعد في تقديم إضافة نوعيّة وذات جودة إلى المُحتوى.

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

ترجمة – وبتصرّف– للمقال Animation Principles for the Web.

يُساهم إضافة بعض التحريك (animation) عندما تتغيّر أجزاء صفحة الويب، في مُساعدة المُستخدِم على إدراك ما الّذي يحدث في الصّفحة، فيُمكن للتحريك أنّ يَدل على وصول مُحتوى جديد، أو لفت نظره إلى المُحتوى الّذي هو طور الإزالة.

ستتناول هذه المقالة كيف يُمكن للتحريك المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر قائمة من القائمة الخاصّة بهم.

See the Pen WvjoXa by Walid (@01walid) on CodePen.

تقديم/تحضير المُحتوى (Introducing content)

يُمكن للتحريك أنّ يكون مُفيدًا عندما يُساعد الزوّار على إدراك التغيّر الحاصل على صفحة ما، فعندما يتمّ إضافة مُحتوى أو يُزال من دون أي تحريك، فمن المُحتمل جدًا أنّ لا يستطيع الزائر مُلاحظة أي تغيّر مُفاجئ قد يطرأ على الصفحة، وقد يجعل الأمر من الزائر حائرًا في أمره، وعليه فإن إضافة بعض التحريك إلى الصفحة سيُساعد كثيرًا في الأمر، وذلك عن طريق التدليل بأنّ شيئًا ما سوف يُزال من الصّفحة أو يُضاف إليها.

إن أحد الأمثلة الأكثر شيوعًا على إضافة أو إزالة المُحتوى يكون في إدارة محتويات قائمة، مع أنّه يُمكن استخدام التحريك لبقيّة الأنواع الأخرى من المُحتوى بطبيعة الحال.

إعداد صفحة الويب (Setting up the HTML)

سيتمّ كخطوة أولى استخدام قائمة وزر لإضافة عناصر جديدة إلى القائمة.

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

يجب الانتباه إلى بعض الأمور هنا، أوّلًا يجب استخدام IDs في صفحة HTML، على الرغم من أنّها لا تُستخدم في التنسيق (styling) عادةً، بما أنّها تُستخدم في تحديد عنصر بحدّ ذاته – على عكس الأصناف (classes) – ولكنّها من الأفضل استخدامها هنا بسبب استخدام جافاسكريبت.

تملك العناصر الأوليّة الصنف “show”، حيثُ هو الصنف الّذي سيتمّ استخدامه فيما بعد في إضافة تأثير التحريك.

استخدام JavaScript مع عناصر القائمة

سيتمّ كتابة سطورًا من جافا سكريبت لاستكمال عرض المثال، وذلك لإضافة عنصر قائمة جديد إلى القائمة، ومن ثُمّ إضافة الصنف “show” ليتمكن التحريك من عمل عمله، يوجد في الحقيقة سببٌ في استخدام هذا الأسلوب، ففي حال إضافة عناصر القائمة في حالة الظهور مُباشرةً، عندها لن يكون هناك مُتسع من الوقت للتنقل (transition) ليعمل عمله.

يُمكن الالتفاف حول الأمر عبر استخدام التحريك على العناصر li، ولكن ستُصعب هذه الطريقة من عمليّة التعديل عند إزالة العناصر.

/*
 * Add items to a list - from cssanimation.rocks/list-items/
 */
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

عناصر القائمة بدون تحريك (No animation)

يُمكن كتابة بعضًا من CSS لإظهار عناصر القائمة، فقد تمّ استخدام الصنف show في ضبطهم على الظهور، ولذلك إزالة الصنف show يجب أنّ يخفيهم.

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

تمّ في التنسيق السابق ضبط عناصر li لتبدو على شكر مُستطيل، وبدون النقاط الدائريّة (bullet points)، وبارتفاع (height) بالقيمة 0، وهامش بمثله، وضبط overflow إلى مخفي (hidden)، كل هذا من أجل أنّ تكون عناصر القائمة غير مرئيّة إلى حين تطبيق الصنف show عليها.

يُعيّن الصنف show ارتفاعًا وهامشًا للعناصر، وباعتبار أنّه لم يتمّ تطبيق التحريك بعد، فيجب على هذه العناصر أنّ تظهر فجأةً (مُباشرةً وبدون أي تأثير) على الصّفحة.

إضافة تأثير التَّلاشِي (Fade)

سيتمّ إضافة تأثير تلاشي بسيط كأوّل مثال على التحريك، فستظهر عناصر القائمة شيئًا فشيئًا على خلاف الظهور السابق، ولكن يبقى المظهر ضعيفًا بصريًا، مع أنّه يُقدّم للمُستخدِم فترة من الزمن لمُلاحظة أنّ شيئًا ما يحدث.

See the Pen MwmbGM by Walid (@01walid) on CodePen.

تمّ إنشاء أقصوصة منفصلة من CSS لإضافة التأثير، ولتطبيقها على القائمة، سيتمّ تطبيق الصنف fade على الحاوية المُحيطة بالقائمة.

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}

.fade li.show {
  opacity: 1;
}

إضافة تأثير التّلاشي والانزلاق (Slide down & Fade)

إن الظهور المُفاجئ في كل مرّة يُضاف فيها عنصر أو يُزال هو بعض الشيء غير مُتناسق، وسيتم لهذا الشأن التعديل على الارتفاع، لإنشاء تأثير انزلاقي بشكل مُمهد وسلس.

See the Pen vOmyre by Walid (@01walid) on CodePen.

يكمن الاختلاف بين هذا المثال وبين المثال ذو الصنف fade السابق فقط في أنّ الارتفاع height: 2em قد تمّت إزالته، وباعتبار أنّ الصنف show يملك ارتفاعًا مضبوطًا (مورثًا من أقصوصة CSS الأولى في هذا الدرس)، فإنه سيحوّل الارتفاع بشكل آلي.

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}

.slide-fade li.show {
  opacity: 1;
}

التأرجح (Swinging in)

يُمكن الذهاب أكثر من ذلك بجانب تأثيري التّلاشي والانزلاق، وذلك عبر إضافة لمسة ثلاثيّة الأبعاد، فيُمكن للمُتصفّح تحريك ونقل العناصر بالأبعاد الثلاثة، الأمر الّذي يُساهم في إضافة عمق بصري ومنظوري إلى المشهد والصورة.

See the Pen NqjbzE by Walid (@01walid) on CodePen.

يتمّ الإعداد عن طريق تعريف الحاوية section، والّتي بداخلها سيحدث التحرّك الثلاثي الأبعاد، ولعمل هذا المنظور يجب استخدام الخاصّيّة perspective.

إن المنظوريّة (perspective) في CSS هي عمق المشهد/المنظر، ويُعبّر الرقم المُنخفض عن منظور قليل العمق، ومن المُستحسن تجربة هذه الخاصّيّة لاستكشاف القيمة المُناسبة والبعد المطلوب بالشكل الأمثل.

.swing {
  perspective: 100px;
}

سيتمّ في الخطوة التّالية إعداد العناصر li للتحوّل (transform) في المكان، وسيتم استخدام الخاصّيّة opacity لإنشاء تأثير التلاشي كما تمّ من قبل، ولكن مع استخدام الخاصّيّة transform لتدوير عناصر li في مكانها.

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

تمّ البدء في المثال السابق مع عناصر القائمة li ومع دوران مُساوي إلى تسعين درجة، ولكن عند إضافة الصنف show سيتمّ ضبط الخاصّيّة transform إلى القيمة none، الأمر الّذي يسمح لها بالتنقل في المكان، ولإعطاء تأثير التأرجح تمّ استخدام دالة التوقيت cubic-bezier.

التأرجح من الجانب (Swinging from side)

يمكن تحسين التأثير السابق بهدف إنشاء تنسيقات مُختلفة وبسهولة، في المثال التّالي تتأرج عناصر القائمة من الناحية الجانبيّة.

See the Pen eNWBjY by Walid (@01walid) on CodePen.

ليتم إنشاء هذا التأثير كل ما يجب فعله هو تغيير محور الدوران.

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

ما تمّ عمله في الشيفرة السابقة هو فقط تغيير rotateX إلى rotateY.

سوابق الخاصيات واختبار المُتصفّحات (Prefixes and browser testing)

لا تتضمّن الشيفرة السابقة على أي من سوابق المتصفحّات (prefixes)، وذلك من أجل سهولة قراءة الشيفرة فقط، ولكن في الواقع العمليّ يُنصح في إضافة هذه السوابق لدعم المُتصفّحات الّتي تحتاج إلى السابقة webkit أو أيً من السوابق الأُخرى، أو يُمكن الاعتماد على Autoprefixer في ذلك.

تمّ في جميع تأثيرات التحريك السابقة استخدام أسلوب مُبسّط للغاية وهو على مبدأ الإظهار والإخفاء، ولذلك من المُفترض أنّ هذا الإعداد أنّ يعمل مع باقي المُتصفّحات الّتي لا تدعم التحريك، ويُستحسن دائمًا الاختبار والتجربة على مُختلف الأجهزة والمُتصفّحات ولكن بالمُجمل جميع الإصدارات الحديثة من المُتصفّحات من المُفترض أنّ تكون قادرة على دعم هذا التحريك.

ترجمة – وبتصرّف – للمقال Animating List Items.

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

عادة، هذه المميزات يتم تطبيقها عبر Javascript فحسب، ولكنك تستطيع القيام بنفس التأثيرات عبر CSS3 بدون اللجوء إلى Javascript. في هذه المقالة سنرى كيف يمكننا تحقيق ذلك، مع تضمين بعض الأمثلة.

المحتوى

1. مثال بسيط
2. حل حقيقي
3. الإخفاء والإظهار عبر CSS
4. تحسين القائمة
5. دعم المتصفحات

مثال بسيط

هذا مثال بسيط يظهر كيف يمكن إخفاء وإظهار المحتوى عبر CSS:

عندما نضغط على زر إخفاء، سيختفي الزر إلى جانب القائمة في الأسفل، ويظهر زر "إظهار". وإذا شاهدت نسخة الطباعة من الصفحة، فستلاحظ أنّ الأزرار لن تظهر.

الآن بعد مشاهدتنا للمثال، لنلقي نظرة على ما استخدمنا والتقنيات الكامنة خلف ذلك، ونبني قائمة بينما نحن نقوم بذلك.

حل حقيقي

نستطيع استخدام الحل الذي سنطوره في إحدى الحالات التالية:

• نريد أن تجعل محتوى معين يظهر ويختفي في مكان معين (مثل قوائم المحتوى في ويكيبيديا)
• لسبب ما، قد لا نريد استعمال جافاسكربت

لنبدأ بمشاهدة حل يستخدم جافاسكربت؛ قسم المحتوى في مقالة ما في ويكيبديا

المثال السابق مأخوذ من صفحة ويكيبيديا (هو مجرد HTML رغم هذا)، يعمل الجدول عبر إخفاء المحتوى، وتغيير الكلمة من "أخفي" إلى "أظهر" ويتم هذا عبر جافاسكربت. يتم إضافة تسجيل مراقب للزر (Event Listener)، عندما يتم الضغط على الزر، يقوم jQuery بإضافة class جديد للصندوق، يتم أيضا إَضافة واحد لحاوي الروابط، كما يتم تغيير محتوى الزر من "أخفي" إلى "أظهر".

الإخفاء والإظهار عبر CSS

سنحاول إعادة صنع قائمة ويكيبيديا، ولكن عبر CSS فحسب، فسنفقد بعض المميزات، ولكننا سنكسب بعض الأمور في نفس الوقت.

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

مثل قائمة ويكيبديا، نريد من قائمتنا أن تظهر مفتوحة بشكل افتراضي. نصنع class باسم .show و .hide. وبما أن القائمة ستكون مفتوحة، لا نريد من زر .show أن يظهر.

.show {
    display: none;
}

والآن نريد أن نجعل زر الإظهار 'يظهر' ونخفي زر 'الإخفاء' عندما يتم الضغط عليه، يمكننا تحقيق هذا عبر شبه الصنف :focus والذي يعمل عندما يتم الضغط على الرابط بواسطة الفأرة أو التركيز عليه بواسطة لوحة المفاتيح. سنستخدم المحدد "+" والذي يعني العنصر الذي يأتي مباشرة بعد العنصر الأول.

a.hide:focus + .show {
    display: inline;
}

a.hide:focus {
    display: none;
}

الآن، لنجعل الزر يعمل حقا! سوف نقوم بجعل القائمة #menu تختفي عندما يكون زر الإخفاء في حالة :focus بما أنّ القائمة لا تأتي مباشرة بعد الزر، سيكون علينا استخدام المحدد غير المباشر ~ من أجل تحديد القائمة.

a.hide:focus ~ #menu {
    display:none;
}

والآن، لتعديل بسيط أخير. نريد أن نخفي أزرار الإخفاء والإظهار في حال طباعة الصفحة، أسرع طريقة للقيام بالأمر هي عبر استخدام media query والتي تتفقد هل يتم طباعة الصفحة، وإن كان كذلك تقوم بإخفاء الأزرار.

@media print {
  .hide, .show  {
    display: none;
    }
  }

حتى الآن، ما قمنا به يعطينا التأثير المطلوب الذي رأيناه في أول المقال.

القائمة التي لدينا تقوم بنفس عمل قائمة ويكيبيديا تماما، عدى بعض التأثيرات الخفيفة التي سنصل لها بعد قليل. يجب التنويه على أننا لم نستخدم جافاسكربت فحسب، بل استخدمنا مقدارا ضئيلا جدا من CSS من أجل تحقيق هذا، مقارنة ب3 دوال في جافاسكربت وحوالي 20 سطرا من الكود.

تحسين القائمة

الآن بعدما قمنا بصنع التأثير إخفاء المحتوى، نريد أن نضيف له بعض التأثيرات البصرية، وسنستخدم CSS أيضا.

الاختفاء البطيء

بدلا من الإظهار والإخفاء السريع، سيكون من اللطيف لو اختفت القائمة بشكل بطيء، وسنقوم بهذا عبر transition في CSS. سوف نحدد الوضع الافتراضي للقائمة (وهي أن تظهر بشكل كامل) ثم نخفيها ببطيء.

#menu {
  opacity: 1;
}

a.hide:focus ~ #menu {
  opacity: 0;
}

بدل أن نضع التأثير خصيصا للعنصر، نستطيع إَضافته لأي عنصر عبر وضعه في class مستقل

.tran1 {
  -o-transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

الآن، تستطيع إضافة التأثير لأي عنصر تريد وذلك عبر إضافة class فحسب.

النتيجة النهائية

بعد إَضافة بعض التحسينات البسيطة، هذه هي النتيجة النهائية

ملاحظة: حالما تضغط على شيء آخر، يعود كل شيء كما كان وهذا هو التصرف الطبيعي لشبه الصنف :focus ولكنه ليس الأمر الذي نريده نحن. هذه المشكلة ليست موجودة في مثال ويكيبيديا بكل تأكيد، كما أن ويكيبيديا تستخدم الـcookies لتتذكر آخر حالة للقائمة حتى بعد تحديث الصفحة، وهو شيء لا نستطيع تحقيقه للأسف.

خاتمة

استطعنا القيام ببعض التأثيرات البصرية باستخدام CSS لوحدها عبر تعلم كيفية إخفاء وإظهار العناصر، هناك محددات واعدة أكثر ستظهر مستقبلا، وستتيح لنا التحكم أكثر وأكثر في العناصر وتحديدها بسهولة، احدى الخدع التي يمكن استخدامها هي استخدام checkbox بدل الروابط من أجل تغيير حالة الصندوق، ولكن كان هذا ليجعل الأمر أكثر تعقيدا.

حقوق الصورة البارزة محفوظة لـ Freepik

خلال العامين الأخيرين، قدَّمت CSS مجموعة جديدة من الخصائص التي تتيح إماكنية تطبيق تأثيرات مختلفة على الصور عبر متصفحات الويب. ومن خلال بضعة أسطر برمجية ودون الحاجة نهائيًا إلى برامج تحرير وتعديل الصور. بالتأكيد فإن هذا الموضوع سيلقى آذانًا صاغية عند الأشخاص الذين يتقنون كتابة الشيفرات البرمجية وليس لديهم نفس المهارة في التعامل مع برامج تحرير وتعديل الصور.

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

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

مزج الألوان باستخدام نماذج المزج في CSS

إذا كنت مصمم ويب وقد استخدمت مسبقً برامج تحرير الرسومات مثل "Photoshop" أو "Illustrator" فلابد أنك قمت بالتعامل مع نماذج المزج أثناء عملك على هذه البرامج . حيث تعتبر نماذج المزج أحد أكثر التأثيرات استعمالً على الرسومات. عمليات المزج والتي تسمى أيضاً بتوابع المزج تتيح درجة تحكم عالية لتطبيق عمليات المزج المختلفة مثل عكس الألوان، خلطها ببعضها البعض، زيادة درجة إضاءتها، والعديد غير هذا.

عندما نستخدم نماذج المزج فإن تأثيرً معينً سيتم تطبيقه على عنصر محدد يدعى بالمصدر "source" حيث سيتم دمجه مع الخلفية ليتم تشكيل الهدف "destination".

هذه الخلفية "backdrop" تعرَّف ضمن CSS على أنها المحتوى الذي يقع خلف العنصر المطلوب وهي التي سيتم دمج العنصر معها. وبالتالي فإن عملية الدمج يقصد بها دمج العنصر المطلوب مع الخلفية التي يتموضع عليها.

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

قبل الشروع بالحديث عن تفاصيل عمليات الدمج ونماذج المزج فمن المهم التذكير بأن CSS تتيح طريقة سهلة لتطبيق عملية الدمج تعرف باسم "دمج ألفا البسيط simple alpha compositing" وعملياً فإن خاصية الشفافية opacity هي التي تقوم به، حيث إن تغيير قيمة هذه الخاصية يجعل المتصفح يقوم بعملية دمج بحيث يمكن أن يظهر العنصر بدرجة شفافية معينة بالنسبة إلى الخلفية التي يقع عليها.

اليوم تتيح CSS خاصيتين رئيسيتين هما: background-blend-mode والتي تقوم بمزج العناصر مع الخلفية المحددة. والخاصية mix-blend-mode ةالتي تسمح بمزج العناصر مع بعضها البعض، ويتم استخدام هاتين الخاصيتين عبر توفير 16 نموذج مزج كقيمة محددة لهما.

مزج صور الخلفية باستخدام الخاصية background-blend-mode

إن الخاصية background-blend-mode وكما يعبر عنها اسمها، تقوم بتطبيق نموذج مزج معين على خلفية العنصر المحدد، هذه الخلفية إما أن تكون صورة أو لون. وبالتالي يجب أن نحدد لهذه الخاصية أي نموذج مزج يجب تطبيقه.

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

على سبيل المثال:

background-image: url(first-image.png), url(second-image.png);
background-color: orange;
background-blend-mode: screen, multiply;

ضمن هذا المثال فإن الخلفية second-image.png سيتم مزجها مع اللون المحدد كخلفية "البرتقالي" باستخدام نموذج المزج "multiply"، بعد ذلك يتم مزج الخلفية first-image.png مع نفس اللون "البرتقالي" باستخدام نموذج المزج screen . (تذكر بأن الخلفية الأولى هي التي سوف تظهر في حين تتوضع باقي الخلفيات تحتها).

توفر CSS كما ذكرنا مسبقا 16 نموذج مزج وهي:

• Normal: وهو النموذج الافتراضي وعمليا لايقوم بتطبيق أي تأثير.

• multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity

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

الصورة التالية تظهر نتيجة تطبيق كل نماذج المزج السابقة (كلٌ على حدى) على نفس الصورة حيث تمت عملية المزج مع اللون الأحمر، ملاحظة : ترتيب الصور بدءً من الصورة العلوية في أقصى اليسار مع نفس ترتيب توابع المزج التي تم ذكرها في الأعلى.

عادةً، يتم اختيار نموذج المزج من خلال التجربة عبر تطبيق نماذج المزج على الصورة لتحديد التأثير المطلوب .

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

ضمن مقال آخر كتبته -أي كاتبة المقال، سارة سويدان- منذ فترة وجيزة، قمت بإنشاء صفحة تفاعلية تسمح لك برفع صورك ومعانية التأثيرات المختلفة لنماذج المزج عليها.

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

عموماً يمكن الحصول على تأثيرات رسومية عبر مزج العناصر مع بعضها البعض (وعدم الاكتفاء بعمليات المزج على الخلفية كما فعلنا حتى الآن). إن هذا الأمر مفيد عندما نرغب بعملية المزج على عنصر صورة <img> أي أنه ليس خلفية إنما عنصر ضمن الصفحة، وأيضاً لمزج النص مع صورة تتوضع خلفه، وفي هذه الحالات فإننا سنستخدم الخاصية الثانية وهي mix-blend-mode .

مزج العناصر مع خلفياتها باستخدام الخاصية mix-blend-mode

واحدة من الاستعمالات الأكثر شيوعً لخاصية مزج العناصر فوق بعضها mix-blend-mode، هي ضمن الصفحات التي تحتوي على ترويسة (عادة قائمة التنقل) ثابتة الظهور أعلى الصفحة حتى عند النزول بشريط التمرير لأسفل، في هذه الحالة يتم تركيب عنصر الترويسة فوق العناصر الأخرى التي تصبح خلفه، استخدام آخر لهذه الخاصية عند تركيب نص ما فوق صورة كخلفية له، بل وحتى تركيب نص فوق نص آخر.

بشكل مشابه للتعامل مع الخاصية background-blend-mode فإن الخاصية mix-blend-mode أيضاً تتعامل مع نفس مجموعة نماذج المزج الست عشرة التي تعرفنا إليها مسبقاً.

الصورة التالية تظهر نص متموضع فوق عنصر صورة ومن ثم التأثير الناتج عن تطبيق توابع المزج المختلفة عبر الخاصية mix-blend-mode:

كمثال على تطبيق نماذج المزج بين العناصر، سنضع نص ما ضمن عنصر <h1> والذي بدوره يوجد ضمن فقرة <div> لها صورة كخلفية، ثم تطبيق نموذج المزج multiply حيث تكون الشيفرة البرمجية كالتالي :

<div class=“wrapper”>
    <h1>This is a blended heading</h1>
</div>

.wrapper {
  background-image: url(path/to/image.jpg);
  background-size: cover;
  /* ... */
}

h1 {
  mix-blend-mode: multiply;
  /* تنسيقات أخرى هنا */
}

من الممكن أيضا كما ذكرنا مزج نص مع نص آخر، وهذا ماينتج عنه تأثير رائع بسبب الألوان الجديدة الناتجة، حيث يظهر في الصورة التالية نتائج عديدة تم الحصول عليها عبر تطبيق نماذج المزج المختلفة مع الخاصية mix-blend-mode.

ضمن الصورة السابقة تم تحريك بعض العناصر عن مواضعها الأصلية لتتراكب فوق عناصر أخرى حتى يتاح لنا إمكانية تطبيق الخاصية mix-blend-mode.

ملاحظات حول المزج

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

عند استخدام الخاصية background-blend-mode فمن غير المجدي استخدام الخاصية isolation وذلك لأن الخلفية لن تتراكب أساسً مع عناصر أخرى تقع خلفها (حيث إنها لن تظهر) وبالتالي فإننا نستخدم خاصية العزل isolation فقط مع الخاصية mix-blend-mode .

يمكن أن تتعلم المزيد عن خاصية العزل isolation. ملاحظة: تسمح الخاصية mix-blend-mode بمزج عناصر SVG.

دعم متصفحات الويب

يومًا بعد يوم تتجه متصفات الانترنت لدعم نماذج المزج بشكل أكبر، على العموم يمكن الاطلاع على المتصفحات التي تدعم الخاصية background-blend-mode والمتصفحات التي تدعم الخاصية mix-blend-mode. بشكل عام يمكن استخدام نماذج المزج مع تحديد سيناريو بديل للمتصفحات التي لاتوفر الدعم.

تعديل الصور باستخدام الفلاتر ضمن CSS

يقوم الفلتر بتطبيق تأثيرات محددة على الصورة عندما يتم عرضها على صفحة الويب، للتوضيح أكثر يمكن تصور الفلتر على أنه طبقة تتوضع أما عدسة الكاميرة وبالتالي مايتم مشاهدته عبر الكاميرة هي الصورة بعد تطبيق تأثير هذه الطبقة عليها، وبالتأكيد يتغير التأثير عندما يتغير الفلتر المستخدم. لتطبيق الفلتر ضمن CSS يتم استخدام الخاصية filter والتي يمكن معرفة المزيد عنها. تأثيرات الفلاتر تشمل تأثير الضباب، تأثير الظل، تأثير اللشفافية وغيره. حيث يتم تحديد دالّة الفلتر (filter function) المراد تطبيقها، يوجد 10 دوال فلتر وهي:

▪ blur()
▪ brightness()
▪ contrast()
▪ grayscale()
▪ hue-rotate()
▪ invert()
▪ opacity()
▪ saturate()
▪ sepia()
▪ drop-shadow()
▪ url()

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

الدالة ()blur

يستخدم هذا التابع لتطبيق تأثير الضباب على الصورة، حيث تظهر بشكل ضبابي. يقوم هذا التابع بعمله وفق خوارزمية غاوص (أي تطبيق Gaussian Blur). ويتم تمرير وسيط له يحدد درجة الضبابية المراد تطبيقها، هذه القيمة يجب أن تكون عدد موجب حصرً وليس عدد سالب أو نسبة مئوية. في حال تمرير القيمة صفر 0 فلن يكون لهذا التابع أي تأثير، وكلما زادت القيمة تزداد درجة الضبابية المطبقة. أما واحدة قياس هذه القيمة فيمكن تحديدها بإحدى القيم : px, em  أو rem. مثال:

blur(.5em);
blur(7px);
blur(0);
filter: blur(); /* equivalent to blur(0); */

النتيجة التالية تظهر عند تطبيق التابع blur مع تمرير القيمة 10px:

الدالة ()brightness

يستخدم هذا التابع لتغيير درجة سطوع الصورة، إما زيادة أو نقصان، ويتم تمرير قيمة له لتحديد درجة السطوع المراد تطبيقه. هذه القيمة إما أن تكون نسبة مئوية أو رقم عشري (مثلاً الرقم 0.65 = 65%)، القيمة صفر 0 تؤدي إلى ظهور الصورة باللون الأسود تماماً. أما القيمة 100% فإنها تحافظ على الصورة بألوانها الطبيعية دون أي تغيير على درجة السطوع. وهكذا فكلما زادت القيمة الممررة للتابع brightness فستزداد درجة السطوع. يمكن تمرير قيمة أكبر من 100% للحصول على سطوع أكبر من الوضع الأصلي للصورة، وأي قيمة أصغر من 100% تؤدي إلى نقصان السطوع عن الوضع الأصلي. مثال:

brightness(150%);
brightness(0);
brightness(0.7);
brightness(0.01);
brightness(200%);
brightness(10%);

النتيجة التالية تظهر عند تطبيق التابع brightness مع تمرير القيمة 200%:

الدالة ()constract

يستخدم هذا التابع لتغيير درجة التباين ضمن الصورة، حيث يقصد بالتباين زيادة الفروق اللونية بين المناطق الفاتحة والأخرى الغامقة في الصورة.

بشكل مشابه للتابع brightness، يتم تمرير قيمة إلى تابع التباين constract (رقم أو نسبة مئوية) تحدد درجة التباين المراد تطبيقه. القيمة صفر 0 تؤدي إلى ظهور الصورة باللون الأسود تماماً، أما القيمة 100% فإنها تحافظ على الصورة بألوانها الطبيعية دون أي تغيير على درجة التباين. وهكذا فكلما زادت القيمة الممررة للتابع constract فستزداد درجة التباين. يمكن تمرير قيمة أكبر من 100% للحصول على تباين أكبر من الوضع الأصلي للصورة، وأي قيمة أصغر من 100% تؤدي إلى نقصان التباين عن الوضع الأصلي. مثال:

contrast(150%);
contrast(0);
contrast(0.7);
contrast(0.01);
contrast(200%);
contrast(10%);

النتيجة التالية تظهر عند تطبيق التابع constract مع تمرير القيمة 200%:

الدالة ()grayscale

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

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

#further-resources:target {
animation: highlight .8s ease-out;
}

@keyframes highlight {
0% { background-color: #FFFF66; }
100% { background-color: #FFFFFF; }
}

النتيجة التالية تظهر عند تطبيق التابع grayscale مع تمرير القيمة 100%:

الدالة ()hue-rotate

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

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

القيمة الممررة لهذا التابع والتي تعبر عن درجة الدوران يجب أن تكون بين 0 و 360 , حيث إن القيمة صفر 0 لن تؤدي أي عملية دوران وبالتالي الحفاظ على الألوان كما هي، وهكذا كلما زادت القيمة تزداد معها درجة الدوران، وأي قيمة مغايرة للمجال من 0 إلى 360 يتم اعتبارها على أنها صفر 0. مثال النتيجة التالية تظهر عند تطبيق التابع hue-rotate مع تمرير القيمة 120deg:

الدالة ()invert

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

invert(); /* equivalent to invert(100%) */
invert(0.24);
invert(60%);

النتيجة التالية تظهر عند تطبيق التابع invert مع تمرير القيمة 100%:

الدالة ()opacity

يعمل هذا التابع بشكل مشابه لعمل الخاصية opacity ضمن CSS، حيث يقوم هذا التابع بتغيير درجة شفافية الصورة وفقً للقيمة الممررة له، القيمة 100% تحافظ على الصورة في حالتها الأصلية دون أي تأثير شفافية، في حين أن القيمة صفر 0 تجعل الصورة شفافة تمامً وبالتالي غير مرئية، وهكذا تتراوح درجة الشفافية بحسب القيمة المحددة للتابع ضمن المجال من 0 إلى 100% مع إمكانية تمرير رقم عشري له عوضً عن النسبة المئوية. مثال النتيجة التالية تظهر عند تطبيق التابع opacity مع تمرير القيمة 0.5:

الدالة ()saturate

يقوم هذا التابع بتغيير درجة إشباع اللون، عندما تكون بعض الصور بألوان باهتة ونريد زيادة إشباع ألوانها لإضافة بعض الحيوية عليها فإننا نستخدم هذا التابع والذي يضيف رونقً خاصً يجعل الصور أكثر جمالية، درجة إشباع الألوان يتم تحديدها عبر القيمة الممررة لهذا التابع، القيمة 0 تجعل الألوان باهتة جداً (أضعف حالات الإشباع اللوني)، أما القيمة 100% في تحافظ على الصورة مثل وضعها الأصلي دون أي تعديل، وبالتالي لزيادة درجة الإشباع اللوني يجب تمرير قيمة أكبر من 100%. مثال النتيجة التالية تظهر عند تطبيق التابع saturate مع تمرير القيمة 250%:

الدالة ()sepia

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

الدالة ()drop-shadow

تقوم الخاصية box-shadow ضمن CSS بتطبيق ظل على شكل صندوق يحيط بالعنصر المحدد، حتى إن لم يكن هذا العنصر له شكل مستطيل (صندوق) فإن الظل المطبق سيكون على شكل مستطيل، مما قد يؤدي إلى نتائج غير مرغوب بها.

في حالة استعمال الصور ذات الصيغة PNG والتي غالباً تحتوي على أجزاء شفافة وأخرى مرئية فمن المرغوب فيه تطبيق تأثير الظل على الأجزاء المرئية وليس على شكل صندوقي. وفي هذه الحالة نستخدم التابع ()drop-shadow كما هو موضح في الصورة التالية:

أما في حال تطبيق الخاصية box-shadow على نفس الصورة السابقة، عندها ستكون النتيجة كالتالي:

يتم تمرير قيم للتابع ()drop-shadow بشكل مماثل لطريقة القيم التي تأخذها الخاصية box-shadow، في حال لم تكن على معرفة كاملة بأسلوب كتابة القيم الممررة للخاصية السابقة يمكنك قراءة هذه المقالة. http://tympanus.net/codrops/css_reference/box-shadow

.png-img {
    filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
}

الدالة ()url

تسمح الدالة url باستخدام فلتر معرّف ضمن مستند SVG وتطبيقه على العنصر المطلوب، أي بالإمكان عدم التقيد بالفلاتر (التوابع) العشرة التي تحدثنا عنها ضمن الفقرات السابقة، إنما يمكن إنشاء فلاتر خاصة ضمن ملف SVG ومن ثم تمرير معرف هذا الفلتر إلى التابع url. مثال:

/* filter from an external SVG file */
filter: url(myFilters.xml#effect);
/* or filter defined in the main page */
url(#myFilter);

المثال التالي يوضح كيفية عمل فلتر الضباب ضمن ملف SVG:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>

إنشاء فلاتر SVG هو مجال واسع بحد ذاته، لذلك لن ندخل في تفاصيله ضمن هذه المقالة.

تجربة مثال مباشر

يمكن مشاهدة مثال مباشر عن جميع الفلاتر التي تم مناقشتها في هذه الدرس. مع ملاحظة أن الفلاتر المذكورة ماتزال غير مدعومة في بعض متصفحات الويب وقت كتابة هذه المقالة.

تطبيق عدة فلاتر

يمكن تطبيق أكثر من فلتر على الصورة، حيث يتم ذكر الفلاتر المطلوية ومن ثم تطبيقها بحسب الترتيب التي ذُكرت به. مثال:

filter: sepia(1) brightness(150%) contrast(0.5);

تحريك الفلاتر

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

ترتيب العمليات الرسومية

يوجد العديد من العمليات والتوابع الرسومية الأخرى التي يمكن تطبيقها على الصورة، مثل قص جزء من الصورة، قلبها، أو تركيب قناع ما عليها، وغير ذلك ...

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

التفكير خارج الصندوق (الإلهام)

قام Dudley Story منذ فترة وجيزة بتطبيق مثال باستخدام نماذج المزج وتوابع القص لإنشاء صورة تعطي تأثير الرؤية بواسطة نظارات الرؤية ثلاثية الأبعاد.

الخاتمة

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

ترجمة -وبشيءٍ من التصرّف- للمقال An Introduction To Graphical Effects in CSS لصاحبته: سارة سويدان.

في بعض الأحيان وعوضاً عن الانتقال إلى صفحة جديدة، فإن الروابط (الوسم <a>) تنقلنا إلى فقرة أو عنصر آخر موجود ضمن نفس الصفحة، هذا الأسلوب هو المستخدم للتنقل ضمن مواقع الانترنت ذات الصفحة الواحدة.

يستخدم المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما. حيث يتم تطبيق هذه التنسيقات على الفقرة الهدف عند النقر على ذلك الرابط.

على سبيل المثال، لو كان لدينا رابط يشير إلى فقرة لديها المعرّف "further-reading"، أي بشكل مشابه للشِفرة التالية:
 

<a href="#further-reading" title="Further reading resources" />
<!– ... –>
<section id="further-resources" >
  <!— ... —>
</section>

في هذه الحالة يمكن استخدام المحدد target: لإضاءة الفقرة المحددة عند الضغط على الرابط المعني بها. عموماً فإن تقنية الإضاءة نقصد بها تطبيق خلفية صفراء ومن ثم تلاشي اللون الأصفر تدريجيً إلى لون الخلفية الأساسي.
 

#further-resources:target {
  animation: highlight .8s ease-out;
}

@keyframes highlight {
  0% { background-color: #FFFF66; }
  100% { background-color: #FFFFFF; }
}

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

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

مؤخراً قمت باستخدام هذه التقنية على موقعي الخاص، ضمن الترويسة الرئيسية في الصفحة، حيث أضفت رابط لعملية البحث وعند الضغط عليه يتم إظهار عنصر <div> كطبقة تغطي الصفحة بأكملها (تتراكب فوق محتوياتها) ويظهر ضمنها مربع البحث.

<a href="#search">Search</a>
<!– ... –>
<div id="search">
  <a href="#" class="overlay-close">Close</a>
  <h4>Search articles archive.</h4>
  <!– ... –>
</div>

عنصر التراكب <div> (طبقة البحث) بالبداية يكون غير ظاهر وذلك عبر إعطاء خاصية الشفافية opacity القيمة صفر 0، ولكي يبقى هذا العنصر ثابتاً في مكانه نقوم بإعطاء الخاصية position القيمة fixed. كما يجب أن لاتمنع هذه الطبقة المتراكبة عمل باقي المحتويات التي تغطيها ولذلك نعطي الخاصية pointer-events القيمة none.

#search-overlay {
  position: fixed;
  top: 1em;
  bottom: 1em;
  right: 1em;
  left: 1em;
  /* ... */
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
}

عند الضغط على أيقونة البحث, يتم تطبيق الخصائص الموجودة ضمن المحدد target: للعنصر المشار إليه، وفي هذا المثال يتم إضهار طبقة البحث التي تغطي الصفحة وفيها مربع البحث، حيث تكون عملية الظهور بشكل انسيابي تدريجي عبر تطبيق الخاصية transition على خاصية الشفافية opacity.

#search-overlay:target {
  opacity: 1;
  pointer-events: auto;
}

إلى هنا نكون قد انتهينا من نصف المهمة وهي إظهار طبقة البحث، وبقى لدينا تنفيذ آلية إخفاء هذه الطبقة عندما يرغب المستخدم بذلك. وبالتالي يجب أن تحتوي طبقة البحث على رابط إغلاق يعيد إظهار الصفحة كسابق عهدها، يمكن تطبيق هذا عبر إعطاء معرف ID إلى الوسم body أو html، ومن ثم نحدد هذا المعرف كقيمة للخاصية href التابعة لرابط إغلاق طبقة البحث. يمكن بأسلوب آخر إعطاء القيمة # للخاصية href السابقة ولكن هذا الأسلوب يؤدي إلى إضافة الرمز # على عنوان الصفحة URL.

حالما يتم الضغط على رابط الإغلاق، نقوم بتغيير خصائص طبقة البحث لإخفائها عبر إعطاء الخاصية opacity القيمة صفر 0. وهنا أيضاً يمكن تطبيق الخاصية transition على الخاصية opacity وذلك لجعل طبقة البحث تختفي بشكل تدريجي.

#search-overlay:target {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .3s ease-in-out;
}

يمكن تجربة هذا المثال، عموماً يمكن الاستفادة من تأثير الخاصية animation على باقي الخصائص لتطبيقها بشكل متدرج، حيث نستطيع استخدامها لتغير حجم العنصر أثناء انبثاقه للحصول على تأثير الصندوق المنبثق، حيث يظهر في منتصف الصفحة بشكل واضح ومميز مع جعل باقي الصفحة تبدو بألوان باهتة. وبالتالي يمكن تطوير هذا الأمر أكثر للحصول على معرض صور كامل بأسلوب الصندوق المنبثق كما يظهر في هذا المثال (المثال من عمل Manoela Ilic).

مقالة أخرى تتحدث عن كيفية عمل معرض صور بأسلوب الصندوق المنبثق وباستخدام المحدد target: من تأليف Christian Heilmann، كما يوجد معارض صور أخرى مطبقة أيضا بواسطة CSS عبر المحدد target:.

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

ترجمة -وبتصرّف- للمقال: Using The CSS :target Selector To Create JavaScript-less UI Effects لصاحبته: سارة سويدان.

تطبيق صور الخلفيّة (background images) على العناصر هو أحد أكثر الميزات المُستخدمة في CSS، ولذلك يوجد العديد من الخصائص الّتي تَسمح بالتّحكم بخلفيّة العنصر وعلى أكثر من ناحية.

يُمكن أنّ يَملك العنصر أكثر من صورة خلفيّة واحدة، فيُمكن إسناد قيم الصّور كقائمة يُفصل فيما بينها الفاصلة، وذلك للخاصيّة background-image، أما الخاصّيّة background-position فتُستخدم لتحديد مَوضع صورة الخلفيّة، وتَستحق هذه الأخيرة بعض التفحّص، وذلك بسبب أنّ قيمها المُحتملة تُنتج نتائج مُختلفة غير متوقّعة للمطوّر الّذي لم يتعمّق في تفاصيل CSS.

سيتمّ استخدام صورة خلفيّة وحيدة طوال هذا المقال، بغرض تبسيط الشرح والشيفرة البرمجيّة، ولكن ما يَنطبق على صورة واحدة، يَنطبق على صور مُتعدّدة.

تتمَوضع صورة خلفيّة داخل ما يُسمّى مجال تَمَوْضُع الخلفيّة (background positioning area) لعنصر، وهي كما يَدل اسمها، تُحدّد المنطقة الداخليّة الّتي ستتموضع بها الخلفيّة، وهي تملك نظام إحداثي يُستخدم لمُعالجة التَمَوْضُع.

سيتمّ أوّلًا التطرّق إلى مفهوم نموذج الصندوق (CSS box model)، ورؤية تأثيره على تَمَوْضُع صور الخلفيّة داخل العنصر، وذلك قبل الدخول في مفهوم التَمَوْضُع.

مجالات نموذج الصندوق (CSS Box Model Areas)

تَملك العناصر في CSS ثلاثة مجالات، يُطلق عليها صناديق، مُعرّفة على العنصر:

• صندوق الحدود (border box)
• صندوق الحشو/الحشوة (padding box)
• صندوق المُحتوى (content box)

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

أما صندوق الحشوة فهو المنطقة من العنصر، والّتي لا تتضمّن الحدود (borders)، وتتضمّن محتويات العنصر والحشوة المُحيطة، وتحدّد قيمة هذه الحشوة باستخدام الخاصيّة padding.

صندوق المُحتوى هي المنطقة التي أنشأها محتوى العنصر، ولا تتضمّن الحشوة ولا الحدود.

يوجد أيضًا مجال رابع يُدعى صندوق الهامش (margin box)، والّذي يتضمّن العنصر والهامش الخارجي، وتحدّد قيمة هذا الهامش بالخاصيّة margin.

إضافة خلفيّة إلى عنصر، سواء كانت صورة أو لون مُصمت (solid color)، سيجعل من هذا الخلفيّة تُرسم ضمن مجال حشوة العنصر افتراضيًا، ويُمكن تعديل هذا السلوك عبر استخدام خاصيّة background-origin.

ولكي يتمّ تحديد أين يجب بالضَّبط على صورة الخلفيّة أنّ تتموضع داخل مجال التَمَوْضُع (positioning area)، فإن المجال يحتاج نظامًا إحداثيًّا ليُستخدم في تفسير وترجمة قيم التَمَوْضُع.

نظام إحداثيَّات العنصر (Element’s Coordinate System)

يَملك كل عنصر بشكلٍ افتراضيٍّ نظامًا إحداثيًا مُنشئ نسبةً إلى ارتفاعه (height) وعرضه (width)، ويعود هذا الأمر إلى طبيعة نموذج صندوق العناصر في CSS، ويُستخدم هذا النّظام في توضيع العنصر نسبةً إلى باقي العناصر، وتوضيع أبناء العنصر نسبةً إلى العنصر نفسه.

تَملك عناصر HTML نظام إحداثيَّات في CSS، ولكن لا تَملك عناصر SVG نظامًا مُماثلًا، بسبب أنها لا تُحكم بمفهوم نموذج الصندوق.

يُعرّف مبدأ نظام الإحداثيَّات في CSS في أعلى يسار زاوية العنصر.

يُحكم مجال تَمَوْضُع الخلفيّة (background positioning area) أيضًا من قبل نظام إحداثيَّات مُنشئ في هذا المجال، ويُستخدم في توضيع صورة الخلفية في هذا المجال، ويكون مبدأ هذا النّظام أعلى يسار زاوية مجال التَمَوْضُع.

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

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

على سبيل المثال، وعلى فرض وجود صورة خلفيّة مطبّقة على عنصر وغير مكرّرة (ستُعرض الصّورة مرّة واحدة) فسيكون تَمَوْضُع صورة الخلفيّة داخل نظام الإحداثيَّات عند مبدأ نظام إحداثيَّات صندوق الحشوة، أي أنّ أعلى يسار زاوية الصّورة ستتموضع عند أعلى يسار زاوية صندوق الحشوة:

.element {
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  padding: 2em;
  border: 20px solid rgba(0,0,0,0.5);
  background-color: beige;
  background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg);
  background-repeat: no-repeat;
}

p {
  text-align: center;
  padding: .5em;
}

.element p {
  text-align: left;
  background-color: rgba(255, 255, 255, .4);
  line-height: 1.5;
  margin: 0;
}

يُمكن استخدام خاصيّة background-position، وذلك بهدف تغيير مَوضع الصّورة داخل نظام الإحداثيَّات.

يُمكن أيضًا تغيير مجال تَمَوْضُع الخلفيّة لتغيير مبدأ الإحداثيات المُستخدم في توضيع الصّورة داخل مجال خلفيّة العنصر.

تغيير مجال تَمَوْضُع الخلفيّة ونظام الإحداثيّات باستخدام background-origin

تُستخدم الخاصّيّة background-origin لتغيير مبدأ نظام الإحداثيَّات المُستخدم لتوضيع صورة الخلفيّة في مجال تَمَوْضُع الخلفيّة.

تَقبل الخاصّيّة background-origin واحدة من هذه القيم:

• padding-box وهي القيمة الافتراضيّة.
• content-box
• border-box

سيتغيّر مبدأ نظام الخلفيّة –وهو مبدأ نظام الإحداثيّات المُنشئ في هذا المجال-الموافق بناءً على مجال تَمَوْضُع الخلفيّة المُختار، وكذلك الأمر مع التَمَوْضُع الأوّلي والافتراضي لصورة الخلفيّة.

تُظهر الأمثلة الحيّة التّالية الاختلاف عمليًا.

.element {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: 2em;
  border: 20px solid rgba(0,0,0,0.3);
  background-color: beige;
  background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg);
  background-repeat: no-repeat;
}

.element-2 {
  background-origin: content-box;
}

.element-3 {
  background-origin: border-box;
}

p {
  text-align: center;
  padding: .5em;
}

.element p {
  text-align: left;
  background-color: rgba(255, 255, 255, .4);
  line-height: 1.5;
  margin: 0;
}

سيتغيّر نظام الإحداثيَّات ليُغطّي كل مجال تَمَوْضُع خلفيّة مُعيّن باستخدام الخاصّيّة background-origin.

يُمكن بعد ذلك تحديد مَوضع صورة الخلفيّة في هذا النّظام الإحداثي باستخدام الخاصّيّة background-position.

لن يتمّ تغيير مجال تَمَوْضُع خلفيّة العنصر بعد الآن، وذلك بغرض تبسيط الأمثلة والشرح، ولذلك جميع الأمثلة هي على العنصر الّذي مجال الحشوة الخاصّة به هو المجال الّتي ستتموضع على أساسها الخلفيّة.

توضيع صور الخلفيّة باستخدام خاصيّة background-position

توضّح سابقًا كيف أنّ صورة الخلفيّة تتموضّع افتراضيًّا (بدون إعداد مُسبق) عند أعلى يسار زاوية مجال التَمَوْضُع، يَكمن السبب في ذلك إلى حقيقة أنّ قيمة التَمَوْضُع الافتراضيّة للخاصيّة background-position هي 0% 0%.

يُقاس التَمَوْضُع وبشكل افتراضي بالقيمة المئويّة، حيثُ من المُمكن الإسناد إلى background-position إما قيمة مئويّة (percentage value) أو قيمة مُطلقة (absolute value)، والّتي تُحدّد إزاحة (offset) الصّورة من أحد الحوافّ (edges) الأربعة (top, right, bottom, left).

يوجد خمس كلمات مفتاحيّة للإزاحة، بالإضافة إلى القيم المئويّة والمُطلقة، وهي:

• top
• right
• bottom
• left
• center

يُوصف (يُعيّن) التَمَوْضُع عبر:

• تحديد قيمة إزاحة واحدة، سواءً كانت كلمة مفتاحيّة أو نسبة قيمة مئويّة أو طوليّة.
• تحديد قيمتي إزاحة، وذلك عبر الجمع بين قيمتين من القيم الثّلاث المُحتملة.

• تحديد أربع قيم إزاحة، كلمة مفتاحيّة وقيمة عدديّة نسبيّة.

  background-position: top left;
  background-position: 50px 30%;
  background-position: top 25%;
  background-position: right 10px bottom 20px;
  background-position: center center
  background-position: 10px 20px;
  background-position: 5em 2em;
  background-position: 75% 50%;
  

إن تحديد قيمة وحيدة فقط، سيجعل من القيمة الثّانية هي center، وعند تحديد قيمتين، سيجعل الأولى تحدّد الإزاحة من الحافّة اليُسرى (التَمَوْضُع الأفقي)، والثّانية هي الإزاحة إلى الأسفل من الحافّة العلويّة (التَمَوْضُع العمودي).

background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */
background-position: top; /* equivalent to `top center` */
background-position: 50px; /* equivalent to `50px center` */

يُمكن الخلط والمزج، أي الجمع بين قيم الأطوال مع القيم المئويّة ومع أو الكلمات المفتاحيّة، الجدير بالذكر هنا، أنّه يُمكن إسناد زوج من الكلمات المفتاحيّة بدون النظر إلى الترتيب، ولكن لا يُمكن الجمع بين كلمة مفتاحيّة وقيمة طوليّة أو قيمة مئويّة، وعليه فإن القيمة center left هي قيمة سليمة وصحيحة، بينما القيمة 50% left ليست قيمة سليمة، بل من المُفترض أنّ تكون left 50%، فعندما يتمّ الجمع واستخدام كلمة مفتاحيّة وطول أو قيمة مئويّة، فإن القيمة الأولى دائمًا تعبّر عن الإزاحة الأفقيّة والقيمة الثانية تعبّر عن الإزاحة العموديّة.

إن الجدير بالذكر هنا، أن الكلمات المفتاحيّة هي اختزال أو اختصارات للقيم المئويّة:

• top مساوية للقيمة المئويّة 0% من الحافّة العلويّة.
• bottom مساوية للقيمة المئويّة 100% إزاحة من الحافّة العلويّة.
• left مساوية للقيمة المئويّة 0% إزاحة من الحافّة اليساريّة.
• right مساوية للقيمة المئويّة 100% إزاحة من الحافّة اليسارية.
• center مساوية للقيمة المئويّة 50% إزاحة من في أي اتجاه تُطبّق عليه.

إن آلية عمل كل قيمة والتفريق بينها لأمرٌ هامٌ، خاصّة مع وجود اختلاف جوهري في تعامل المُتصفّحات مع القيم المئويّة والقيم المُطلقة، وذلك في توضيع صور الخلفيّة.

آليّة عمل قيم التَمَوْضُع ذات القيم المُطلقة

إن تعيين قيمة تَمَوْضُع باستخدام قيم مُطلقة، سيزيح أعلى يسار زاوية صورة الخلفيّة بالقيمة المُحدّدة، بمعنى آخر، ستُنقل الصّورة بحيثُ تتموضع زاويتها اليساريّة العلويّة عند الإزاحة المُحدّدة في قيمة background-position.

يُقال إن الصّورة بألف كلمة، حيثُ يتوضّح في الصّورة التّالية مثالان للخاصيّة background-position وبالقيمة المُطلقة، وكيف يُفسر المُتصفّح هاتين القيمتين ليوضع صورة الخلفيّة، علمًا أنّ أبعاد العنصر في المثالين هي: 100px X 80px.

يُمكن أنّ يكون التَمَوْضُع المُطلق مُمثّلًا بقيمة سالبة، وفي هذه الحالة ستنزاح الصّورة في الاتجاه المُعاكس من الحافّة.

مثالٌ حيّ: http://codepen.io/SaraSoueidan/pen/bfc8b59ddbc9beb63eee9f26e2754ade

آلية عمل قيم التَمَوْضُع ذات القيم المئويّة

تَنقل قيم الإزاحة الطوليّة المُطلقة زاوية العنصر اليساريّة العليا بالمسافة المُحدّدة، ولكن مع استخدام القيم المئويّة فالأمر مُختلف، فالقيمة X% ستُرصِف (align) النقطة X% من الصّورة مع النقطة X% من حاوية الصّورة (the container)

فعلى سبيل المثال، ستُرصِف القيمة المئويّة 0% 0% النقطة ذات الإحداثيّات 0% 0% من الصّورة مع النقطة 0% 0% من نظام الإحداثيّات مجال تَمَوْضُع الخلفيّة، وستُرصِف قيمة التَمَوْضُع 50% 75% النقطة ذات الإحداثيّات 50% 75% من الصّورة (50% إلى اليمين و 75% إلى الأسفل) مع النقطة ذات الإحداثيّات 50% 75% في مجال تَمَوْضُع الخلفيّة.

يُطلب بعض التركيز لفهم الكلام النظريّ السابق، ولكن دائمًا ما لا يَتوضّح بالكلمات حتمًا سيتوضّح بالمرئيّات، كل ما يَهم من الأمر هو التركيز على أنّ الانزياح 50% هو نسبة إلى النقطة 50% من الصّورة وليس الزاوية العلويّة اليساريّة، وهنا مَرْبِطُ الفَرس والذي يُوضّح الاختلاف بين القيم المئويّة وقيم الأطوال المُطلقة.

يُمكن تحديد قيم إزاحة مئويّة سالبة، كما هو الأمر مع القيم المُطلقة، الأمر الّذي من شأنه أنّ يَنقل صورة الخلفيّة بالقيمة المُحدّدة ولكن بالاتجاه المُعاكس لمحاور الإحداثيّات:

تمّت عمليّة التَمَوْضُع في الأمثلة السابقة نسبةً إلى الحافتين العلويّة واليساريّة، ولكن في الحقيقة من المُمكن توضيع الصّور نسبةً إلى أيًا من الحوافّ الأربعة.

الإزاحة نسبةً إلى الحوافّ الأربع

تمّ تحديد قيم إزاحة في الأمثلة السابقة، واستخدامها في إزاحة الصّورة نسبةً إلى الحافّة العلويّة والحافّة اليساريّة، وهو السلوك الافتراضيّ لقيمة أو قيمتي تَمَوْضُع.

إن الجمع بين الكلمات المفتاحيّة مع القيمة العدديّة باستخدام الصياغة (syntax) ذات الأربع قيم، يُمكّن المُطوّر من إزاحة صورة الخلفيّة من الحافّة اليمينيّة والحافّة السُفلى لمجال التَمَوْضُع.

يتمّ استخدام صياغة هذا الأسلوب عبر تحديد اسم الحافّة متبوعًا بالقيمة المطلوبة، ويمكن أنّ تكون القيم على الشكلين: قيم مُطلقة أو قيم مئويّة، وذلك كما في الأمثلة التّالية:

background-position: top 1em right 3em; 
background-position: right 1em bottom 1em;
background-position: left 20px bottom 50px;

يجب الانتباه إلى أنّ إغفال القيمة الرابعة يجعلها تُفرض على أنّها صفر.

background-position: bottom 10px right 20px

يوضّح المثال السابق كيف أنّ الإعداد أصبح أسهل بكثير عند الرغبة في إزاحة صورة نسبةً إلى الحافّة اليمينيّة والسُفلى بدلًا من حساب قيم الإزاحة نسبةً إلى الحافتين العلويّة واليُسرى.

المزيد مع خواصّ الخلفيّة في CSS

يُمكن استعمال أكثر من صورة على عنصر، ولكل صورة خلفيّة يُمكن تعيين قيمة تَمَوْضُع، على أنّ يتمّ الفصل فيما بينها باستخدام الفاصلة:

.element {
    background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
    background-position: top left, 75% 80%;
}

يوجد عامًّا تسع خاصِّيَّات تتحكم بتوزّع العناصر (layout)، والتَمَوْضُع، وقياس ورسم صور الخلفيّة، بما في ذلك خاصيّة background، وتقوم كل خاصيّة بعمل شيء واحد مُحدّد مع إمكانيّة الجمع والمزج فيما بينها لإعطاء المُطوّر تحكم كامل في كيفيّة تطبيق صور الخلفيّة على عناصر HTML.

ظَهر مؤخرًا خاصيّة إضافيّة لخواصّ الخلفيّة الرئيسيّة، والّتي تسمح في تطبيق تأثيرات المزج (blending) على صور الخلفيّة وبشكل مُشابه لتأثيرات المزج المتوفّرة في مُحرّرات الصّور مثل فوتوشوب، من هذه الخواصّ الخاصّيّة background-blend-mode، ويُمكن الاستزادة حول الموضع بقراءة المزج في CSS.

الخاتمة

يُنصح بالقراءة والاستزادة حول هذا الموضوع لأهميته، حيثُ أنّ الفهم الصحيح لهذه الخواصّ من شأنه أنّ يُقدّم للمُطوّر مرونةً في الاستخدام وخياراتٍ أوسع في التصميم.

ترجمة –وبتصرّف- للمقال A Primer To Background Positioning In CSS لصاحبته سارة سويدان.

بعد التعرّف على كيفية تشكيل المحتوى باستخدام HTML. سيكون لِزامًا عليك -كمطور ويب- معرفة ماهية CSS (أوراق الأنماط المتتالية أو Cascading Style Sheets بالانجليزية) وكيفية إدراج التصميم مع صفحات HTML. يُعتبر CSS أحد التقنيات التي يجب التركيز عليها، إذ هي من سيحدد شكل موقع الويب وما يظهر للعيان.

يُعتبر هذا الدرس مدخلا لأساسيات لغة التوصيف هذه، وستكون هيكلته كالتالي:

• ماهي لغة CSS؟
• تعريف قوانين التصميم
  • التعليقات مع CSS
  • تجميع المنتقى
• استخدام منتقى CSS متقدم
  • المنتقى العام
  • المنتقى الفرعي
  • المنتقى الابن
  • المنتقى التسلسلي
  • المنتقى الشقيق
  • المحدّد Pseudo-classes
  • العناصر Pseudo-elements
• اختزال CSS
  • مقارنة القيم الفردية والمختزلة
  • اختزال القيم بخاصية واحدة
  • أيهما يجب اختياره الخاصية المفردة أم القيمة المختزلة؟
  • مراجع الاختزال
• إدراج CSS مع HTML
  • الإدراج الداخلي
  • الإدراج المضمر
  • الإدراج خارجي
  • استيراد ملف التصميم
• خاتمة
• أسئلة وتمارين

ماهي لغة CSS؟

تحدّد لغة HTML هيكلة الصفحة وتُخبر المتصفحات بوظيفة كل عنصر في الصفحة (مثل رابط لصفحة أخرى أو عنوانا رئيسياً) في حين تقدّم لغة CSS تعليمات للمتصفح حول كيفية عرض العناصر في الصفحة من حيث التصميم والمسافة والموضع. ولو افترضنا أن HTML تقوم على بناء هيكل المنزل فإن CSS تقوم بطلاء المنزل و تصميم الديكور الخاص به.

يكون ذلك عن طريق مجموعة من التعليمات التي سنتعرف على كيفية سردها لاحقا. تحدد تلك التعليمات (أو القواعد) ما يجب تنسيقه وتصميمه على عناصر HTML. كما تحتوي تلك القواعد على خاصيات معينة (مثل الألوان وحجم الخطوط ونوع الخط) لعناصر HTML والتي تقوم بالتعديل عليها وتحديد القيم التي ستغير من شكل تلك العناصر. وباستخدام تقنية CSS يمكننا إيجاد على سبيل المثال جميع وسوم <h2> ثم تلوينها جميعاً باللون الأخضر أو إيجاد جميع الأسماء الملحقة author-name الموجودة في وسوم الفقرات <p> وتغيير لون الخلفية إلى اللون الأحمر وتغيير حجم النص إلى ضعفين الحجم العادي وإضافة مسافة بين النصوص بحجم 10px.

لا تعتبر لغة CSS لغة برمجية فهي ليست مثل JavaScript وليست لغة هيكلة مثل لغة HTML، وبصراحة لا يمكن مقارنة هذه اللغة بأي تقنية أخرى. قبل عمليات تطوير الويب كانت بعض التقنيات تعرّف واجهة الموقع وتدمج بين البنية والشكل التقديمي. وهذا ليس بالشيء الذكي الذي يجب فعله في البيئة التي تتغير باستمرار وخاصة صفحات الويب ولهذا السبب تم اختراع لغة CSS.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

تعريف قوانين التصميم

دعونا نلقي نظرة على الكود في المثال التالي ثم سنقوم بشرحه تالياً:

selector {
    property1: value;
    property2: value;
    property3: value;
}

شرح المثال السابق كالتالي:

• يحدّد المنتقى (selector) عنصر HTML والذي سيتم تطبيق القاعدة عليه. يتم تحديد العنصر من خلال اختيار اسم العنصر مثل body أو h1 أو من خلال اسم محدد class ويتم ضع الاسم كلاحقة ضمن العنصر لاستدعاء التصميم.
• تحتوي الأقواس المنحنية بداخلها زوجاً من الخاصية والقيمة وتفصل بين كل خاصية وقيمة فاصلة منقوطة (;). كما يتم الفصل بين الخاصية والقيمة بنقطتين (:).
• تحدّد الخاصية ما يجب فعله للعنصر أو العناصر الذي قمت باختيارهم. وذلك يحتوي على تنوع كبير حيث تؤثر على لون العنصر ولون الخلفية والموضع والهوامش الخارجية والهوامش الداخلية ونوع الخط وغيرها الكثير.
• تحدّد القيمة الصفة النهائية التي تود تطبيقها على العنصر الذي اخترته. وتعتمد القيم على نوع الخاصية التي اخترها فمثلاً الخاصية color تسمح باختيار الألوان ضمن الست عشرية مثل #336699 أو من خلال القيمة العامة للون RGB مثل (rgb(12,134,22 أو اسم اللون مثل red أو green أو blue. بينما الخاصيات التي تؤثر على الموضع والهوامش والطول والعرض يمكن قياسها من خلال pixels ،ems أو percentages (النسبة المئوية) أو centimeters وغيرها.

لنلقي نظرة على هذا المثال المحدّد:

p {
    margin: 5px;
    font-family: Arial;
    color: blue;
}

شرحاً للمثال السابق فإن القاعدة هي اختيار العنصر <p> أي جميع الوسوم <p> الموجودة في صفحة أو صفحات الويب HTML وسيتم تطبيق قاعدة CSS عليها. فقد قمنا بالتعديل على العنصر <p> في حيث الهوامش الخارجية هي 5px ونوع الخط هو Arial ولون النص هو blue.

سنشرح لاحقاً بالتفصل كل خاصية والقيمة المناسبة لها لكن الآن الهدف هو تغطية أساسيات CSS.

التعليقات في CSS

أحد الأمور الهامة الذي يجب أن تعرفها هي وضع تعليقات ضمن تصميم CSS. حيث يمكنك إدراج تعليق من خلال كتابة النص بين هذه الاشارات /* */ حيث يمكنك تمديد التعليقات إلى أسطر عديدة كما أن المتصفح سيتجاهل هذه الأسطر.

/* في هذه الكود أساسيات المنتقى */
selector {
    property1: value;
    property2: value;
    property3: value;
}

يمكنك أيضاً إدراج التعليقات بين أو ضمن مجموعة خاصيات. فمثلاً في الكود التالي قمنا بوضع الخاصية الثانية والثالثة ضمن تعليق وبما أنهم ضمن التعليق سيتجاهل المتصفح تلك التصاميم ولن يتم تطبيقها. تعتبر هذه الطريقة مفيدة جداً خاصة إذا كنت تفحص أي جزء تريد أن يتم تطبيقه. والجزء الذي لا تريده ضعه ضمن تعليق أفضل من حذفهم ثم احفظ شِفرة CSS وأعد تحميل صفحة HTML لمُعاينة النتيجة.

selector {
    property1: value;
/*
    property2: value;
    property3: value;
*/
}

تحتوي لغة CSS على نظام التعليق المتعدد الأسطر وهذا بخلاف بقية اللغات الأخرى أي أنها لا تحتوي على تعليق بسطر واحد. في حال أردت إدراج تعليق بسطر واحد فقط ضع بداية ونهاية التعليقات /* و */.

تجميع المنتقى

يمكنك أيضاً جمع أكثر من منتقى مختلف. نريد تعيين التصميم إلى <h1> و<p> فيمكنك كتابة التصميم كما في المثال التالي:

h1 { color:red; }
p { color:red; }

تعتبر استخدام هذه الطريقة غير مثالية عند تكرار المعلومات نفسها لكن يمكنك تقصيرها من خلال جمع أكثر من منتقى وتطبيق نفس التصميم على الجميع وذلك من خلال فصل كل منتقى عن الآخر بفاصلة. سيتم تطبيق التصميم في المثال التالي ضمن القوسين على جميع المنتقى الموجود:

h1, p { color:red; }

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

• منتقى العنصر p ويطابق على جميع العناصر الموجودة بالصفحة كما شرحنا سابقاً.
• الصنف example. وهو يدل على اسم صنف (class)، ويتم تطبيق جميع القيم في التصميم للعنصر الذي يحمل هذا الصنف. فمثلاً في التصميم السابق للعنصر يمكن اضافة يمكن إضافة الصنف <"p class="example> أو <"li class="example> أو <"div class="example> أو أي عنصر يحمل الصنف example.
• المعرّف example# وهو يدل على اسم معرّف (ID) ويتم تطبيق جميع القيم في التصميم للعنصر الذي يحمل هذا الاسم. فمثلاً في التصميم السابق للعنصر يمكن إضافة الاسم المعرّف 
  <"p id="example> أو <"li id="example> أو <"div id="example> أو أي عنصر يحمل الاسم example. تذكّر بأن المعرّف ID لا يفحص أسماء العناصر كما يمكنك اختيار اسماً واحداً لكل عنصر في صفحات HTML.

يمكنك مشاهدة ما قمنا بعمله في الأمثلة التالية. من الملاحظ أنه يمكنك مشاهدة الأمثلة التالية على المتصفح وأيضاً تصميم التحذير الملوّن باللون الأحمر على كلاً من القائمة وأيضاً الفقرة. (إن لم تظهر علامات القامة فهذا لأنك قمت بتلوين النص باللون الأبيض وبخلفيه بيضاء).

• example-selectors.html
• selectors.css

يمكنك أيضاً دمج أكثر من منتقى لتحديد قواعد أخرى أكثر تخصيصاً:

• يطابق p.warning جميع الفقرات التي تحتوي على الصنف warning.
• يطابق div#example جميع العناصر ضمن اللاحقة id والمعرّفة بكلمة example ولكن فقط مع العنصر <div>.
• يطابق p.info جميع الفقرات التي تحتوي على المعرّف info وأيضاً يطابق li.highlight القوائم المعرفّة بالكلمة highlight.

في المثال استخدمت تلك الطرق لتحديد الاختلاف بين التصاميم المختلفة للمعّرف warning:

• example-specificselectors.html
• specificselectors.css

استخدام منتقى CSS متقدم

في القسم السابق تحدثنا عن أساسيات CSS واستخدام أيضاً المنتقى والعناصر والمعرّف class وid. وبتلك الأنواع من المنتقى يمكنك إنجاز الكثير ولكن هذا ليس كل شيء. حيث يوجد أنواع أخرى من المنتقى والتي تسمح لك باختيار عنصر وتطبيق تصميم عليه بأكثر تخصيص:

• المنتقى العام: يمكن استخدام لاختيار جميع العناصر في الصفحة.
• المنتقى الفرعي: حيث يمكنك اختيار أسماء معينة وإضافتها على العنصر كلاحقة وتسمح لك بتطبيق تصميم على عنصر محدد الذي يحمل ذلك الاسم.
• المنتقى الابن: يمكنك استخدام هذا النوع في حال أردت اختيار عنصر محدّد والتي تعتبر كأبناء للعناصر الأصلية.
• المنتقى التسلسلي: يمكنك استخدام هذا النوع في حال اخترت عنصر محدّد والتي تنحدر بتسلسل ضمن تلك العناصر (ليست متسلسلة بشكل مباشر ولكنها متسلسلة كشجرة العائلة أيضاً يمكن استخدام هذا النوع)
• المنتقى الشقيق: يمكن استخدام هذا النوع في حال أردت اختيار عنصر محدّد والذي يتبع عنصر محدد آخر.
• المحدّد Pseudo-classes: تسمح بتصميم العناصر التي لا تعتمد على العناصر نفسها لكن على العوامل المقتصرة على فئة معينة مثل مجموعة روابط تشعبية (أي إذا كانت تلك الروابط تم تمرير مؤشر الماوس عليها أو تم زيارتها فعلاً).
• العناصر Pseudo-elements: تسمح لك بالتصميم على جزء من العناصر وليس جميع العناصر (أي الحرف الأول ضمن العنصر). كما تسمح أيضاً بإدراج محتوى قبل أو بعد عناصر محددة.

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

المنتقى العام

ببساطة يحدد المنتقى العام كل عنصر في الصفحة ويُطبق التصميم عليه. على سبيل المثال: تقول القاعدة التالية بأنه يجب تقديم 1 بكسل بلون أسود كإطار لجميع العناصر في الصفحة.

* {
    border: 1px solid #000000;
}

المنتقى الفرعي

يسمح المنتقى الفرعي باختيار العناصر التي تعتمد على لواحقها. على سبيل المثال: يمكنك اختيار جميع وسوم <img> والتي تحتوي اللاحقة alt كما في المثال:

img[alt] {
    border: 1px solid #000000;
}

لاحظ الأقواس المربعة.

يمكنك الاختيار بأن تضع حدودًا سوداء حول أي صورة والتي تحتوي على اللاحقة alt باستخدام تلك الطريقة وأيضاً التعديل على الصور الأخرى ضمن الحدود الحمراء اللامعة وهي طريقة مفيدة في الاختبار.

لكن أيضاً يمكننا اختيار قيمة اللاحقة لتطبيق عليها تصميم معين وهي طريقة مفيدة وفعالّة جداً. في المثال التالي سيتم تطبيق تصميم لجميع الصور والتي تحتوي اللاحقة src مع القيمة alert.gif كالتالي:

img[src='alert.gif'] {
    border: 1px solid #000000;
}

لا يمكنك الجزم بأن هذه الطريقة فعالّة بشكل كبير جداً إلا أنها مفيدة لعمليات تصحيح الأخطاء وأيضاً مهمة في القدرة على اختيار جزء معين من اللواحق مثل امتداد الملفات. أيضاً مع الإصدار الأخير تقدم CSS3 ثلاث طرق جديدة تتعامل مع أنواع اللواحق عوضاً عن التركيز على النصوص في قيم اللواحق، يمكنك قراءة مقالة المبرمج Christopher Schmitt حول المنتقى الفرعي في CSS3.

المنتقى الإبن

يمكنك اختيار لمنتقى الابن لاختيار فقط العناصر التي تكون أبناء لعناصر أخرى محددة. على سبيل المثال، سيتم تطبيق التصميم على النص الموجود ضمن عنصر <strong> وهو ابن للعنصر <h3> إلي اللون الأزرق. أي فقط لذلك العنصر وليس لأي عنصر <strong> آخر:

h3 > strong {
    color: blue;
}

المنتقى التسلسلي

يشبه المنتقى التسلسلي بشكل كبير المنتقى الابن باستثناء أن المنتقى الابن يختار فقط العنصر الذي يليه مباشرة. بينما يمكنك اختيار أي عنصر في المنتقى التسلسلي ليس فقط الذي يليه مباشرة بل أي عنصر موجود لاحقاً. يمكنك مشاهدة المثال التالي مع وسوم HTML لفهم تماماً ما نقصد به:

<div>
  <em>hello</em>
  <p>In this paragraph I will say <em>goodbye</em>.</p>
</div>

في المثال السابق يعتبر العنصر <div> الأب لجميع الوسوم الأخرى حيث أنه لديه إبنان وهما <em> وأيضاً <p>. والعنصر <p> لديه إبن واحد فقط وهو <em>.

يمكنك اختيار المنتقى الابن لاختيار العنصر <em> مباشرة داخل العنصر <div> مثل:

div > em {
    ...
}

يمكنك استخدام الطريقة التالية في حال أردت اختيار المنتقى التسلسلي كالتالي:

div em {
    ...
}

وفي هذه العملية سيتم تحديد كلاً من العنصرين <em>.

المنتقى الشقيق

يسمح لك هذا النوع من المنتقى باختيار عنصر محدد والذي يأتي مباشرة بعد عنصر محدد آخر وبنفس المستوى من تسلسل العناصر. فمثلاً اذا أردت اختيار جميع عناصر <p> والتي تأتي مباشرة بعد جميع عناصر <h2> فقط وليس <p> بمفرده فيمكنك استخدام هذا النوع كالتالي:

h2 + p {
    ...
}

المحدّد Pseudo-classes

تستخدم تقنية Pseudo-classes لتصميم حالات متنوعة من العناصر وليس لعناصر محددة فقط. اشهر طريقة في استخدام هذا النوع النوع هو تطبيق تصميم على الروابط التشعبية. تشرح القائمة التالية الأنواع المختلفة من Pseudo-classes كما تشرح حالة الروابط التي يتم تطبيق التصميم عليها.

• link: — التصميم الطبيعي والافتراضي لجميع الروابط في الصفحة.
• visited: — وهي الروابط التي تم فتحها وزيارتها في المتصفح التي تستخدمه حالياً.
• focus: — وهي الروابط (متضمنة حقول النماذج) التي تضغط عليها ولم تحرّر مؤشر الماوس منها.
• hover: — وهي الروابط التي تمرّر مؤشر الماوس عليها.
• active: — وهي الروابط التي تم النقر عليها.

يشرح كود CSS في المثال التالي ما قمنا بشرحه مسبقاً. في المثال التالي، تكون جميع ألوان الروابط بشكل افتراضي (وهذا يشمل جميع المتصفحات) ملوّنة بللون الأزرق. وعند تمرمر مؤشر الماوس عليها أو النقر بمؤشر الماوس وبدون تحرير الزر سيختفي الخط السفلي لنص الروابط. كما ستحول لون الرابط إلى اللون الرمادي عند زيارة الرابط. وأخيراً بعد مشاهدة الرابط سيصبح نص الرابط غامقاً.

a:link {
    color: blue;
}

a:visited {
    color: gray;
}

a:hover, a:focus {
    text-decoration: none;
}

a:active {
    font-weight: bold;
}

كن حذراً في حال عدم ترتيب تلك القواعد بالتسلسل كما في المثال السابق، فلن تحصل على نتيجة كما تتوقع. وذلك بسبب قواعد التخصيص التي تحددها ملفات التصميم.

يعتبر أيضاً focus: مفيد بسبب مرونة استخدامه مع النماذج. فمثلاً يمكنك التشديد على حقل الإدخال والذي تقوم بتعبئة البيانات فيه سيتغير لونه مباشرة كالتالي:

input:focus {
    border: 2px solid black;
    background color: lightgray;
}

سنشرح تالياً first-child: — حيث يقوم باختيار العنصر الابن مباشرة بعد عنصر الأب. سنقوم في المثال التالي باختيار أول عنصر من القائمة (سواء أكانت القائمة مرقّمة أو منقوطة) وجعله نصّاً غامقاً:

li:first-child {
    font-weight: bold;
}

وأخيراً وباختصار نذكر lang: pseudo-class والتي تقوم باختيار العناصر التي تحتوي على اللاحقة lang أي اللغة كما في المثال التالي:

<p lang="en-US">
    A paragraph of American text, gee whiz!
<p>

يُمكن استهداف الفقرة أعلاه بالمنتقى التالي:

p:lang(en-US) {
    ...
}

العناصر Pseudo-elements

تمتلك العناصر Pseudo elements هدفان أساسيان. أولاً: يمكنك اختيار هذا النوع لاختيار الحرف الأول أو السطر الأول من النص داخل العنصر المحدد. يمكنك استخدام القاعدة التالية في حال أردت إنشاء حرف كبير للحرف الأول من كل فقرة كالتالي:

p:first-letter {
    font-weight: bold;
    font-size: 300%
    background-color: red;
}

والآن أصبح الحرف الأول في بداية كل فقرة غامقاً وحجمه أكبر 300% من الحجم الطبيعي كما أن لون الخلفية أحمر.

يمكنك استخدام الطريقة التالية لجعل السطر الأول من الفقرة غامق:

p:first-line {
    font-weight: bold;
}

الاستخدام الثاني للعنصر pseudo-elements هو إدراج محتوى من خلال CSS وذلك معقد جداً. يمكنك التحديد بأن المحتوى يجب أن يُدرج قبل أو بعد عنصر معين من خلال استخدام before: أو after: ثم يمكنك اختيار ما تريد إدراج قبل أو بعد العنصر المحدّد. ولتبسيط ذلك يمكنك مشاهدة المثال التالي وهو إضافة صور تزيينية بعد كل رابط في الصفحة:

a:after {
    content: '' url(flower.gif);
}

يمكنك أيضاً استخدام الدّالة ()attr لإدراج قيم معينة للواحق العناصر بعد عنصر معيّن. فمثلاً يمكنك إدراج الوجهة لكل رابط في الصفحة ضمن قوسين كالتالي:

a:after {
    content: '(' attr(href) ')';
}

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

يمكنك أيضاً إدراج قيم عددية بعد تكرار العناصر (مثل قائمة غير منقّطة أو فقرات) باستخدام الدّالة ()counter حيث يمكنك قراءة المزيد عنها في مقالة عدّاد CSS في موقع dev.opera.com.

لا ينبغي عليك إدراج معلومات مهمة ضمن CSS أو المحتوى الذي من الممكن ألا يتوفر في بعض التقنيات المساعدة أو إذا لم يختار المستخدم صفحة التصميم لديك. القاعدة الأهم هي أن CSS للتصميم على الصفحات أما HTML لإدراج المحتوى.

اختزال CSS

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

استخدمت سابقاً في هذا الدرس جزءاً من اختزال CSS لكنني لم أذكره وهو border: 2px solid black وهذا في طبيعة الحال جزءاً مختصراً من قاعدة أطول كالتالي:

border-width: 2px;
border-style: solid;
border-color: black;

مقارنة القيم الفردية والمختزلة

شاهد هذا المثال الذي يشرح الهوامش الخارجية (يتم اختزال الهوامش الداخلية والحدود بنفس الطريقة):

div.foo {
    margin-top: 1em;
    margin-right: 1.5em;
    margin-bottom: 2em;
    margin-left: 2.5em;
}

وبهذه الطريقة يمكن اختزالها كالتالي:

div.foo {
    margin: 1em 1.5em 2em 2.5em;
}

اختزال القيم بخاصية واحدة

يسمح الاختزال بدمج أربع قيم بخاصية واحدة، كما يمكن أن يأخذ الاختزال أقل مع أربع قيم حسب القائمة التالية. يتم ترتيب النتيجة حسب رقم القيمة المطلوبة:

1. تطبيق نفس القيمة لجميع الجوانب الأربعة مثل margin: 2px.
2. يمكن تطبيق القيمة الأولى للجانب العلوي والسفلي أما الثانية فلليمين واليسار مثل: margin: 2px 5px.
3. يمكن تطبيق القيمة الأولى والثالثة للقسم العلوي والسفلي بينما القيمة الثانية لقسم اليمين واليسار مثل: margin: 2px 5px 1px.
4. إذا كانت القيمة مفردة كما في رقم 1 فإنها على الترتيب من القسم العلوي فاليمين فالأسفل فاليسار.

من الأفضل استخدام الطرق الأربع للاختزال في CSS وهذا أيضاً يطبّق على الهوامش الداخلية padding.

أيهما يجب اختياره الخاصية المفردة أم القيمة المختزلة؟

تستخدم خاصيات الهوامش margin وpadding على نطاق واسع ولكن هناك بعض الحالات التي يتوجب عليك تجنّب استخدام القيم المختزلة أو استخدامهم بحذر كما في الحالات التالية:

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

مراجع الاختزال

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

border-left-width: 2px;
border-left-style: solid;
border-left-color: black;

تعمل الهوامش والحدود margin ،padding ،border بنفس الطريقة كما تعلمنا في الفقرة السابقة.

اختزال أنواع النص font: حيث يمكنك تحديد حجم الخط ومدى غمقته وشكله وعائلة الخطوط التي ينتمي إليها كما في المثال التالي:

font-weight: bold;
font-style: italic;
font-size: 1.5em;
line-height: 200%;
font-family: Georgia, 'Times New Roman', serif;

لكن أيضاً يمكنك اختزال جميع ذلك بسطر واحد كالتالي:

font: bold italic 1.5em/200% Georgia, 'Times New Roman', serif;

اختزال الخلفية: حيث يمكنك تحديد لون الخلفية وصورة الخلفية ومكان الصورة وتكرار الصورة كما في المثال التالي:

background-color: #000;
background-image: url(image.gif);
background-position: top left;
background-repeat: no-repeat;

أيضاً يمكنك اختزال جميع ذلك بسطر واحد كالتالي:

background: #000 url(image.gif) top left no-repeat;

اختزال تصميم القوائم: أيضاً يمكنك تحديد نوع التسلسل للقائمة الغير مرقّمة والمكان والصورة كما في المثال التالي:

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);

أيضاً يمكنك اختزال جميع ذلك بسطر واحد كالتالي:

list-style: circle inside url(bullet.gif);

لاحظ بأن أيضاً شكل اللون يمكن اختزاله من حيث نوعه وهو الوحدة الستة عشرية #000 وهو مختزل من شكله المطوّل وهو #000000. وكمثال أكثر تعقيداً مثل #6C9 وهو اختزال للشكل المطوّل #66CC99.

إدراج CSS مع HTML

يوجد ثلاثة أنواع لإدراج CSS مع صفحات HTMLهم: الإدراج الداخلي، الإدراج المضمر والتصميم الخارجي. ينصح بشدّة استخدام النوع الثالث وهو استخدام الإدراج الخارجي (أي في ملف تصميم منفصل) ما لم يكن لديك سبباً لاستخدام أول نوعين.

الإدراج الداخلي

يمكنك تطبيق التصميم على عنصر معيّن من خلال استخدام اللاحقة style كما في المثال:

<p style="background:blue; color:white; padding:5px;">paragraph</p>

يمكنك إدراج جميع خاصيات التصميم CSS مع القيم الخاصة بهم (يجب فصل بعد كل خاصية وقيمة بإشارة الفاصلة المنقوطة) وبذلك يمكنك إدراج ماتريد من تصميم CSS. يمكنك مشاهدة مصدر هذا المثال.

يمكنك مشاهدة المثال عبر استخدام المتصفح كما ستلاحظ بأن الفقرة التي قمنا بتطبيق تصميم داخلي فيها أصبح النص باللون الأبيض وأيضاً خلفية النص أصبحت باللون الأزرق كما في الشكل 1.

الشكل 1: يظهر المتصفح Chrome الفقرة التي تم تطبيق الإدراج الداخلي عليها وهي مختلفة عن باقي الفقرات

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

تعتبر أكبر مشكلة في الإدراج الداخلي أن التعديل على تصميم العنصر أكثر صعوبة مما تتوقع لأن جوهر لغة CSS هي تطبيق تصميمات منفصلة وبعيدة عن بنية صفحة HTML. بالإضافة إلى أن مسألة التعديل بهذه الطريقة لاتمنحك جميع مزايا وخصائص CSS وهي الإنسابية وذلك يعني بأن تبدع في التصميم بشكل منفصل عن بنية صفحة HTML ثم إدراج ذلك التصميم على صفحات HTML والتي سيقوم المتصفح بتطبيقها دفعة واحدة وبمرونة أكثر.

الإدراج المضمر

تقع التصميمات المضمرة ضمن الوسم <head> في صفحة HTML وبداخل وسم التصميم <style> كما في المثال التالي:

<style type="text/css" media="screen">
  p {
      color: white;
      background: blue;
      padding: 5px;
  }
</style>

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

الشكل 2: يظهر متصفح Chrome جميع التصميم التي تم تطبيقها على جميع الفقرات ضمن وسم head

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

صفحات الإدراج الخارجية

نعني بصفحات الإدراج الخارجية أي وضع جميع تعريفات التصميم CSS في ملف خارجي وحفظه في ملف منفصل بامتداد css. ثم تطبيق جميع هذه التصميمات على جميع صفحات HTML باستخدام الوسم <link> داخل الوسم <head>. لاحظ بأن الوسم <head> يحتوي بداخله على الوسم <link> والذي يمكنك إرفاق رابط ملف تصميم CSS خارجي وبعد ذلك سيتم تطبيق جميع التصاميم بدل إرفاقه مباشرة. لنأخذ نظرة على كيفية عمل الوسم <link>:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

استخدمنا مع الوسم <link> في المثال السابق اللاحقة href وهي لتحديد مكان ملف التصميم كما استخدم نوع media أي الوسائط بالقيمة screen (لأننا في هذه الحالة لا نريد أن تكون الطباعة بنفس شكل الصفحة) كما أننا قمنا بتعريف النوع بأنه نص من نوع CSS وأيضاً الصفحة هي stylesheet أي صفحة تصميم خارجية لأنه لا يكفي فقط إدراج رابط التصميم بل يجب تعريفه أيضاً.

الشكل 3: يظهر المتصفح Chrome جميع التصاميم التي تم تطبيقها في الصفحة وهي متصلة بملف تصميم خارجي باستخدام <link>

باختصار, أفضل طريقة لاستخدام التصاميم هي استخدام النوع الأخير ملف تصميم خارجي لأنه يوفّر الجهد والوقت وأيضاً سهولة التعديل على جميع تصميم الموقع من خلال ملف واحد. أيضاً عند استخدام ملف واحد لجميع صفحات الموقع عندها سيقوم المتصفح بتحميل ملف واحد للتصميم وحفظه كملف مؤقت وتطبيقه على جميع صفحات الموقع وبكلمات أخرى تحميل أقل للموقع.

استيراد ملف التصميم

بصراحة هناك طريقة أخرى لاستيراد ملف تصميم خارجي إلى صفحات HTML وذلك من خلال استخدام خاصية import@ في الإدراج المضمر بنفس الطريقة كما شرحنا سابقاً شاهد المثال التالي:

<style type="text/css" media="screen">
  @import url(styles.css);
  /* باقي تعليمات الأنماط يمكن وضعها هنا */
</style>

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

<style type="text/css">
  @import url(styles.css) screen;
  /* باقي تعليمات الأنماط يمكن وضعها هنا */
</style>

ربما ستسأل لماذا يجب عليّ استخدام نوع آخر لاستيراد ملف الإدراج الخارجي وتطبيقه على صفحات HTML؟ طبعاً يوجد القليل من المحاسن والمساوئ للخاصية import@ وعلى الرغم من أنها قليلة إلا أن الطريقة الشائعة والأفضل هي استيراد ملف الإدراج الخارجي من خلال <link>.

• لا تعرف الإصدارات القديمة من المتصفحات الخاصية import@ مطلقاً (مثل متصفح Netscape 4 وما قبل وأيضاً IE4 وما قبل)، من حسن الحظ أنه لم يعد لهذه المتصفحات وجود تقريبا، لكن وجب التنويه.
• يمكن استخدام الخاصية import@ لإخفاء بعض التصميمات والتي من المحتمل أن تستخدم بطريقة خاطئة من قبل المتصفحات القديمة. يمكنك أيضاً استخدام التصميمات الحديثة واستيرادها من خلال import@ واستخدام بعض التصميمات الأساسية التي لا تتعارض مع المتصفحات القديمة. وطبعاً نادراً ما تقوم باستخدام هذه الحالات لنُدرة المتصفحات القديمة هذه.
• يمكنك -جدلا- القول بأن استخدام تعليمات import@ متعددة ينتُج عنه شِفرة برمجية أقل من استعمال عناصر <link> متعددة، لكن فارق الحجم هنا مُهملٌ جدا لا يقتضي اعتباره.

خاتمة

تعلمنا في هذا الدرس بعضًا من تطبيقات CSS مع صفحات HTML، بجميع أنواع التضمين، كالإدراج الداخلي حيث يمكنك استخدام لاحقة style بداخل العنصر وأيضاً الإدراج المضمر حيث يمكنك إدراج التصميم داخل وسم <style> ضمن الوسم الرئيسي <head> وأخيرًا الإدراج الخارجي بملف مستقل. كما تعلمنا استيراد ملف الإدراج الخارجي من خلال استخدام الوسم <link> (وهي الطريقة الأكثر شيوعاً هذه الأيام) أو باستخدام الخاصية import@.

أسئلة وتمارين

• ماهي المحاسن والمساوئ عند استخدام الإدراج الداخلي وكيف يمكن تطبيقه على العنصر؟
• ماهي بنية تعليمات CSS؟ اشرح التركيبة والمكونات المختلفة.
• لنفترض أن لديك مجموعة من شِفرات التصميم. ماذا تحتاج أن تفعل لجعلهم ضمن ملف تصميم خارجي منفصل؟
• بماذا يطابق هذا المنتقى ul#nav؟
• ماهي المزايا أو المحاسن من تجميع المنتقى ؟
• كيف تعرّف أوراق CSS المخصصة للطباعة؟

ترجمة -وبتصرّف- للمقال: CSS Basics لصاحبه Christian Heilmann.

سنتناول في هذه المقالة بقليلٍ من التفصيل شرح خاصّيّة هامّة من خواصّ أوراق الأنماط المُتتالية CSS وهي "ظلال النصّ" text-shadows، وتجدرُ الإشارة إلى أنه يوجد خاصّيّة مُشابهة لهذه الخاصّيّة وهي "ظلّ الصندوق" box-shadow، والخاصّيّتان مُعرفتان في وحدتين مختلفتين في المعايير القياسية لـ W3C على الرُغم من أنها مُتطابقتان إلى حدٍ كبير.

سيكون من السهل تعلّم خاصّيّة "ظلّ النصّ" عند توفر معرفة مُسبقة بخاصّيّة "ظلّ الصندوق"، ولكن قبل كل شيء لكي يُفهم الفرق بينهُما، يجب القراءة قليلًا عن الجانب النظري من الموضوع، ودعم المُتصفحات لهذه الخاصّيّة، ومن ثُمّ التطبيق مع الأمثلة العملية.

دعمُ المتصفحات

تدعمُ مُعظم المُتصفحات الحديثة الخاصّيّتان "ظلّ النصّ" و"ظلّ الصندوق" كما هو موضّح في الشكل التالي:

يدعم المُتصفح Opera mini خاصّيّة "ظلّ النصّ" بشكل جزئيّ حيث لايَظهر تأثير الغشاوة blur على النصّ، وتُحاكي الإصدارات السابقة للإصدار العاشر من IE لخاصّيّة "ظلّ النصّ" باستخدام مُرشّحات filters غير معياريّة non-standard مثل مُرشّح dropshadow.

الفرقُ بين "ظلّ النصّ" text-shadow و"ظلّ الصندوق" box-shadow

طريقة كتابة الشيفرة الخاصّة بـ "ظلّ الصندوق" هي كالتالي:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

أمّا طريقة كتابة الشيفرة البرمجية لـ "ظلّ النصّ" فهي كالتالي:

text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

تعملُ الخاصّيّتان بأسلوب مُماثل مع بعض الاستثناءات، حيثُ لا يُمكن إنشاء ظلّ داخليّ للنصِّ كما في خاصِّيَّة "ظلّ الصندوق"، كما لا يُمكن التحكم بمقدار التوسّع spread في "ظلّ النصّ"، ولكن يُمكن إنشاء أكثر من ظلّ لتُعرض فوق بعضها البعض بطريقة مُماثلة لـ "ظل الصندوق" كما سوف نوضّح بالأمثلة.

يُوضّح الشكل التالي الاختلاف بين المفاهيم الأربعة التي سوف نعمل عليها.

الجانب العمليّ لخاصّيّة "ظلّ النصّ"

الألوان والإزاحة

تُحرّكُ قيمُ الإزاحة الموجبة الظلّ بالاتجاه الأيمن والأسفل، وتُحرّكُ القيمُ السالبة الظلّ بالاتجاه المُعاكس أيّ نحو اليسار والأعلى.

تحديدُ لون الظلّ هو أمرٌ إختياريّ، وسيأخذ الظلّ لون العنصر الأب في حال عَدم تحديد لون مُحددٍ له، ويُنصح دائمًا بتحديد اللون وذلك لأن المُتصفّحات سوف تُظهر لون الظلّ بشكل مُختلف فيما بينها.

في الأمثلة التالية سوف نُحدّد الإزاحة الأُفقيّة والعموديّة مع ألوان مُخصّصة

text-shadow:10px 10px;
text-shadow:-5px -5px; color:blue;
text-shadow:-1px -1px white; color:blue; background:#888;
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;

الغشاوة blur

المُعامل الخاصّ بالغشاوة هو مُعاملٌ اختياريّ، وقيمته تُحدد مدى انتشار الغشاوة لحواف الظلّ، ويجب أن تكون قيمتُه موجبة، حيث القيمة صفر تعني بدون غشاوة، أي أنّ حواف الظلّ ستكون حادّة.

/*blur*/
.example1 {
  text-shadow:5px 5px 3px darkred; color:red;
}
.example2 {
  text-shadow:4px -4px 10px red; color:azure;  background:#333;
}
.example3 {
  text-shadow:0px 0px 4px ;
}
.parent-of-example3 {
  color:red;
}
.example4 {
  text-shadow:0px 0px 4px ;
}
.parent-of-example4 {
  color:lightgray; background:#333;
}

استخدمنا في المثال الأول والثاني غشاوة مُختلفة، حيثُ الأول 3px والثاني 10px، ولم نُحدد لون العنصر بشكل مُباشر في المثال الثالث والرابع بل على العنصر الأب.

التوسّع والانكماش Expansion and contraction

سوف يتم إضافة إمكانية تحديد التوسّع spread لخاصّيّة "ظلّ النصّ" في الإصدار الرابع من `أوراق الأنماط المُتتالية` CSS4، ولكن IE10 يدعم هذه الخاصّيّة مُنذ الآن، ولذلك في الأمثلة سوف يظهر تأثير هذا المُعامل parameter -وهو الرابع للخاصّيّة text-shadow- على المُتصفح IE10 وIE11.

تزيد القيّم الموجبة من توسّع الظلّ وتُقلّص القيّمُ السالبة من توسّع الظل، وتُستخدم القيمة صفر لإضافة حدود خارجية للنصّ.

text-shadow:5px 5px 0px 3px lightgreen; color:green;
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

الظلّ المُتعدد Multiple shadow

تُمكنك خاصّيّة "ظل الصندوق" من إنشاء أكثر من ظلّ لنفس النصّ، وذلك عبر كتابة قيمة كل ظلّ والفصل بينها بالفاصلة (,)

/*Multiple shadow*/
.example1 {
  text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;
}
.example2 {
  text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),
               6px -6px 4px 2px rgba(255,255,255,0.25),
               -3px -3px 4px 6px rgba(255,0,255,0.15);
}
.example3 {
  text-shadow: 0 0 0 3px white,
               0 0 2px 6px magenta, 
               0 0 1px 9px white, 
               0 0 6px 12px magenta;
        color: magenta;
}
.example4 {
  text-shadow: 0 0 2px #fff,
               0 0 4px 2px rgba(255,255,255,0.5),
               0 0 6px 6px #f0f, 
               0 0 4px 7px #fff, 
               0 0 3px 15px #222, 
               -4px 0 2px 9px #f0f, 
               4px 0 2px 9px #f0f, 
               0 -4px 2px 9px #f0f, 
               0 4px 2px 9px #f0f;
        color: white;
}
.example5 {
  text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px;
        color: magenta;
}

مُحاكات التوسّع Emulating expansion

أشرت سابقًا إلى أنّ إمكانية عمل التوسّع spread للنصّ مُتوفرة فقط في الإصدار الرابع من CSS، ولكن يُمكن عمل مُحاكات لها في الإصدار الثالث.

text-shadow: 0px 0px 0px 4px magenta;
/* الشيفرة السابقة مُشابهة للشيفرة التالية */
text-shadow: 0px 2px magenta,
             2px 0px magenta,
             -2px 0px magenta,
             0px -2px magenta,
             -1.4px -1.4px magenta,
             1.4px 1.4px magenta,
             1.4px -1.4px magenta,
             -1.4px 1.4px magenta;

كما هو مُبيّن في المثالين السابقين أنّ المُحاكات ليست مثاليّة من ناحية المظهر ودقّة الحواف الخاصة بالظلّ، وكما تختلفُ سرعة المُتصفح في عرض المثالين السابقين.

أمثلة إضافية

ظلّ مزدوج

/*Twin shadow*/
.twin {
  text-shadow: 0 0 2px 2px white, 
               2px 0 2px 5px #222, 
               3px 0 3px 6px #933, 
               5px 0 2px 14px #222, 
               6px 0 5px 16px #533;
  background-color: #222;
  color: white;
}

تأثير Letter-press

/*Letter-press*/
.le-pr {
  text-shadow: 0px 2px 3px #555;
  background-color:#333;
}

قوس قزح

/*Rainbow*/ /*IE*/
.rainbow {
  text-shadow: 0 0 2px 3px yellow, 
               0 0 2px 6px orange, 
               0 0 2px 9px red, 
               0 0 2px 12px lime, 
               0 0 2px 15px blue, 
               0 0 2px 18px violet;
}

ثلاثي الأبعاد

/*3D*/
.threed {
  text-shadow: 0 0 1px #999, 
               1px 1px 1px #888, 
               2px 2px 1px #777, 
               3px 3px 1px #666, 
               4px 4px 1px #555, 
               5px 5px 1px #444;
  background-color:#333;
  color:white;
}

تأثير Retro

/*Retro / Vintage effect*/
 .retro {
   text-shadow: 2px 2px #fff, 
                3px 3px #666;
 }

الحرف الأول باستخدام "شبه الصنف" pseudo-class المُسمى "الحرف الأول" first-letter

/*First-letter-only shadow */
 .text { 
   text-shadow: 0 0 5px; 
 }
 .text::first-letter { 
   color:azure; 
   text-shadow: 0 0 5px, 
                0 0px 6px 3px blue, 
                0 -2px 6px 6px cyan, 
                0 -4px 9px 9px lightblue ; 
 }

التوهج

.flame {
  text-shadow: 0 0 2px #eee, 
               0 0 4px 2px #fff, 
               0 -2px 4px 2px #ff3, 
               2px -4px 6px 4px #fd3, 
               -2px -6px 11px 6px #f80, 
               2px -8px 18px 8px #f20;
  background-color:#222;
  color:white;
}

ترجمة -وبتصرّف- للدّرس Practice with Text Shadows

إنّ أي مُطوّر أو مُصمّم يُحب كتابة الشيفرة البرمجية، ستكون تقسيمات الصفحة layouts المُعتمدة على أوراق الأنماط المُتتالية هي صميم وجوهر عمله. فيما قد تكون هذه المقالة مُراجعة للبعض، أو حتّى تصحيح بعض المفاهيم للبعض الآخر، سيتمّ تناول خاصّيّة التَمَوْضُع position، وكيفيّة استخدامها في تصميم تقسيمات صفحة layouts مُسايرة ومُتوافقة مع المعايير القياسيّة، ولا تعتمد على الجداول.

يُساء فهمُ خاصّيّة التَمَوْضُع، ممّا يؤدي في بعض الأحيان عند تصحيح علّة مُعينة في شيفرةٍ ما من المُمْكن أنّ يتمّ استخدام قيم مُختلفة بأسلوب التجربة والخطأ للخاصّيّة position لمُحددٍ ما حتّى يتمّ الحصول على القيمة المطلوبة. إنّ هذه الطريقة المُملّة قد تفي بالغرض، ولكن من المُفترض على المُطوّر معرفة بالتحديد لماذا القيمة position: relative قد استطاعت إصلاح مُشكلة ما في تقسيم الصفحة دون قيمة أُخرى. هدف هذا الشرح هو تعلّم دلالات قيمة الخاصّيّة position وتأثيرها على الصفحة، وبالأخصّ، كيف سوف تؤثّر هذه القيم على بقية أجزاء الصفحة (markup).

يُقدم بَيان specification أوراق الأنماط المُتتالية خمس خواصٍّ وهي:

• ساكن: static
• نسبيّ: relative
• كامل أو مُطلق: absolute
• ثابت: fixed
• مَوروث: inherit

كما تمّ إضافة قيم جديدة ولكنها مازالت في مرحلة "مسودة عمل".

يُستفاد من كل خاصّيّة لغرضٍ مُعينٍ، لذلك فَهمُ الغرض من كلٍ منها هو الطريق الأمثل لاحتراف تقسيمات الصفحة المُعتمدة على CSS.

الخطوات الأولى مع أليّة عمل خواصّ التَمَوْضُع

سيتمّ العودة إلى الأساسيّات لفهم الأمور بشكلٍ صحيحٍ. في CSS وبطبيعة الحال، يتمّ العمل ضمن حدود وقواعد ما يهم هُنا هو ما يُدعى بـ "التدفّق الطبيعيّ" normal flow.

في العودة إلى بيان مُنظمة رابطة الشبكة العالميّة W3C سيكون تعريف التدفّق الطبيعيّ بالشكل التّالي:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

 

الصناديق في التدفّق الطبيعيّ تَنتمي إلى سياق التنسيق والّذي قد يكون ضمنيّ على نفس السطر inline أو على كامل السطر block، ولكن ليس كلاهما في نفس الوقت. حيثُ أنّ الصناديق الّتي تُعرض على كامل السطر تُشارك في سياق التنسيق بهذا الشكل، والصناديق الّتي تُعرض بشكل ضمنيّ تُشارك في سياق التنسيق بهذا الشكل.

يُمكن اعتبار الصندوق المَذكور في البيان السابق كالصندوق الخشبي، والتدفّق الطّبيعيّ كما لو أنّه قانون كما هو قانون الجاذبيّة، التدفّق الطّبيعيّ للمُستند يُعبر عن اصطفاف العناصر فوق بعضها البعض تدريجيًّا من الأعلى إلى الأسفل، لكي تَظهر بالشّكل المُفترض لها أنّ تظهر عليه. يُمكن تشبيه التدفّق الطّبيعيّ بصناديق (مُكعبات) الأحرف الأبجديّة الّتي يُبنى منها ذلك البرج الضخم -الّذي يبنيه الأطفال بشكل مُتسلسل للأحرف- حيثُ أنّ هذه الصناديق الخشبيّة مُقيّدة بفعل الجاذبيّة الأرضيّة، ولا يُمكن إعطائها خصائص تُعارض قانون الجاذبيّة. في الجهة المُقابلة تتبع العناصر بعضها البعض في ترتيب عناصر الصفحة الخاصّة بمُستند HTML. ولكن من المُمكن إعطاء هذه العناصر خصائص لتُعرض بشكلٍ مخالفٍ لترتيبها الطبيعيّ.

الخاصيّتان static و relative

تشبه خاصِّيَّات التَمَوْضُع "ساكن" static و "نسبيّ" relative سلوك صناديق الأبجديّة، حيثُ أنّها تصطفّ فوق بعضها البعض كما هو مُتوقعٌ لها. مع الانتباه إلى أنّ الخاصّيّة static هي القيمة الافتراضيّة للخاصّيّة position لأي عنصر. وعندما يكون هناك ثلاثة عناصر تحمل الخاصّيّة static فإنّها سوف تصطفّ فوق بعضها البعض. في المثال التّالي يوجد ثلاثة عناصر جميعها تحمل القيمة static.

#box_1 { 
  position: static;
  width: 200px;
  height: 200px;
  background: #ee3e64;
}
#box_2 { 
  position: static;
  width: 200px;
  height: 200px;
  background: #44accf;
}
#box_3 { 
  position: static;
  width: 200px;
  height: 200px;
  background: #b7d84b;
}

يُلاحظ من المثال السابق كيف أنّ هذه الصناديق تصطفّ فوق بعضها البعض. هذه الفكرة على بساطتها تعتبر أساسيات بناء الكتل block building ومن المُهم جدًا إدراكُها.

يُمكن استخدام القيمة static لإنشاء تقسيمات صفحة مُبسّطة بعمود واحد single-column، حيثُ كل عنصر يتموضع فوق العنصر الّذي يليه. وعند الرغبة في نقل هذه العناصر فيما بينها باستخدام خواصّ الإزاحة offset مثل: الأعلى top، اليمين right، الأسفل bottom، اليسار left ستكون النتائج غير مُرضيةٍ أبدًا، حيثُ لا تؤثر هذه الخواصّ على عنصر ساكن static (أي يقوم بتجاهلها). كما لا يستطيع العنصر الساكن إنشاء نسق إحداثيَّات جديد للعنصر الابن. ولكن ما هو نسق الإحداثيَّات، هذا ما سيتمّ توضيحه باستخدام القيمة نسبيّ relative.

تتصرّف العناصر المُتموضعة بشكل نسبيّ relative كما هي العناصر المُتموضعة بشكل ساكن static، حيثُ تتوافق فيما بينها بشكل مُتناسق، من دون أنّ تسبب أي مشاكل. قد يبدو الأمر غريبًا، ولكن عند تطبيق القيمة relative على المثال السابق ستكون النتائج مُشابهة للمثال السابق:

#box_1 { 
  position: relative;
  width: 200px;
  height: 200px;
  background: #ee3e64;
}
#box_2 { 
  position: relative;
  width: 200px;
  height: 200px;
  background: #44accf;
}
#box_3 { 
  position: relative;
  width: 200px;
  height: 200px;
  background: #b7d84b;
}

يُبرهن المثال السابق كيف أنّ العناصر المُتموضعة بشكل نسبيّ relatively تسلك سلوك العناصر المُتموضعة بشكل ساكن statically. لكن ما هو غير واضح أنّ هذه العناصر الّتي تحمل القيمة relative تختلف بمَيْزة هامة جدًا عن العناصر الّتي تحمل القيمة static.

يكمُن الاختلاف الأوَّليّ في أنّ العناصر المُتموضعة بشكل نسبيّ من المُمكن تعديل مَوضعها باستخدام خاصِّيَّات الإزاحة: top و right و bottom و left. سيتمّ استخدام المثال السابق، ولكن بإضافة تَمَوْضُع الإزاحة على الصندوق الثاني “box_2”:

#box_2 { 
  position: relative;
  left: 200px;
  width: 200px;
  height: 200px;
  background: #44accf;
}

يُظهر المثال السابق التَمَوْضُع النسبيّ بشكلٍ عمليٍّ. حيثُ أنّ الصناديق الثّلاثة مُتموضعة فوق بعضها ماعدا الصندوق الثّاني فقد تمّ دفعه 200px من اليسار. في هذا المثال قد تمّ كسر قانون الجاذبية بناءً على رغبتنا. ومازال الصندوق الأزرق ينتمي إلى التدفّق العام الخاصّ بمُستند HTML، حيثُ أنّ الصندوق الأخضر يأتي أسفل الصندوق الأزرق على الرغم من أنّ الصندوق الأزرق ليس فوقه بشكل مُباشر. عند استخدام خاصِّيَّات الإزاحة لنقل عنصر مُتموضع بشكلٍ نسبيٍّ، فإن ذلك لا يؤثّر على العنصر أو العناصر التّالية، حيثُ أن الصندوق الأخضر مازال مُتموضعًا كما لو كان الصندوق الأزرق غير مُزَاح. وهو أمرٌ لا ينطبق على التشبيه الخاصّ بصناديق الأبجديّة.

يُعتبر إنشاء نسق إحداثيَّات للعنصر الابن مَيْزةً أُخرى من ميزات خاصيّة التَمَوْضُع النسبيّ. حيثُ يُمثل هذا النسق نقطةً مرجعيّةً لخاصِّيَّات الإزاحة. سيتمّ العودة إلى المثال السابق لتوضيح هذه الفكرة، حيثُ أنّ الصندوق الأزرق لا يتموضع داخل أيًا من العناصر، لذلك نسق الإحداثيَّات المُستخدم لإزاحة نفسه 200px من جهة اليسار يعود إلى المُستند نفسه. ولو تمّ وضع الصندوق الثّاني داخل الصندوق الأول، سيتمّ الحصول على نتائج مُختلفة، حيثُ أنّ الصندوق الثّاني سيتموضع نِسْبَة إلى نسق الإحداثيّات من الصندوق الأول (الأحمر). في المثال التّالي سيتمّ التعديل على مُستند HTML دون التعديل على التنسيق CSS، وذلك بنقل الصندوق الثّاني داخل الصندوق الأول:

<div id="box_1">
  <div id="box_2"></div>
</div>

يُظهر المثال السابق ترميز مُستند HTML الجديد. وبسبب نسق الإحداثيّات الجديد، يقيس الصندوق الأزرق إزاحته 200px من جهة اليسار نسبةً إلى المكان الّذي كان سيكون عليه الصندوق الأزرق لو لم يكن مُتموضعا بشكلٍ نسبيٍّ.

القيمة Absolute

تُمثّل القيمة absolute درجة عالية من الأهمية وأكثر من سابقتها relative، حيثُ التخصيص هو ما يُميز هذه القيمة. يُسحب العنصر المُتموضع بشكلٍ نسبيٍّ من التدفّق الطّبيعيّ، وذلك عكس ما يتمّ في العناصر الّتي تحمل القيمة relative و static. ويمكن التحكم بالعنصر بطريقةٍ مرنة عندما يتمّ سحبه من التدفّق الطّبيعيّ، حيثُ يُمكن وضعه في أي مكان من دون أنّ يؤثّر أو يتأثّر بباقي العناصر المُنتمية إلى هذا التدفّق. يُمكن التفكير بهذه العناصر كما لو أنّ لها على الجهة الخلفية قطعة كبيرة من مشبك velcro، حيثُ يُمكن إلصاق هذه العناصر في أي مكان حسب الرغبة والحاجة. تَستجيب العناصر المُتموضعة بشكل مُطلق (كامل) absolutely إلى خاصِّيَّات الإزاحة. حيثُ يُمكن تحديد القيم top: 100px و left: 200px للعنصر ليتوضع العنصر بالضَّبط 100px من الجهة العلوية و200px من الجهة اليُسرى للمُستند. سيتمّ التوضيح بالمثال التّالي وباستخدام أربعة صناديق:

#box_1 { 
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: #ee3e64;
}
#box_2 { 
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: #44accf;
}
#box_3 { 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: #b7d84b;
}
#box_4 { 
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: #ebde52;
}

يُظهر المثال السابق أربعة صناديق تتموضع في زَوايا المُتصفّح الأربع، وذلك بسبب أنّ كل صندوق يحمل القيمة absolute للخاصيّة position، بكلماتٍ أُخرى تمّ إلصاق هذه الصناديق في كل زاوية من زوايا نافذة المُتصفّح. ستبقى هذه الصناديق بالزاوية الخاصّة بها عند تغيير حجم المُتصفّح. وإنّ تصغير حجم المُتصفّح بحيثُ تتداخل أو تتشابك هذه الصناديق مع بعضها لن يُحدث أي تفاعل فيما بينها على الإِطْلاق، أي لن يزيح أحدها الآخر، وكأنّ كل صندوق في طبقةٍ مُختلفة، وذلك لأنّ هذه الصناديق قد أصبحت خارج التدفّق الطبيعيّ للمُستند.

تُنشئ العناصر المُنسّقة بالقيمة absolute نسق إحداثيَّات جديد للعناصر الأبناء الخاصّة بها. المثال التّالي يوضّح كيف أنّ الصناديق البرتقاليّة الصغيرة تتموضع داخل الصناديق الآباء الخاصّة بها، وإحداثيّات الإزاحة مُرتبطة بالعناصر الآباء لا بنافذة المُتصفّح.

<div id="box_1" class="box">
  <div class="orange"></div>
</div>
<div id="box_2" class="box">
  <div class="orange"></div>
</div>
<div id="box_3" class="box">
  <div class="orange"></div>
</div>
<div id="box_4" class="box">
  <div class="orange"></div>
</div>}
.box { position: absolute; width: 200px; height: 200px; }
#box_1 { background: #ee3e64; top: 0; left: 0; }
#box_2 { background: #44accf; top: 0; right: 0; }
#box_3 { background: #b7d84b; bottom: 0; left: 0; }
#box_4 { background: #ebde52; bottom: 0; right: 0; }
.orange { background: #f95b34; position: absolute; top: 39%; left: 41%; width: 40px; height: 40px; }

تُقدم القيمة absolute خصائص مُميّزة عند استخدام قيم الإزاحة معها، حيثُ سيُصبح من المُمْكن تَمْديد العنصر من دون تحديد أيًا من أبعاد العَرض width أو الارتفاع height، والّتي ستكون مُختلفة بناءً على حجم نافذة المُتصفح أو قياس الشاشة. وعليه فإنّ العنصر الابن سيكون مُقيّدًا بالعنصر الأب الخاصّ به، أو المُستند نفسه. المثال التّالي سيُوضح الفكرة:

a { 
  position: absolute; 
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px; 
  background: #44accf; 
}
#box_b { 
  position: absolute; 
  top: 20px;
  right: 20px; 
  bottom: 20px; 
  left: 20px; 
  background: #ff9c34;
}

يُوضّح المثال السابق كيف أنّ العناصر قد أصبحت أكثر مُرونة fluid، حيثُ يَتغيّر حجمها مع تَغيّر حجم الصفحة. ويوضّح المثال التّالي كيفيّة إنشاء صفحة بعمودين وبارتفاع الصفحة بالكامل.

#box_1 { 
  position: absolute;
  top: 0;
  right: 20%; 
  bottom: 0;
  left: 0;
  background: #ee3e64;
}
#box_2 { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 80%; 
  background: #b7d84b;
}

يُظهر المثال السابق تقسيم صفحة بعمودين، والّذي يُوضّح ما يُمكن عمله باستخدام القيمة absolute. أخذًا بعين الاعتبار أنّ هذا الأسوب ليس أفضل طريقة في إنشاء تقسيم صفحة بعمودين. يُمكن استخدام بعض الحِيَل في إيجاد تطبيقات عمليّة لهذه الخاصّيّة. على سبيل المثال:

#box_1 { 
  width: 200px;
  height: 200px;
  background: #ee3e64;
}
#box_2 { 
  position: absolute;
  left: 100px;
  width: 200px;
  height: 200px;
  background: #44accf;
}

عند التركيز في المثال السابق والصندوق الثّاني بالتحديد، سيتمّ مُلاحظة كيفيّة استخدام قيمة إزاحة واحدة left: 100px;، وهذا ما يَسمح للصندوق الثّاني في الحفاظ على حافته العلوية في مكانها مع مقدرته على الانتقال 100px من جهة اليسار، ولكن عند تطبيق قيمة إزاحة ثانية إلى الجهة العلوية، سيتمّ سحب الصندوق الأزرق إلى أعلى المُستند:

#box_2 { 
  position: absolute;
  top: 0;
  left: 100px;
  width: 200px;
  height: 200px;
  background: #44accf;
}

القيمة ثابت Fixed

يُشارك العنصر الّذي يحمل التنسيق position: fixed جميع الأحكام والقواعد الّتي يحملها العنصر المُتموضع بشكل مُطلق absolutely، حيثُ أنّ العنصر يُسحب من التدفّق الطّبيعيّ للمُستند. ويكمُن الاختلاف في أنّ العنصر الثّابت fixed يتمَوضع نسبة إلى المُستند، وليس إلى عنصر أب مُعيّن. كما لا يتأثر العنصر الثابت بالتدرّج، فيبقى في مجال الرؤية مهما تمّ النزول أو الصعود في الصفحة.

#box_2 {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
}

يُظهر المثال السابق شريطًا عُلويًّا يحتوي على نصّ، وذلك كعنصر fixed، من المُلاحظ عدم تحرك هذا الشريط عند التدرّج في الصفحة. أيضًا من المُلاحظ أنّ خاصِّيَّات الإزاحة left وright تحمل القيمة صفر. باعتبار أنّ القيمة fixed تنتهج سلوكًا مشابهًا لسلوك القيمة absolute، فمن المُمكن أنّ يتمّ تمديد عرض العنصر ليتناسب مع مجال الرؤية عند تثبيت العنصر أعلى الصفحة باستخدام top: 0;.

القيمة Inherit

تمّ في بداية المقالة الإشارة إلى وجود خَمس قيم مُتوفّرة للخاصيّة position. القيمة الخامسة هي مَوروث inherit والأقل أهميّة. تعمل هذه القيمة كما يدلّ الاسم الخاصّ بها، حيثُ أنّ العنصر يرث القيمة الخاصّة بالعنصر الأب. علمًا أنّه في الأساس، عناصر الخاصّيّة position لا ترث قيمتها من العنصر الأب الخاصّ بها، وتكون القيمة static هي القيمة الافتراضيّة.

الفرق بين relative وabsolute

يُظهر هذا التشبيه الفرق بين التنسيقين "نسبيّ" و "مُطلق".

يُزاح دائمًا العنصر الّذي يحمل التنسيق "نسبيّ" نسبةً إلى موضعه الأصليّ في التدفّق الطّبيعيّ، بمعنى أنّ هذا العنصر يتحرك نسبة إلى المكان الّذي كان سيكون عليه في الظروف العاديّة. وهذا الانتقال لا يؤثّر على تقسيم الصفحة أو العناصر المُحيطة، أي كأنّ هذا العنصر قد أصبح شبحًا قد ترك جسمه خلفه. هذا الجسم له عرض وارتفاع ويؤثّر على محيطه ولكنه غير ظاهر. ويستطيع الصندوق الشبح التحرك ولكنه مازال مُرتبطًا بجسمه القديم، بمعنى أنّ موقعه الحاليّ يُقاس بناءً على موقعه القديم.

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

يحصل الشبح المُطلق على موضعه بعد النظر عبر جميع الآباء الخاصّة به حتّى يجد واحدًا منها يتموضع إما بشكلٍ "نسبيّ" أو "مُطلق" ليكون نسق إحداثيَّات لهذا العنصر. وعندما لا يجد هذا الشبح أيًا من الآباء يتموضع بشكلٍ "نسبيّ" أو "مُطلق"، ستكون نقطته المرجعيّة هي المُستند العام.

تطبيقٌ عمليّ

سيتمّ تَوظيف الشرح السابق في مثالٍ عمليّ يجعل من الأمور أكثر وضوحًا لهذه الخاصِّيَّات. المثال هو للتوضيح فقط، ولا يُعتبر تطبيقًا مثاليًا لاستخدامه في الواقع العمليّ.

<div id="container">
    <div id="nav">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
    <div id="content">
      <div id="callout">
        <p>...</p>
      </div>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </div>
    <div id="footer">
      <p>Copyright © 2015 - webtuts Web Sites</p>
    </div>
</div>

تُظهر الصورة السابقة تقسيم صفحة شائع الاستخدام في الكثير من المواقع، شريط تنقل علوي navigation، المحتوى content، ذيل الصفحة footer. سيتمّ مُناقشة كل عنصر، وخاصيّة التَمَوْضُع الخاصّة به، ولماذا تمّ اختيار كلٍ منها.

سيتمّ استخدام #container لجعل بقية العناصر مُتمركزة في المُنتصف. العنصر #nav سيكون العنصر الأول داخل العنصر #container. لم يتمّ تخصيص العنصر #nav بالخاصيّة position، لذلك ستكون القيمة static هي المُعَيَّنة. وستفي القيمة الافتراضيّة بالغرض على اعتبار أنّه لن يتمّ إزاحة هذا العنصر، أو استخدامه في إنشاء نسق إحداثيَّات جديد. على الجهة الأُخرى سيتمّ تخصيص العنصر التّالي وهو #content بخاصيّة التَمَوْضُع position بالقيمة relative.

لا تؤثر قيمة التَمَوْضُع position على العنصر #content عند عدم استخدام أيًا من قيم الإزاحة، ولكن قد تمّ تخصيصها بالتنسيق position: relative; لتُكوّن نقطة الإحداثيَّات للعنصر #callout. كما تمّ تنسيق العنصر #callout بالتنسيق position: absolute. أخذًا بعين الاعتبار أنّ العنصر الأب وهو #content الخاصّ بهذا العنصر قد تمّ تنسيقه بشكل نسبيّ relative، فإنّ خاصِّيَّات الإزاحة المُطبقة على العنصر #callout ستكون مُعتمدة على الإحداثيَّات المُنشأة من قبل العنصر الأب #content. كما تمّ تخصيص العنصر #callout بإزاحته -80px إلى جهة اليمين بهدف سحبه خارج العنصر الأب. علاوةً على ذلك، تمّ تخصيص العنصر #callout بإزاحته من الجهتين العلويّة والسفليّة بالقيمة 100px، وبذلك سيحافظ هذا العنصر على ارتفاع شبه كامل منقوصًا 200px مهما كان حجم الصفحة.

لا يؤثّر العنصر #callout على باقي العناصر بما أنّ له القيمة absolute، ولذلك يجب إضافة بعض الحشو padding للعنصر #content وذلك كي لا تختفي الفَقْرات paragraphs أسفل العنصر #callout. كما سيتمّ تخصيص ذيل الصفحة بخاصيّة التَمَوْضُع مع القيمة fixed مما يجعله ثابت ضمن مجال الرؤية viewport عند التدرّج في الصفحة نزولًا أو صعودًا. كما سيتمّ إضافة حشو إلى العنصر #content ومن الناحية السفلية وبقيمة 60px وذلك لعدم اختفاء الفقرة الأخيرة تحت ذيل الصفحة.

الخاتمة

تُعتبر خواصّ التَمَوْضُع من المواضيع الّتي لا بُد على أي مُطوّر الإلمام بها بشكل مُعمّق، وذلك كي لا يتمّ الاعتماد على أسلوب التجربة والخطأ trial and error في التعامل مع هذه الخاصّيّة. يعطي فهم هذه الخاصّيّة احترافيّة عالية للمُطوّر ويزيد من إنتاجيّته عن باقي المُطوّرين الّذين يعتمدون على أسلوب التجربة والخطأ.

ترجمة -وبتصرّف- للمقال CSS Positioning 101 لصاحبه Noah Stokes

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

خلال هذا كله، اكتشفت دليل الأنماط– طريقة للتحكم بالترميز(markup) والـ CSS سواء خرج عن السيطرة أو كبُر وتضخّم. في هذه الفترة، رأيت كيف أن دليل الأنماط يُحافظ على وقت التطوير، ويجعل التواصل أفضل مع مبرمجي الواجهات (front end)، ويحافظ على ثبات التصميم والشيفرة معًا في كل جزء من الموقع. كانت عبارة عن ثورة، وفي هذه المقالة، سأعرض لك كيف تقوم ببناء دليل الأنماط وطريقة صيانته.

ما هو دليل الأنماط؟

بالنسبة لي، دليل الأنماط هو المستند الذي تعيش فيه الشيفرة، والذي يفصل كل العناصر المختلفة والوحدات البرمجية (modules) لموقعك أو تطبيقك. بالرغم من استخدامه في توحيد شيفرة الواجهات إلا أنه يستخدم لتوثيق ما يتم عرضه في الموقع، من نمط الرأس وألواح الألوان، المستخدمة في إنشاء الموقع. هذه الطريقة، تعتبر مكان تجمُّع لأعضاء الفريق – من مالِكِي المنتج والمنتجين إلى المصممين والمطورين-لنرجع إليه جميعا عند تغيير الموقع أو إعادة صياغته. عدة شركات تقوم بوضع الدليل مباشرة، وحزمة شركة Starbucks تعتبر أشهر حزمة معروفة، مع ذلك توجد حزم أخرى.

صورة توضح دليل الأنماط لشركة Starbucks

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

عندما بدأت الوظيفة، أول شيء بدأت به هو معالجة مشكلة دليل الأنماط. إنشاء الدليل كان على الأرجح أعظم شيء نافع عملته أثناء عملي: أجبرني ذلك على استعراض كل سطر من أسطر الـ CSS وقراءتها، وتلخيصها، وفهم طريقة استخدامها، ومن ثم توثيقها لنفسي، وللفريق، وكمرجع للمستقبل. بالإضافة إلى تحديد التناقضات والأخطاء من خلال التأمل التطويل في الـ CSS، وإذا لم أفهم كيفية استخدام أجزاء محددة من الشيفرة، علَّقت على الدليل بسؤال "من هو الشخص الذي يستطيع أن يساعدني”.

لماذا يجب أن تستخدم دليل الأنماط؟

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

تخيل بَدأ بناء الصفحة بمعلومات مثل هذه من دليل مستشفى South Tees،صندوق المنحة هذا سيتم إنجازه خلال ثوانٍ.

ثانيًا، الدليل يساعد على أن تكون الـ CSS قياسية(standard)، ويحافظ عليها صغيرة وسريعة أثناء التحميل. باستخدام الدليل كقائمة لجرد الوحدات البرمجية (modules) والشيفرة، فإن كلا من المصممين والمبرمجين يستطيعون رؤية ما إذا كان هناك تغيير جديد في التصميمات عن القياسات التي بُدِأ بها، ويقررون كفريق ما إذا كان هذا التغيير ذا قيمة لكي يتم توسعة قاعدة الشيفرة وإذا كان هذا الشيء مكتوب مُسبقًا فسيتم استيعابه بسهولة. إذا لم تمتلك أي دليل، فكل هذه التسهيلات مستحيلة، فحسب الخبراء فإن هذا سيعني إعادة كتابة النمط الجديد-والنتيجة ستكون ملف الـ CSS مملوء بالتكرار.

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

شركة Yelp حددت بوضوح كيف يتم استخدام الأزرار، المحافظة على ثبات نمط الزِّر في الموقع.

رابعاً، سيصبح التواصل أسهل. عندما قمتُ ببناء صفحاتٍ لمشروع كبير وأعطيتها للمصمم، استَخدم لغة الفئات(classes) المختلفة في الدليل ليسأل عن التغييرات. هذا يعني أننا لن نواجه أي ارتباك أو تشويش في أي جزء في حال قمنا بالمراجعة والتحسين. ومن فوائدها أيضا أنها تعطي لأعضاء الفريق كلمات مشتركة، مثل أسماء الوحدات البرمجية(modules)، للتحدث عن التصاميم بينما هم يكتبون الشيفرة.

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

خطوات بناء دليلك

سنتحدث في الجزء التّالي عن كيفية بناء الدليل الخاص بك. فعندما تعمل على مشروع ليس فيه دليل فإنه يتحتّم عليك أن تنشئ واحدًا.

جمِّع أساسيات موقعك

ابدأ الدليل ببعض أساسيات الموقع. العناصر الأساسية قد تتضمن لوح الألوان، أو نظام التصميم الشبكي (grid system)، أو حتى أنواع الأنماط الأساسية في الصفحة كالترويسة والجسم والنص: أي شيء ترى أنه من أساسيات بناء الصفحة. الجزء الأساسي في الموقع هو دليل اللون، لذا بدأتُ بذلك وذهبت من هناك. أنشأت صفحة الـ HTML بالترميز (markup)، وربطتها بتطبيق الـ CSS، لذا أي تغيير في الـ CSS سينعكس تلقائيًّا على دليل الأنماط.

عندما تنظر إلى دليل الأنماط الذي أنشَأَته شركة Yelp، فستجد كيف أنها بدأت بالأساسيات: تنسيق الخطوط، الشبكة، والألوان، ويتم إضافة نماذج أكثر كلما مرت من شخص لآخر.

دليل شركة Yelp.

إضافة نماذج أكثر

النموذج عبارة عن مجموعة مستقلة من الترميز(markup) والنمط لصناعة بعض الكائنات (objects) الأساسية لموقعك، كأن تستدعي الصندوق المستخدم بشكل متكرر، أو الأزرار، أو طريقة سرد قائمة أفقية من الروابط. لقد عمِلت على توثيق كل الاختلافات الممكنة لنمط الزر والرابط. لذا تقدم وأضف الترميز(markup) المناسب الذي تحتاجه لكل عنصر في دليلك.

مثال، الزر في دليل شركة (Editorially)، تم كتابة شيفرته كالآتي:

<label for="btn" class="btn" href="#">.btn <input type="submit" name="btn" value=".btn" /></label>.

وبسبب ربط الـ CSS بالتطبيق نفسه، فإن الـ CSS سيعرض دليل الأنماط كما هو. وبتغيير نمط الـ .btn، فإن سيتغير تبعًا لهذا التغيير بسبب الترابط بينهما.

استمر بإضافة النماذج كما تراها أنت في كل جزء من الموقع، وقد تستخدم تنسيقًا مُخصّصًا أكثر وأكثر، أو نموذج كائن الوسائط(media-object)، أو نموذج القائمة العمودية.

إليكم مثالًا آخر من مستشفى South Tees، يعرض بعض نماذج ما يسمونه ميزة الكُتل (feature blocks).

مستشفى South Tees

هذا كذلك وقت مناسب لسؤال فريقك ما الذي يمكن إضافته إلى دليل الأنماط الخاص بنا. شارك السؤال معهم واسمح لهم بإلقاء نظرة، وستتمنى مساعدتهم لك بإضافة كل النماذج والوحدات البرمجية(modules) التي تحتاجها. لا تنس بأن تُطلِع الفريق على الدليل الجديد، لأنه سيكون مصدرًا ومرجعًا لأيّ عضو في الفريق.

تفاعل المستند

أضف بعض التفاعل إلى موقعك، مثل القوائم المنسدلة، والوحدات البرمجية(modules)، أو حتى أداة التلميحات(tooltips) والتي تعمل على إظهار نص صغير-يعطي معلومات إضافية للمستخدم-عند تمرير المؤشر فوق عنصر معين في المستند. فكل هذا لا يسمح للفريق برؤية الأشياء الثابتة فقط ولكن المتحركة منها كذلك. لذا عندما تنظر إلى الدليل وتمرر المؤشر أو تضغط فوق العناصر، فإنها ستتفاعل وكأنها ظاهرة على موقعك وليست على الدليل فقط.

أداة التلميحات(tooltips) في دليل شركة Editorially.

تسهيل عملية الصيانة

إذا كان عليك بذل جهد إضافيّ لتحديث نمط التنسيق الخاص بك لدى إدخالك لتحديثات على طريقة عرض الموقع، فإن احتمال أن يبقى هذا الدّليل مُحدّثا صغير جدّا. ولهذا نقوم بربط الدّليل إلى نفس الـ CSS المُستخدم في التّطبيق، وعليه فإنّنا لن نُضطرّ إلى تعديل هذا الدّليل يدويّا كل مرّة.

قد يصعب جعل تحديث الدّليل أولويّة لكن صيانة الدّليل هي مهمة في غاية الأهمّيّة. وبناءً على السّرعة التي يتّم إدخال تعديلات فيها على التّطبيق أو على الموقع فإنه يجب عليك أن تُحدّث الدّليل بشكل دوري أيضًا، سواءً كانت التّحديثات تتمّ بشكل أسبوعيّ أو شهري. لمّا تقوم بإدخال تعديلات على موقعك فاجعل من مهمّة تعديل الدّليل جزءًا لا يتجزّأ من هذه العملية.

كرر العودة لدليلك

عندما يكون الجزء الأساسي من مكونات موقعك أو تطبيقك مضمَّنًا في دليلك، فإنه بإمكانك استخدام أدوات كثيرة لجعلها تبدو بشكل أفضل. بعد بناء دليل الأنماط فإن زملائي في العمل لفتوا انتباهي إلى الأداة الرائعة التي صنعتها مجموعة "Filament" وتسمى هذا الأداة بـ "X-rayHTML" وهي عبارة عن مكتبة جافاسكربت صغيرة تساعدك في كتابة التوثيق. X-rayHTML تأخذ الكائن المُنَسَّق في صفحتك وتولد له كتلة (block) متناسقة وجميلة وتضع هذه الشيفرة أسفل العنصر، بدون أي تدخل منك. وبإمكانك إضافة الأداة "prism.js" والتي تعمل على تظليل النص في الدليل، وتلوين الشيفرة لتسهل عملية قراءتها، فمثلا تعطي رسائل الخطأ الون الأحمر ورسائل النجاح باللون الأخضر وهكذا.

نظرة على محرر دليل الأنماط بعد استخدام أداة الـ X-rayHTML في العمل.

هناك أدوات أخرى تستطيع استخدامها ليكون دليلك أكثر تنظيمًا. مثل KSS و Hologram. كلاهما تستخدم التعليقات أو إطار العمل YAML-المعتمد على الـ CSS-أو غيرها من مصادر التوثيق وتدمجها مع أشياء أخرى مثل لغة الـ Ruby لإنشاء دليل الأنماط تلقائيًا. قد تحتاج هذه الأدوات إلى بعض الجهد لتعديل ملف الـ CSS بالتعليقات أو بمكونات الـ YAML المناسبة لمحتويات دليل الأنماط، ولكن إذا رغبت في اختصار الكثير من الوقت، فهذه الأدوات تجعل عملية الصيانة سهلة. إضافة إلى ذلك فمجموعة " A List Apart" وضعت مكتبة نموذج (pattern library) خاص بها على موقع GitHub وخصصت لها مقالًا على مدونتها.

استخدام الدليل

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

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

يمكنك تنزيل دليل شركة Editorially من GitHub أو من هنا، اطلع عليه واعرف كيف يمكنك أن تنشئ دليل نمط تستطيع أن تعمل عليه مع بقية أعضاء الفريق.

هل أنت مقتنع؟ هل ترغب في الحصول على دليل نمط لموقعك أو لتطبيقك؟ سيكون تتويجًا جيدا للمجهود الكبير: حدد الوقت، واجمع الفريق، وابدأ ببناء الدليل-وتوِّج العمل بتوثيق يسهِّل مناقشة وتطوير موقعك.

ترجمة -وبتصرّف- للمقال Creating Style Guides لصاحبته Susan Robertson.