| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #27, ФЕВРАЛЬ 2003 г. |
CSS - средство для создания лучших сайтов
Леха ББ aka Alexys
Спецвыпуск Xakep, номер #027, стр. 027-032-4
Кроме обычного изменения вида ссылок при наведении, можно заодно добавить изменение курсора с привычной всем лапой на "часы зависания" или другой курсор, а также сделать всплывающие подсказки (правда в нетскейпе 100 пудов не работает изменение курсора, а подсказки всплывают только для картинок).
<a href="http://www.xakep.ru" style="cursor:sw-resize" title="сайт журнала ХАКЕР">www.xakep.ru</a>
Вместо курсора sw-resze можно вставить другой:
crosshair - прицел;
hand - щупальца;
text - как в текстовом редакторе;
help - вопросительный знак;
wait - висим;
e-resize, ne-resize, nw-resize, n-resize, w-resize - стрелки в противоположные стороны в различных направлениях.
Изменение скроллбара броузера
Переопредели с помощью CSS свойства тэга <body>, и тогда сможешь добиться изменения стандартного вида скроллбара. Если правильно раскрасить скроллбар, т.е. вписать расцветку в дизайн, то тогда даже броузер станет частью дизайна сайта.
<style type="text/css">
body
{
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #FF9900;
scrollbar-darkshadow-color: #333333;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #CCCCCC;
}
</style>
"Не слишком ли много составных частей скроллбара?" - спросишь ты. На самом деле, наиболее заметными являются scrollbar-face-color, scrollbar-arrow-color и scrollbar-track-color. Остальные же не сильно влияют на внешний вид скроллбара.
Один умелец сделал на сайте http://www.remstroy-dm.ru/ при помощи JS и CSS появляющийся только при наведении скроллбар. Забавно получается, зайдет так чайник на сайт, а скроллбара нету. Сразу там мысли о вирусах и хакерах, боится :). А подведя мышу на место, обнаруживает его. Вот радости-то :).
Разные CSS-ники под разные разрешения
Обычно при создании сайта выбирают, под какое разрешение его клепать. Но можно ведь сделать его и резиновым, а размеры шрифтов сделать так, что они под разными разрешениями будут смотреться примерно одинаково. Для этого надо сделать css-ники под разные разрешения и как-нибудь определить разрешение. Можно, конечно, сделать по-ламерски: повесить для выбора разрешения на странице 2 кнопочки - на одной написать "800х600 и менее", на другой - "1024х768 и более", и ожидать правильного ответа от зашедшего. А вдруг у него знаний о разрешении еще меньше, чем у тебя будет :)? Как бы там ни было, не стоит уподобляться ламероподобным. Маленькая помощь от Java Script'а, и нет никаких проблем с определением разрешения. А заодно можно и CSS-ник сразу нужный загрузить.
<script language="JavaScript" type="text/javascript">
<!-- //
if ((screen.width <= 800) && (screen.height <= 600))
var resol = 800
else if ((screen.width >= 1024) && (screen.height >= 768))
var resol = 1024
document.write ('<link rel="stylesheet" href="/' + resol + '.css">')
// -->
</script>
Для пользования скриптиком обзови один css-ник - "800.css", а 2-ой - "1024.css", которые должны лежать в корневой директории html-страниц (на разных серваках по-разному - WWW, html и т.п.). Пусть броузер сам определяет разрешение каждого пришедшего, а ты займись более важными делами - распитием пива, встречами с девушками... сам придумаешь, чем, не все же меня слушать :).