أشرطة التمرير هي عناصر تحكم تسمح للمستخدمين بالتمرير عبر محتويات صفحة الويب. ومع ذلك ، غالبا ما تبدو أشرطة التمرير القياسية مملة ولا تتطابق مع تصميم الموقع. لجعل شريط التمرير أكثر جاذبية واتساقا مع بقية الواجهة ، يمكننا استخدام كس.
تغيير مظهر شريط التمرير باستخدام كس هو وسيلة سهلة وفعالة لتحسين التجربة البصرية للمستخدمين. هناك العديد من خصائص كس التي تسمح لك لتخصيص شريط التمرير ، مثل شريط التمرير العرض ، شريط التمرير اللون و شريط التمرير المسار اللون.
لتغيير شريط التمرير على موقعك ، ستحتاج إلى بعض مهارات كس الأساسية. في هذا الدليل خطوة بخطوة ، سنوضح لك كيفية تغيير شريط التمرير باستخدام كس بحيث يمكنك إنشاء تصميم فريد وجذاب لموقع الويب الخاص بك.
تتمثل الخطوة الأولى في تحديد أنماط شريط التمرير باستخدام خصائص عرض شريط التمرير ولون شريط التمرير. بعد ذلك ، يمكنك ضبط لون وشكل شريط التمرير ، وكذلك لون شريط التمرير عند تحريك مؤشر الماوس.
- التثبيت والمبادئ الأساسية
- تغيير لون شريط التمرير
- تغيير حجم شريط التمرير
- إضافة شريط التمرير
- تخصيص الأسهم والأزرار
- سؤال وجواب
- لماذا أحتاج إلى تغيير شريط التمرير باستخدام المغلق?
- ما خصائص المغلق يمكنني تغيير في شريط التمرير?
- كيف يمكنني إضافة صورة كخلفية شريط التمرير?
- كيف يمكنني تغيير لون شريط التمرير المنزلق?
- هل من الممكن تغيير شريط التمرير فقط على صفحة معينة?
- المتصفحات التي تدعم تغيير شريط التمرير باستخدام المغلق?
التثبيت والمبادئ الأساسية
وسوف يستغرق عدة خطوات لتغيير شريط التمرير باستخدام كس. هذا النهج يسمح لك لجعل شريط التمرير أكثر عصرية وفريدة من نوعها ، ومناسبة للتصميم العام لموقع الويب الخاص بك.
- (لمتصفحات الويب الأخرى).
- قم بتطبيق الأنماط الضرورية على شريط التمرير ، مثل لون الخلفية ولون شريط التمرير ولون شريط التمرير.
- حدد حجم وشكل شريط التمرير وأضف التأثيرات اللازمة عند التمرير أو التمرير.
- .
من المهم ملاحظة أن دعم تغيير شريط التمرير باستخدام كس قد يختلف في متصفحات الويب المختلفة. قد لا تدعم بعض الإصدارات القديمة من المتصفحات ، وكذلك متصفحات الجوال ، هذه الوظيفة. لذلك ، قبل استخدام هذا الأسلوب ، يوصى بالتحقق من أدائه على الأجهزة والمتصفحات المختلفة.
نموذج التعليمات البرمجية لتغيير شريط التمرير باستخدام كس:
::- بكت-شريط التمرير {
العرض: 8 بكسل ؛ / * عرض شريط التمرير */
}
::- بكت-شريط التمرير-المسار {
لون الخلفية: # إف 1 إف 1 إف 1 ؛ / * تتبع لون الخلفية */
}
::- بكت-شريط التمرير-الإبهام {
لون الخلفية: #888 ؛ / * لون المنزلق */
}
::- بكت-شريط التمرير-الإبهام: تحوم {
لون الخلفية: #555 ؛ / * تحوم اللون المتزلج */
}
يمكنك تجربة خصائص وقيم ألوان مختلفة لتحقيق المظهر المطلوب لشريط التمرير على موقع الويب الخاص بك.
تغيير لون شريط التمرير
، مما يسمح لك بتغيير لون شريط التمرير وخلفية شريط التمرير.
يأخذ قيمتين: القيمة الأولى تحدد لون شريط التمرير ، والقيمة الثانية تحدد لون خلفية شريط التمرير. فيما يلي مثال على استخدام هذه الخاصية:
/ * مثال على استخدام خاصية شريط التمرير-اللون *// * وضع لون شريط التمرير رغبا (255 ، 0 ، 0 ، 0.5) ولون الخلفية # سك */
شعبة::-بكت-شريط التمرير {
شريط التمرير-اللون: رغبا(255, 0, 0, 0.5) # سك;
}
في المثال أعلاه ، يتم تعيين لون شريط التمرير إلى أحمر شفاف (رغبا(255, 0, 0, 0.5)), ولون الخلفية من شريط التمرير هو الرمادي (#سك).
. أدناه مثال:
/ * مثال على استخدام خاصية شريط التمرير-الإبهام-اللون *// * تحديد لون شريط التمرير */
شعبة::-بكت-شريط التمرير-الإبهام {
لون الخلفية: رغبا (0 ، 0 ، 255 ، 0.5);
}
/ * مثال على استخدام خاصية شريط التمرير-المسار-اللون */
/ * تحديد لون الخلفية من شريط التمرير */
شعبة::-بكت-شريط التمرير-المسار {
لون الخلفية: # سك;
}
في المثال أعلاه ، يتم تعيين لون شريط التمرير إلى الأزرق الشفاف (رغبا(0, 0, 255, 0.5)), ولون الخلفية من شريط التمرير هو الرمادي (#سك).
مع البادئات المقابلة.
تغيير حجم شريط التمرير
كس لديه القدرة على تخصيص أحجام العناصر المختلفة ، بما في ذلك شريط التمرير. شريط التمرير هو عنصر تحكم يسمح لك بالتمرير عبر كتل طويلة من النص أو الصفحات.
باستخدام خصائص كس ، يمكنك تغيير عرض وارتفاع شريط التمرير لتتناسب بشكل أفضل مع تصميم صفحة الويب.
. هذه الفئة الزائفة يسمح لك لتخصيص أنماط شريط التمرير في متصفحات الويب باستخدام محرك بكت ، مثل كروم وسفاري.
لتغيير عرض وارتفاع شريط التمرير ، يجب عليك استخدام الخصائص المناسبة:
- - يحدد عرض شريط التمرير;
- - يحدد ارتفاع شريط التمرير.
مثال على استخدام كس لتغيير حجم شريط التمرير:
/ * مثال على تصميم شريط التمرير */
::- بكت-شريط التمرير {
العرض: 10 بكسل;
الارتفاع: 100 بكسل;
}
في هذا المثال ، يتم تعيين عرض شريط التمرير إلى 10 بكسل ، ويتم تعيين الارتفاع إلى 100 بكسل.
تجدر الإشارة إلى أنه لسوء الحظ ، لا تنطبق الخصائص القياسية لتغيير عرض وارتفاع شريط التمرير في جميع متصفحات الويب وعلى جميع الأنظمة الأساسية. تقدم بعض المتصفحات طرقها الخاصة لتغيير أنماط شريط التمرير. لتغطية كامل المتصفحات والأنظمة الأساسية المختلفة ، بما في ذلك فايرفوكس وحافة ، سيكون لديك لاستخدام بنيات كس مختلفة.
وبالتالي ، فإن تغيير حجم شريط التمرير باستخدام كس يجعل من الممكن تكييفه بصريا مع تصميم موقع الويب الخاص بك.
إضافة شريط التمرير
غالبا ما تتطلب صفحات الويب التي تحتوي على كمية كبيرة من المحتوى إضافة شريط تمرير حتى يتمكن المستخدمون من رؤية كل المحتوى والتفاعل معه. عندما يتجاوز محتوى الصفحة حدود إطار العرض ، تظهر أشرطة التمرير الرأسية و/أو الأفقية ، مما يسمح لك بتمرير الصفحة في الاتجاه المطلوب.
يعرض دائما أشرطة التمرير ، بغض النظر عن حجم المحتوى.
يوجد أدناه نموذج رمز يوضح كيفية إضافة شريط تمرير عموديا فقط:
محتوى الصفحة...
محتوى الصفحة...
محتوى الصفحة...
المغلق:
.للتمرير-المحتوى {
تجاوز ذ: تلقائي;
في المثال المعطى ، إذا كان ارتفاع المحتوى داخل الكتلة
عن طريق القياس ، يمكنك إضافة شريط تمرير أفقي باستخدام الخاصية
تجاوز-س
.
تخصيص الأسهم والأزرار
- بالإضافة إلى تغيير مظهر شريط التمرير ، يمكنك أيضا تخصيص مظهر الأسهم والأزرار التي تظهر في نهاية شريط التمرير للتحرك لأعلى أو لأسفل. يتيح لك ذلك تخصيص شريط التمرير بالكامل وفقا لتصميم موقعك.
- لتخصيص الأسهم وأزرار شريط التمرير ، يمكنك استخدام العناصر الزائفة::-بكت-شريط التمرير-زر و::-بكت-شريط التمرير-المسار قطعة. فيما يلي أمثلة على الاستخدام:
لتغيير مظهر الأسهم ، استخدم العنصر الزائف:: - بكت-شريط التمرير-زر وتعيين خصائص كس اللازمة ، مثل الخلفية والحدود والأبعاد.
لتغيير مظهر الأزرار ، استخدم العنصر الزائف::-بكت-شريط التمرير-المسار قطعة وتعيين خصائص كس اللازمة مثل الخلفية والحدود والأبعاد.
هنا مثال على التعليمات البرمجية لتخصيص الأسهم وأزرار التمرير:
::- بكت-شريط التمرير-زر {
لون الخلفية: # 333;
الحدود: 2 بكسل صلب # 333;
الارتفاع: 20 بكسل;
العرض: 20 بكسل;
}
::- بكت-شريط التمرير-المسار-قطعة {
لون الخلفية: #555;
الحدود: 2 بكسل صلب #555;
الارتفاع: 40 بكسل;
العرض: 40 بكسل;
}
يمكنك تغيير الألوان والحدود والأحجام لتتناسب مع التصميم الخاص بك. ومع ذلك ، تأكد من أن خصائص كس التي تستخدمها مدعومة من قبل متصفح الويب الذي ستستخدمه.
لا تنس إضافة بادئات لمتصفحات الويب بحيث تعمل التعليمات البرمجية الخاصة بك في متصفحات مختلفة:
::- بكت-شريط التمرير-زر {
/ * رمز نمط السهم */
}
::- موز-شريط التمرير-زر {
/ * رمز نمط السهم */
}
::- السيدة-شريط التمرير - زر {
/ * رمز نمط السهم */
}
ومع ذلك ، ضع في اعتبارك أن استخدام مثل هذه التخصيصات لشريط التمرير يمكن أن يغير مظهره تماما على الأجهزة ومتصفحات الويب المختلفة. لذلك ، يوصى باختبار التعليمات البرمجية الخاصة بك على أجهزة ومتصفحات مختلفة للتأكد من أنها تعمل بشكل صحيح.
سؤال وجواب
لماذا أحتاج إلى تغيير شريط التمرير باستخدام المغلق?
تغيير شريط التمرير باستخدام كس يسمح لك لإعطاء الموقع شخصية ومظهر فريد من نوعه. يمكن أن يكون هذا مفيدا إذا كنت ترغب في إنشاء نمط فريد لموقعك أو جذب انتباه المستخدمين إلى عناصر معينة على الصفحة.
ما خصائص المغلق يمكنني تغيير في شريط التمرير?
باستخدام كس ، يمكنك تغيير خصائص شريط التمرير مثل لون الخلفية ولون شريط التمرير وحجم شريط التمرير ونصف قطر الحدود وصورة الخلفية وغيرها. كل هذا يسمح لك بإنشاء تصميم شريط تمرير فريد وأنيق.
كيف يمكنني إضافة صورة كخلفية شريط التمرير?
لإضافة صورة كخلفية لشريط التمرير ، استخدم خاصية صورة الخلفية. تحتاج إلى تحديد المسار إلى الصورة وضبط الخصائص الأخرى ، مثل الحجم والموضع ، بحيث يتم عرض الصورة بشكل صحيح.
كيف يمكنني تغيير لون شريط التمرير المنزلق?
لتغيير لون شريط التمرير ، يمكنك استخدام خاصية لون شريط التمرير. فإنه يأخذ قيمتين: لون شريط التمرير ولون الخلفية من شريط التمرير. من خلال تعيين القيم المطلوبة ، يمكنك تغيير لون شريط التمرير حسب رغبتك.
هل من الممكن تغيير شريط التمرير فقط على صفحة معينة?
نعم ، هذا ممكن. يمكنك إضافة أنماط لشريط التمرير فقط على صفحة معينة عن طريق إضافتها إلى الكتلة المناسبة أو إنشاء فئة معينة. بهذه الطريقة ستتمكن من تطبيق التغييرات على هذه الصفحة فقط دون التأثير على أجزاء أخرى من موقعك.