НАМ 10 ЛЕТ
беЛн.бу
- Белорусский, народный портал






Реклама

Купить ссылку здесь за руб.
Поставить к себе на сайт

Реклама



Вход на портал

Для просмотра профиля, войдите на портал как пользователь.

Меню портала

Погода

GISMETEO: Погода по г.Минск
Погода в других городах

Категории раздела

Скрипты для uCoz [32]Шаблоны для uCoz [2]
Видео уроки по ucoz [0]Иконки для ucoz [0]
Кнопки для ucoz [2]Php скрипты для ucoz [0]

Полезные ссылки

Статистика портала

соц.сети

Облако тегов

Мы принимаем



ТОП РЕЙТИНГ

Скрипты (CMS) и Программы (SOFT)

Скрипты (CMS) и Программы (SOFT) » Для UCOZ » Скрипты для uCoz

Стилизация полосы прокрутки с помощью CSS

Сегодня поговорим о полосе прокрутки страниц. А точнее про ее внешний вид, который толком не меняется уже несколько десятилетий. И мне, собственно как и вам, она изрядно поднадоела. По этому мы рассмотрим возможность о ее замене на свою.

Данное решение является очень удобным, так, как здесь не задействуются JavaScript. Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.

Установка

Вставляем данный код в Таблицу стилей (CSS)

::-webkit-scrollbar-button {
background-image:url('');
background-repat:no-repeat;
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#ecedee
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}

::-webkit-scrollbar{
width: 4px;
}

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

Цвет дорожки, по которой двигается бегунок прокрутки.

Меняем ecedee на свой цвет.

::-webkit-scrollbar-track {
background-color:#ecedee
}

Цвет бегунка полосы, а так же его закругление.

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Основная ширина полосы прокрутки.

Меняем значение width

::-webkit-scrollbar{
width: 4px;
}

Пример

В качестве примера мы сделали прокрутку в таком стиле:

Установите на сайт данный скролл, просто скопировав следующий код:

 ::-webkit-scrollbar-button {
background-image:url('');
background-repat:no-repeat;
width:6px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url('http://s10.beln.by/cms_skripts/kar/01/61823.png');
background-position:center;
background-repeat:no-repeat;
}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}

::-webkit-scrollbar{
width: 11px;
}

Загрузите картинку http://s10.beln.by/cms_skripts/kar/01/61823.png себе на сайт.



Внимание!!! Скачивание файла доступно, только для групп "Пользователи", "VIP" и "Я, Online".
Категория: Скрипты для uCoz | Добавил: rinhed (14.10.2015)
Просмотров: 98 | Теги: скрипты для Ucoz, CSS, полосы, Стилизация, помощью, прокрутки
Всего комментариев: 0
Имя *:
Email:
Код *:


Внимание!
В комментариях запрещено размещать ссылки, рекламу сторонних ресурсов(сайтов). Если Вы разместили ссылку или рекламу, то комментарий будет удален автоматически.

Реклама

Корзина

Ваша корзина пуста

Переводчик

Выберите язык портала

Поиск по порталу

Поиск от яндекс

Анекдоты...

[18.12.2016][Разные]

- Благодаря телевидению стал больше читать.
- Да вы шутите!
- Нет, вполне серьёзно. Там такую херню показывают - невозможно смотреть.

(0)

Видео

00:00:10

Футаж на зеленом фоне (Балерина танцует)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни идет)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни на месте)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:14

Футаж на зеленом фоне (Винни на шарике)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:04:15

7Б - Птица RMX

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0

Получить бонус

Еще бонусы тут

Моментальный обмен WebMoney

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

Бонус

BAKSGRAD.RU
Обновить Код.