بسم الله الرحمن الرحيم
درسنا اليوم هو كيفيه تلوين السكرول بار ( شريط تحريك الصفحه ) لمتصفح الزائر اثناء تصفحه موقعك
الدرس سهل جدا ولكنه يحتاج الى قليل من التركيز
اولا يتم ذلك من خلال تقنيه الانماط المتعاقبه ( CSS ) وهذه التقنيه توفر لنا خيارين لعمل ذلك وهما :
* زرع اوامر CSS في نفس الصفحه التى يتم استعراضها من قبل الزائر وذلك بين واصفتي هيدر ( head) في شفره الـ html للصفحة .
* او جلب ملف خارجي الىالصفحه بامتداد CSS يتم وضع الاوامر به وهو الخيار الافضل طبعا .
سوف اشرح الطريقتين .. ولكن دعونا نتعرف على اوامر الـ CSS التى نحتاجها لعمل التلوين للسكرول بار ..
هذه هي الاوامر كما هو موضح بالشفره التالية :
SCROLLBAR-FACE-COLOR: #2a5f89; // لون مزلاق الشريط
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953; // لون الاضاءه على حافة مزلاق الشريط
SCROLLBAR-SHADOW-COLOR: #1A3953; // لون الظل على مزلاق الشريط
SCROLLBAR-3DLIGHT-COLOR: #2a5f89; // لون الاضاءه على مزلاق الشريط لجعله ثلاثي الابعاد
SCROLLBAR-ARROW-COLOR: #e27c00; // لون الاسهم في المزلاق
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89; // لون ظل المزلاق على ميناء الشريط
SCROLLBAR-TRACK-COLOR: #2a5f89; // لون ارضية او ميناء الشريط
كل ما عليك هو تغيير ارقام الالوان لما يناسبك في كل امر
الان ناتي لكيفيه استخدام الكود في موقعنا حسب الطريقتين انفتا الذكر :
اولا : زرع اوامر CSS في شفر الـ HTML للصفحه ويتم ذلك باستخدام الكود التالي :
<style type = "text/css">
هنا سيتم ادراج اوامر css
التى قمنا بشرحها اعلاه
</style>
ماهي وظيفه هذه الشفره ؟؟؟
وظيفتها هو اعلام المتصفح بان ما هو مدرج بينها هي اوامر css لكي يقوم المتصفح بترجمتها وتطبيق الوظائف التى طلبناها من خلال تقنيه الانماط المتعاقيه ( css )
حسناً الان دعونا نلقي نظره على شكل الكود كاملاً ومكان زرعه في الصفحه
سيصبح الكود بهذا الشكل بعد زرعه في شفره الـ html في الصفحة :
لمن اراد استخدام هذه الطريقه وضعت له جميع الاوامر بالملف المرفق قم بتحميله واتبع التعليمات المذكورة بداخله
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<!-- ATHCO GRAPHICS www.athco.com.sa -->
<meta http-equiv="Content-Language" content="ar-sa">
<title>اسم الصفحة</title>
<!-- بداية الكود -->
<style type = "text/css">
body {
SCROLLBAR-FACE-COLOR: #2a5f89;
SCROLLBAR-HIGHLIGHT-COLOR: #1A3953;
SCROLLBAR-SHADOW-COLOR: #1A3953;
SCROLLBAR-3DLIGHT-COLOR: #2a5f89;
SCROLLBAR-ARROW-COLOR: #e27c00;
SCROLLBAR-DARKSHADOW-COLOR: #2a5f89;
SCROLLBAR-TRACK-COLOR: #2a5f89;
}
</style>
<!-- نهاية الكود -->
</head>
يتبع شرح طريقه جلب ملف خارجي يحتوي على اوامر css
:funny:
