تقنيات CSS - الجزء الثاني

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

المدون

عصام محيمي

تاريخ النشر

2 يناير 2016

التصنيف

البرمجة والتصميم

4إخفاء العناصر من صفحة الويب

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

خاصية display :
لنعتبر الرابط التالي ذو كلاس problogger :

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

إذن لإخفاء هذا الرابط سأستعمل الخاصية الأكثر شيوعا display:none كما يلي :

 .problogger
 {
     display: none; 
 }

وتعني عدم إظهار العنصر -أو الوسم- ذو الكلاس problogger

خاصية opacity :
تتحكم خاصية opacity في شفافية العنصر كما هو الحال في برنامج الفوتوشوب وغيره من برامج تحرير الصور. ففي لغة CSS تأخذ قيمة بين 0 و 1 وبالتالي فالقيمة 0 تعني إخفاء العنصر.
- تطبيق :
سأقوم باستدعاء صورة ثلاث مرات وفي كل حالة سأعطيها قيمة مختلفة في خاصية opacity :

 <img src="blogger.png" style="opacity: 1" />
 <img src="blogger.png" style="opacity: 0.5" />
 <img src="blogger.png" style="opacity: 0" />

- النتيجة :

كما تلاحظ، في الحالة الثالثة لم تظهر الصورة لأن قيمة الشفافية منعدمة.

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

<a class="problogger" href="http://www.th3problogger.com">محترف بلوجر
</a>

باستخدام لغة CSS سأقوم هذه المرة بتغيير موضع الرابط إلى 9999px على اليسار بالنسبة للصفحة (أو بالنسبة لعنصر أم ذو خاصية position:relative) وبالتالي سيصبح خارج حدود الشاشة.

 .problogger
 {
     position: absolute;
     left: 9999px;
 }

5تكبير الصور بعد تمرير الماوس (الزوم)

تقنية الزوم ليست جاهزة في لغة CSS لكن يمكن إنشائها باستخدام خاصيتين أساسيتين وهما ()transform:scale المسؤولة عن تكبير العنصر (صورة مثلا) و overflow:hidden التي تلعب دور الماسك يعني إخفاء جزء الصورة الخارج عن مساحتها بعد تكبيرها. الطريقة سهلة جدا ولا تحتاج أكواد كثيرة فقط ركز معي في التطبيق.
- تطبيق :
سأقوم أولا بإنشاء مساحة ذات كلاس zoom باستخدام الوسم <div> كما يلي :

<div class="zoom">

</div>

وسأطبق عليها الخصائص التالية (طول = 200px، عرض = 150px، إطار أسود بسمك 1px وخاصية الماسك)

 .zoom
 {
     width: 200px;
     height: 150px;
     border: 1px solid #000;
     overflow: hidden;
 }

بعد ذلك سأضيف صورة بداخل الوسم <div> ليصبح كود HTML كالتالي :

 <div class="zoom">
   <img src="css3.png"/>
 </div>

ثم سأطبق عليها نفس طول وعرض المساحة الأم إضافة إلى الخصائص التي ستحدث عند تمرير الماوس (hover) :

 .zoom img
 {
     width: 200px;
     height: 150px;
     transition: all 0.5s ease-in-out 0s;
 }

 .zoom img:hover
 {
     transform: scale(2);
     transition: all 0.5s ease-in-out 0s;
 }

- السطر (8) يعني تطبيق الخصائص على الصور الموجودة داخل الوسم ذو الكلاس zoom عند تمرير الماوس عليها.
- الأسطر (10) و (11) تعني تكبير الصورة مرتين في ظرف خمس أجزاء من الثانية.
- النتيجة :

6توسيط الكتابة عموديا باستخدام line-height

تستعمل خاصية line-height للتحكم في المسافة بين سطور النص، ويمكن استخدامها لتوسيط الكتابة عموديا في مساحة بأبعاد معينة (يشترط أن يكون عنوان أو سطر واحد).
- تطبيق :
مثلا أريد كتابة عنوان (ليكن محترف بلوجر) وسط مساحة ذات كلاس problogger بطول 300px وعرض 80px، إذن فكود HTML سيكون على الشكل التالي :

 <div class="problogger">محترف بلوجر</div>

الخاصية المسؤولة عن توسيط الكتابة أفقيا هي text-align:center. ولتوسيط الكتابة عموديا سأستعمل خاصية line-height وأعطيها نفس قيمة العرض (80px) كما يلي :

 .problogger
 {
     width: 300px;
     height: 80px;
     text-align:center;
     line-height: 80px;
     background: #3A4755;
     color: #fff;
     font-size: 23px;
     border-radius: 5px;
     
 }

- الأسطر (7)، (8) و (9) تعني خلفية بلون رمادي مغموق وخط أبيض بحجم 23px.

ماذا عن خاصية vertical-align:middle ؟

خاصية vertical-align:middle تعمل فعلا على توسيط الكتابة عموديا لكنها شغالة فقط على الجداول والتي أصبحت أقل أهمية في الوقت الحالي خاصة مع ظهور إطار العمل Bootstrap.

- النتيجة :

محترف بلوجر