Трюки веб-дизайна
В прошлой статье про веб-дизайн я обещал вернуться к таким вопросам дизайна как резиновые колонки одинаковой высоты, закругленные углы и затемненные счетчиков. Обещание выполняю и сейчас обо всем расскажу. Опять-таки, я надеюсь, что эта статья окажется интересной не только вебмастерам, но и обычным пользователям интернета, тем, кто просто хочет лучше представлять, как устроен интернет.
В то же время, не стоит думать, что я зациклился на дизайне, и что больше вы ни о чем на этом сайте не прочитаете. Прочитаете, обещаю. Интернет многогранен, и у меня в запасе еще множество тем, о которых стоит рассказать! Так или иначе, если вас интересуют трюки, применяемые в дизайне, читаем статью дальше и комментируем!
Резиновые колонки одинаковой высоты
Речь вот о чем. Многие сайты, и мой - не исключение, располагают информацию в несколько колонок (в моем случае, сайдбар и контент). Заранее неизвестна высота этих колонок; более того, неизвестно, которая из колонок окажется длиннее - если для статьи в принципе ожидаемо, что контент займет больше места, чем сайдбар, то для какой-нибудь рубрицирующей страницы может случиться обратное - сайдбар будет длиннее. Но колонки тем не менее должны иметь одинаковую высоту, и под ними должет идти общий подвал. Как ни странно, эта на первый взгляд простая задача не имеет простого решения, и веб-дизайнеру приходится находить обходные пути. Дело в том, что есть возможность задать колонки распаложенные параллельно:
- колонки с таким стилем будут идти параллельно, если хватает ширины. Даже задача общего подвала решается - подвал в стиле должен иметь
Однако все браузеры задают колонке со стилем float высоту равную высоте ее содержимого. Никакие
не помогают. Чем это плохо? А тем что, как и у меня на сайте, вам может захотеться сделать разный фон у разных колонок. Так вот вон более короткой колонки в таком случае обрывается совершенно неожиданно. Вы могли видеть в интернете трюки с отрицательными нижними полями
margin-bottom 9999px; padding-bottom -9999px;
Я не рекомендую этот трюк использовать. Не все браузеры после него вообще отображат подвал. На самом деле, решение довольно простое. Пусть у колонок разная ширина, мы просто будем использовать повторяющийся по вертикали фоновый рисунок высотой в один пиксель. Итак, создается общий div со свойством
background-image: url('АДРЕС РИСУНКА ВЫСОТОЙ В 1 ПИКСЕЛЬ ДЛЯ ФОНА'); background-repeat: repeat-y;
В него уже помещаются описанные выше колонки и футер. Никакого хакерства, и все работает.
Закругленные углы
Еще один фокус. Дело в том, что в интернете ничего круглого нет. Нет объекта "круг", и все тут. Наилучший способ сделать углы закругленными - использовать рисунки. Если вы посмотрите на дизайн моего сайта, то увидите, что у белого фона контента углы закрыглены. С верхним закруглением все понятно, оно является частью шапки. Нижнее же закругление достигается путем использования небольшого рисунка в футере, а не в контенте, примыкающего к верхней границе футера.
Исправление, присланное мне харьковским вебмастером, автором блога интернет насквозь (кстати, рекомендую заглянуть на блог по ссылке - найдете еще много интересного про современные браузеры): css3 позволяет создать круглые углы без рисунков, но поскольку он до сих пор не является стандартом, полной кросс-браузерной совместимости вы таким способом не добьетесь. Более того, даже браузеры, поддерживающие css3, используют различный синтаксис для указания этого свойства ("-moz-border-radius" для firefox и "-webkit-border-radius" для chrome и safari).
Задымленные счетчики
Я уже писал когда-то про счетчики на сайтах, даже сделал свой счетчик любви Google. Так или иначе, мы вынуждены счетчики размещать. А когда у сайта сделан красивый дизайн, эти счетчики могут совершенно наглым образом этот дизайн нарушать. Спрятать их вообще нельзя, поэтому наилучим решением является их "задымление", если же к счетчику подводишь мышь, он тут-же проявляется во всей красе. Привожу кусок кода (content - имя div-а, содержащего счетчики):
#counters a img
{
opacity:0.3; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
-moz-opacity:0.3; /* Mozilla 1.6 */
filter:alpha(opacity=40); /* IE 5.5+*/
}
#counters a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
Остальные вопросы, наверное, будут слишком специфичны. Но если есть ощущение недосказанности, спрашивайте - постараюсь ответить!
Комментариев нет:
Отправить комментарий