Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 20. Перемещение полосы прокрутки
Не нравится(-) 15 Нравится(+)
18-07-2008, 01:02 - GZ Design (Уроки CSS)
Урок CSS 20. Перемещение полосы прокрутки

Здравствуйте уважаемые посетители! Сегодня, мы с вами поговорим о способе переместить вертикальную полосу прокрутки на левый край блока, что может быть оправданным и достаточно эффектным дизайнерским решением.
Сразу скажу, что не все браузеры поддерживают эксперименты с полосами прокрутки. Mozilla Firefox - не поддерживает никаких изменений полос. Многие дизайнеры и верстальщики рассчитывали, что эта крайне неприятная особенность будет устранена в 3-й версии, но этого не произошло...
Итак, начнём наш урок...
Для принципа оформления полосы прокрутки, мы взяли цветовую гамму из урока №10. Теперь переместим полосу.
По традиции, создаём 2 файла: index.html и style.css. В код веб-страницы запишем стандартное начало:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Теперь нам надо создать сам блок с прокруткой и закрыть файл:
<div id="all">
<div dir="ltr">
Российская школа CSS. Урок CSS №20.
</div>
</div>
</body>
</html>

Вот и всё. Дальше, нам предстоят работы только с CSS. Запишем туда общие стили для полос прокрутки:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №20 Перемещение полосы прокрутки
style.css - Набор стилей для урока
=============================================================
*/
html, body {
    scrollbar-3dlight-color:#0d64ad; /* Задание цвета верхней и левой границ полосы прокрутки, стрелок и бегунка */
    scrollbar-arrow-color:#fff; /* Задание цвета стрелок */
    scrollbar-base-color:#003c6e; /* Задание основного цвета полос */
    scrollbar-darkshadow-color:#000; /* Задание цвета тени от стрелок и бегунка */
    scrollbar-face-color:#175488; /* Задание цвета центральной части бегунка и полос прокрутки */
    scrollbar-track-color:#3b8cd0; /* Задание цвета свободного места полос прокрутки */
}

Готово. Теперь сформируем блок и перенесём его полосу прокрутки на левую сторону:
#all {
    direction:rtl;
    width:300px;
    height:100px;
    overflow:auto;
    padding:10px;
    border:1px solid #ffc000;
    background:#2c6eb1;
    color:#fff;
}

Итак, если всё сделано правильно и Вы не используете браузер Mozilla Firefox, то должно получиться примерно так:
Урок CSS 20. Перемещение полосы прокрутки

Вот и всё. Желаю Вам удачно поэкспериментировать!
Спасибо за внимание!



Совместимость: Internet Explorer 6 - 7; Opera 8.хх - 9.xx.
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0.86 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 19277 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!