حتما داخل سایت جیمیل دیدین که از یک اسکرول بار تقریبا خاکستری استفاده می کنه که ظاهر زیبا و ساده ای به سایت داده است.امروز شبیه این کد استایل اسکرول بار جیمیل برای مرورگرهای webkit رو براتون داخل سایت قرار دادیم تا ازش استفاده کنید.در انتهای نوشته هم فایل ضمیمه برای دانلود آماده کردیم.

کد استایل اسکرول بار جیمیل

اسکرول بار (scrollbar) چیست ؟

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

وب کیت (webkit) چیست ؟

طبق تعریف ویکی پدیا ، وب‌کیت (WebKit)‏  یک موتور چیدمان است که امکان نمایش دادن صفحه‌های وب را برای یک مرورگر وب فراهم می‌آورد.به زبون خودمونی وب کیت موتوری هستش که مرورگرها با اون کار می کنند تا صفحات وب سایت ها رو نشون ما بدند.

چه مرورگرهایی webkit هستند ؟

دو مرور گر معروف گوگل کروم و سافاری (safari) از موتور وب کیت استفاده می کنند برای همین کدهای زیر رو اگر در قالبتون قرار بدید فقط در این ۲ مرورگر به صورت پیشفرض اجرا می شوند ولی تداخلی و اشکالی برای مرورگر های دیگه بوجود نمیارد.(در مطالب گذشته سایت ۱۰ نکته و ترفند برای گوگل کروم قرار داده بودیم ) .

کد استایل اسکرول بار جیمیل برای مرورگرهای webkit

کد زیر را باید به فایل شیوه نامه (style.css) قالب خودتون اضافه کنید ، مکانش هم فرق نداره و بهتره به ابتدا یا انتها کدها اضافه کنید.بعضی اوقات ممکن هستش که قالب اصلا فایل استایل نداشته باشه که شیوه نامه ها ما بین دو تگ باز و بسته <head> و <head/> قرار دارند ، شما باید مثل سابق کدها رو به انتها اضافه کنید.


/******   Gmail style scrollbar  www.doctorwp.com  *********/
::-webkit-scrollbar {
 width: 12px
}
::-webkit-scrollbar-thumb {
 border-width: 1px 1px 1px 2px
}
::-webkit-scrollbar-track {
 border-width: 0
}
::-webkit-scrollbar {
 height: 16px;
 overflow: visible;
 width: 16px;
}
::-webkit-scrollbar-button {
 height: 0;
 width: 0;
}
::-webkit-scrollbar-track {
 background-clip: padding-box;
 border: solid transparent;
 border-width: 0 0 0 4px;
}
::-webkit-scrollbar-track:horizontal {
 border-width: 4px 0 0
}
::-webkit-scrollbar-track:hover {
 background-color: rgba(220,172,0,.05);
 box-shadow: inset 1px 0 0 rgba(220,172,0,.1);
}
::-webkit-scrollbar-track:horizontal:hover {
 box-shadow: inset 0 1px 0 rgba(220,172,0,.1)
}
::-webkit-scrollbar-track:active {
 background-color: rgba(220,172,0,.05);
 box-shadow: inset 1px 0 0 rgba(220,172,0,.14),inset -1px 0 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-track:horizontal:active {
 box-shadow: inset 0 1px 0 rgba(220,172,0,.14),inset 0 -1px 0 rgba(220,172,0,.07)
}
::-webkit-scrollbar-thumb {
 background-color: rgba(220,172,0,.2);
 background-clip: padding-box;
 border: solid transparent;
 border-width: 1px 1px 1px 6px;
 min-height: 28px;
 padding: 100px 0 0;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.1),inset 0 -1px 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb:horizontal {
 border-width: 6px 1px 1px;
 padding: 0 0 0 100px;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.1),inset -1px 0 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb:hover {
 background-color: rgba(220,172,0,.4);
 box-shadow: inset 1px 1px 1px rgba(220,172,0,.25);
}
::-webkit-scrollbar-thumb:active {
 background-color: rgba(220,172,0,0.5);
 box-shadow: inset 1px 1px 3px rgba(220,172,0,0.35);
}
::-webkit-scrollbar-track {
 border-width: 0 1px 0 6px
}
::-webkit-scrollbar-track:horizontal {
 border-width: 6px 0 1px
}
::-webkit-scrollbar-track:hover {
 background-color: rgba(220,172,0,.035);
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.14),inset -1px -1px 0 rgba(220,172,0,.07);
}
::-webkit-scrollbar-thumb {
 border-width: 0 1px 0 6px
}
::-webkit-scrollbar-thumb:horizontal {
 border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
 background: transparent
}
body::-webkit-scrollbar-track-piece {
 background-clip: padding-box;
 background-color: #f5f5f5;
 border: solid #fff;
 border-width: 0 0 0 3px;
 box-shadow: inset 1px 0 0 rgba(220,172,0,.14),inset -1px 0 0 rgba(220,172,0,.07);
}
body::-webkit-scrollbar-track-piece:horizontal {
 border-width: 3px 0 0;
 box-shadow: inset 0 1px 0 rgba(220,172,0,.14),inset 0 -1px 0 rgba(220,172,0,.07);
}
body::-webkit-scrollbar-thumb {
 border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
 border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
 background-clip: padding-box;
 background-color: #f5f5f5;
 border: solid #fff;
 border-width: 3px 0 0 3px;
 box-shadow: inset 1px 1px 0 rgba(220,172,0,.14);
}

دمو و دانلود کدهای اسکرول بار جیمیل

مشاهده دمو اسکرول بار

دانلود کدها و فایل ضمیمه

رمز فایل زیپ : www.picor.ir ( آدرس قدیم سایت بودش ! )

 

منبع انگلیسی آموزش و کدها

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 3 رای
Loading...