Здравствуйте!
Вышел второй номер
журнала WMaster. Узнать подробности и скачать
журнал можно здесь.
|
|
|
В Internet Explorer 5.5
появилась поддержка одной очень полезная
возможности CSS (каскадных таблиц стилей).
Она заключается в том, что вы можете менять
цвет всех составляющих скролл-бара (SCROLLBAR`а)
или полосы прокрутки - эта такая полосочка
с правой стороны экрана с помощью, которой
вы можете передвигать просматриваемую
страницу по вертикали, а иногда и по
горизонтали! Ближе к делу! Создаем атрибут .STYLE.
в теге .BODY. и пишем в нем следующие
атрибуты:
- .SCROLLBAR-FACE-COLOR. - устанавливает
главный цвет , которым закрашивается
полоса прокрутки и две крайние кнопочки
с треугольниками. Если вы не задаете
параметр .SCROLLBAR-TRACK-COLOR., то он
окрашивается в тот же цвет, что и .SCROLLBAR-FACE-COLOR..
- .SCROLLBAR-TRACK-COLOR. - определяет цвет
дорожки по которое катается полоса
прокрутки.
- .SCROLLBAR-ARROW-COLOR. - устанавливает цвет
треугольничков на кнопках находящихся
по краям полосы прокрутки.
- .SCROLLBAR-HIGHLIGHT-COLOR. - устанавливает цвет
подсветки (первого уровня), который
создающий эффект объёмности. Этот цвет
окаймляет освещённую часть полосы
прокрутки и кнопок. Если кнопка не
нажата цвет окаймляет левый верхний
угол и стороны между ним, когда нажата -
нижний правый угол. Эти объекты
окаймлены двумя слоями полосок (у меня
они называются уровнями). Ближнею к
центру объекта полоску я называю первым
уровнем.
- .SCROLLBAR-3DLIGHT-COLOR. - устанавливает цвет
подсветки (второго уровня).
- .SCROLLBAR-SHADOW-COLOR. - цвет тени (первого
уровня), которая тоже служит для
придания объёмности.
- .SCROLLBAR-DARKSHADOW-COLOR. - цвет тени (второго
уровня).
Для примера приведу цвета используемые на
моем сайте (полоски второго уровня я не
использую):
<body style="scrollbar-face-color: #A9A9A9;
scrollbar-highlight-color: #f3f3f3;
scrollbar-shadow-color: black;
scrollbar-arrow-color: blue;
scrollbar-track-color: #f0f0f0;">
Еще можно и использовать следующею
конструкцию между тегами .HEAD.:
<style><!--
BODY {scrollbar-face-color: #A9A9A9;
scrollbar-highlight-color: #f3f3f3;
scrollbar-shadow-color: black;
scrollbar-arrow-color: blue;
scrollbar-track-color: #f0f0f0;}
--></style>
А можно вынести атрибуты во внешний файл (например,
index.css) находящийся в данном примере в той
же папке, что и файл с примером.
В файл примера, между тегами .HEAD. пишем:
<link href="index.css" rel="stylesheet"
type="text/css">
Index.css:
BODY {scrollbar-face-color: #A9A9A9;
scrollbar-highlight-color: #f3f3f3;
scrollbar-shadow-color: black;
scrollbar-arrow-color: blue;
scrollbar-track-color: #f0f0f0;}
--></style>
Ну вот и все, что я хотел вам сегодня
рассказать, любители WEB-дизайна. Надеюсь,
что эта маленькая прибамбаса еще больше
улучшит ваш сайт.
Поярков Илья (Terabyte)
[ к содержанию ]
|
|
|
|
|
Всплывающая подсказка,
изменение курсора в CSS.
Всплывающая подсказка может "всплывать"
как у ссылок, так и у любого элемента в
броузерах, поддерживающих динамический HTML.
На формах и кнопках не пробовал, но надо и
вам что то оставить для развлечения.
Делается чрезвычайно просто, вставляем в
тэг элемента:
TITLE="подсказка"
Например:
<font size=-1 TITLE="подсказка"
>ПРОСТО СЛОВО</font>
или:
<a href="html://www.iiii" TITLE="подсказка"
>ССЫЛКА НА IIII</a>
подведите курсор к выделенным участкам,
посмотрите.
Просто, да? Теперь займемся курсором. По
умолчанию обычный курсор-стрелка
изменяется на "лапку" над ссылкой.
Больше ничего особого не заметно. Однако,
курсоров больше, чем два. С помощью стилей
можно получать нужную форму курсора над
нужным объектом, например, вопросительный
знак над "помощью". В "Эксплорере"
последних версий изменение курсора и
подсказка действуют не только с рисунками
и ссылками, но и с любым объектом. Вставляем
в тэг:
style=cursor:w-resize
Например:
<a href="html://www.iiii" TITLE="подсказка"
style=cursor:w-resize>ССЫЛКА НА IIII</a>
Как всегда, этого не понимает "Нетскейп".
Курсор не меняется, подсказки не
появляются. На любителя, так сказать... У
гениального Нетскейпа подсказка выводится
как ALT для рисуночков.
Ниже привожу виды курсоров. Подводите
мышку и смотрите
auto автоматически
устанавливается
crosshair - крест
default - по умолчанию
hand - лапка
text - текстовый курсор
help - вопросительный знак
wait - песочные часы
e-resize - разные по
направлению стрелки
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Источник: A-design studio http://mtk.on.ufanet.ru
[ к содержанию ]
|
|
|
|
|
Вы хотите, чтобы ваши статьи были опубликованы
на сервере VNS.ru? Если вы считаете,
что можете написать о дизайне, скриптам, графике и т.п., если Вам есть
что сказать и о чем рассказать, я буду рад сотрудничеству с Вами.
Присылайте свои
предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) плюс N-кол-во
читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.
|
|
|
|
|
|