روش تغییر رنگ اسکرول مرورگر در طراحی سایت

روش تغییر رنگ اسکرول مرورگر در طراحی سایت
 ۱۱ اسفند ۱۳۹۸      موضوعات: آموزش طراحی سایت مقالات 

یکی از موضوعاتی که ممکن است در سایت شما برای شما مهم باشد، اختصاصی کردن رنگ اسکرول مرورگر است. تغییر رنگ اسکرول مرورگر، قابلیت است که می توانید با استفاده از css در مرورگر های جدید انجام دهید. تمامی مرورگر های بروز همچون کروم، موزیلا، اج و … از این قابلیت پشتیبانی می کنند. با ایران وبر همراه باشید.

روش تغییر رنگ اسکرول

تغییر رنگ اسکرول به چه معنی است؟ شاید شما به وضوح متوجه نشدید که ما از چه موضوعی صحبت می کنیم. همانطور که در تصاویر پایین مشخص است شما می تونید نوار سمت چپ مطالب سایت را شخصی سازی کنید و مطابق با سایت خود طراحی نمایید.  در تصویر پایین ما اسکرول را ویرایش داده و مطابق با نظر خودمان طراحی کرده ایم.

روش تغییر رنگ اسکرول مرورگر در طراحی سایت

روش تغییر رنگ اسکرول مرورگر در طراحی سایت

نمونه کد نویسی تغییر اسکرول مروگر

همانطور که بیان شد برای تغییر اسکرول مرورگر باید استایل یا فایل css سایت خود را ویرایش کنید. به این منظور برای این که اسکرولی همانند تصویر پایین داشته باشید می توانید از این استایل استفاده کنید:

<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}

</style>

شما می توانید به راحتی هر کدام از رنگ های را تغییر دهید تا مناسب با خواست شما طراحی انجام گیرد.

شما با کد ::-webkit-scrollbar-thumb و استایل دهی به ان می توانید هندل یا دسته ی اسکرول را تغییر دهید. برای مثال الان در این این استایل رنگ ان قرمز شده و یک border-radius برای گرد کردن دکمه برای ان در نظر گرفته شده است.

بیشتر بخوانید
کد نوشتن نقل قول در html

شما می توانید همینک به همین کد ها و تغییر در آن ها ظاهر سایت خود را بهبود داده و اسکرول زیباتری داشته باشد.

با آموزش های ایران وبر همراه باشید تا قابلیت های بیشتر و تکنیک های بیشتر طراحی سایت را فراگیرید.

به این مقاله امتیاز دهید!
برچسب‌ها: , ,

 
نظر شما

آخرین مقالات و ویدئو ها
اشتباهات رایج در طراحی لوگو

یک لوگوی موفق لوگویی است که به یادماندنی ، گیرا و متناسب با برند باشد. شما باید هدف برند ، مخاطبان و صنعتی را که شرکت در آن فعالیت می کند ، در نظر بگیرید. از نظر اجرا ، باید اطمینان حاصل کنید که لوگوی شما رنگ متناسبی دارد و تایپوگرافی در آن مشخص است. […]

طراحی اپلیکیشن سالن زیبایی و آرایشی | طراحی اپ سالن زیبایی

طراحی اپلیکیشن سالن زیبایی یکی از قابلیت هایی است که به شما کمک می کند که بتوانید راحتی را به همراه امکانات مختلف برای مشتریان خود به ارمغان بیاورد. طراحی اپ سالن زیبایی به شما کمک می کند که قابلیت ها را هر کجا در دستان مشتریان خود قرار دهید و برای رزرو زمان فقط […]

رنگ مناسب برای لوگو | بررسی روانشناسی رنگ‌ها و تاثیرشان در بازاریابی

پیشتر در بحث نکات مهم در طراحی لوگو | چگونه لوگوی خوبی طراحی کنیم؟ به اهمیت رنگ لوگو اشاره کردیم. قرار شد در مقاله ای جداگانه به روانشاسی رنگ ها و تاثیر روانی آنها در بازاریابی بپردازیم. در ادامه خواهید آموخت چگونه میتوانید رنگ مناسب برای لوگو انتخاب کنید و قدم اول در جهت موفقیت […]

جالب‌ترین تبلیغ هوندا : هفت دهه خلاقیت هوندا

Honda hands یا همان “دست های” هوندا ادای احترامی به نوآوری های این شرکت در زمینه های خودرو و فناوری طی 65 سال گذشته است. این فیلم تبلیغاتی با نشان دادن دستان مردی شروع می شود که یک پیچ در دست دارد و می گوید: “خب ، بریم ببینیم کنجکاوی چه به سرمون میاره”. در […]

طراحی سایت سالن زیبایی و آرایشی : رزرو آنلاین و پرداخت آنلاین و …

طراحی سایت سالن زیبایی یکی از بخش هایی است که می تواند به سالن زیبایی شما کمک کند تا بتواند به صورت برنامه ریزی شده نوبت دهی و همچنین برندینگ را انجام دهد. در طراحی سایت سالن زیبایی قابلیت هایی مختلفی می تواند باشد که به شما کمک کند تا مشتریان خود را مدیریت کنید […]

با ما تماس بگیرید!
021-44464867
آدرس
تهران- بلوار سردار جنگل- بالاتر از تقاطع مخبری - خیابان رجایی - پلاک 36 - واحد 6