Рассылка www.vns.ru
№3 29 марта 2002 г.
Web-дизайн от А до Я
в выпуске:
CSS: меняем scrollbar
Основы CSS
интересные ресурсы
авторам
 
для дизайнера:
CorelDRAW
Macromedia Flash
MS Front Page
Dreamweaver
PhotoShop
Литература
Шрифты
Программы


Здравствуйте!

Вышел второй номер журнала WMaster. Узнать подробности и скачать журнал можно здесь.

CSS: меняем scrollbar


В 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


Всплывающая подсказка, изменение курсора в 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


[ к содержанию ]

Интересные ресурсы


Zona5.al.RU - Всё о Macromedia Flash - уроки, исходники, статьи...
Andrey.nnov.Ru - Алгоритмы, статьи, книги, faq и многое другое.


Сюда может попасть любой желающий. Послать заявку...
Авторам

Вы хотите, чтобы ваши статьи были опубликованы на сервере VNS.ru? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.

http://www.vns.ru

ведущий рассылки: Павел