Как-то в статье Как реализовать кнопку, не используя, собственно, кнопку? я писал о том, как сделать кнопку в HTML не используя теги “input” и “button”. Метод хорош, но имеет один существенный недостаток: бэкграунд, вызываемый псевдоклассом :hover только по этому вызову и загружается. Поэтому, если мы используем достаточно большой бэкграунд, то при наведении мышки на див мы некоторое время будем видеть просто пустое место (так как старый бэкграунд исчез, а новый еще не загружен с сервера).
Чтобы этого избежать, в самом начале разметки мы создадим блок, в который поместим интересующий нас бэкграунд. Блоку этому дадим абсолютное позиционирование, и left:, скажем, -3000px, чтобы его точно никто не увидел. Теперь интересующая нас графика будет загружаться стопроцентно раньше любого действия пользователя со страницей.

Также можно сделать кнопку подобную стандартной кнопке виндоус вообще без графики:

BUTTON

Достигается это с помощью CSS:

Еще достаточно интересный трюк – оборачивание дива ссылкой. Строго говоря, такая конструкция не валидна (ссылка по умолчанию – строковый элемент, дивак – блочный), но если на этом не заморачиваться, то можно полностью отказаться от карт-изображений (ох уже эта точная подгонка активной зоны), и от таблиц (хотя само изображение можно свободно резать по количеству блоков).

————————————-

Достаточно часто в процессе веб-разработки дизайнеру приходится сталкиваться с ситуацией, когда необходимо “оживить” ссылку, на которую наводится курсор. Тому, как это сделать без помощи флеша и джава-скриптов посвящен сегодняшний рассказ.

Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и  Java Script мы легко можем сделать интерфейс сайта более динамичным.

Суть метода заключается в следующем:  мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.

Подробный листинг (на примере “Шага за горизонт”):

а позиционирование элементов назначается отдельно, по id:

Все достаточно просто, не правда ли?;-)

————————————-

Здравствуйте, мои дорогие любители дизайна. Это снова я, снова с новой (ух ты:-) ) писаниной. Восхотелось мне чего-нибудь сегодня покритиковать. Благо и претендент удачный нашелся.
Но покритиковать не просто так, а конструктивно. Предложить свое. Чтобы знали, что хозяин блога не только тявкать исподтишка и плевать на спину может (это, кстати, очень просто), а может предложить еще что-то свое.
Итак, претендент. Чтобы было понятно, о чем конкретно я веду речь – ниже будет маленькая иллюстрация (увеличивающаяся по клику):

Что мы тут, уважаемые граждане, видим? Мрак и ужас мы тут видим, помноженные еще на два мрака и ужаса. Причем, что интересно – технически грамотно (см. исходный код) выполненные мрак и ужас. Даже без таблиц.

Есть некая идея: грамотный мерчандайзинг – это очень сложно (тонкий намек в виде паззла), но мы совсем недорого возьмем решение этой проблемы на себя, и все у вас будет в лучшем виде. Это вот была идея.

А дальше начинается полная, простите, годзилла. Злая и некормленная:
– шрифты. О, эти болдовые газетные шрифты… как они меня успели достать в свое время!
– цвета. Сине-зеленая тоска.
– качество графики. За гранью бобра и козла.
– кадрирование фото. За той же самой гранью. Не надо так кадрировать фото. Я не верю, что женская грудь с бейджем символизирует собой “мерчандайзовый аудит”. Вот не верю и все. А обучение мерчандайзингу в полях…
– заголовки подразделов. Граждане, имейте совесть. У меня зрение стопроцентное, и то прочитывал с пятого раза. А у кого не стопроцентное?
– форма кусочков паззла нефункциональна. Это видно глазу, и сразу понимаешь – что нет, не справятся ребята со своей задачей. Такие кусочки не состыковать.

И ведь этот сайт должен продавать.

Короче, решил я действовать в рамках той же идеи. С паззлами. Получилось так:

В общем, я не говорю, что это идеально и суперзашибенно (будь у меня реальный заказчик – я бы долго обсуждал с ним внешний вид пиктограмм, а также сделал бы два-три варианта фона), но в целом:
– сплэшскрин приобрел более яркий и прикольный (жена подсказала – гламурный) вид;
– пиктограммки оживили страницу (и позволили избавиться от фото вообще, ибо кадрирование в таких сложных рамках – полный аллес гемахт);
– появляющиеся при ховере названия разделов реализуются легко (одним лишь CSS), а то, что они появляются и исчезают позволяет избавиться от лишней “замусоренности” страницы.

Вот как-то так. Вынимательно слушаю комментаторов.

PS: Там еще есть флешь-версия сайта, это отдельная и весьма грустная песня, которую я как-нибудь тоже перепою на новый лад.
—————————————————–

Хостинг изображений – radikal.ru

Простое и кроссбраузерное решение для создания резинового блока с фиксированными отступами:

Прошу обратить внимание, что задание position:absolute; делает div потомком уже не body, а непосрдественно окна браузера.
—————————————————–

Хостинг изображений – radikal.ru

• Для корректного позиционирования блоков с помощью z-index в Internet Explorer необходимо, чтобы один блок был родителем (или потомком) другого (вот офигенный конструктор на ASP, который позволяет поработать с позиционированием весьма наглядно);
• Для корректного отображения блока со свойством overflow:auto (скажем, вы внутри div’a собрались прокручивать какое-либо содержимое) в Internet Explorer необходимо задать блоку свойство position (relative, или absolute);
• Для того, чтобы избавиться от надоедливой рамки из точек вокруг ссылки в фокусе (скажем, в Фаерфоксе) надо пользоваться конструкцией вида:
  a:focus {outline: none;} (via diGreez).

—————————————————–

Хостинг изображений – radikal.ru