Отправляет email-рассылки с помощью сервиса Sendsay

Веб-разработка: пособие начинающим

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
09.02.2009
23:47:44
23:56:02
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Александр Левитас

Статистика

10.726 подписчиков
-23 за неделю
←   Все выпуски   →

Веб-разработка? Это просто! Еще несколько трюков веб-разработки.


Еще несколько трюков веб-разработки.

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

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

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

a:link {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}

a:visited {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}

a:hover {
padding: 10px 8px 10px 12px;
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
border-top: 2px solid #929292;
border-left: 2px solid #929292;
background: #bbb;
}

 

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

Вы также можете посмотреть исходный текст статьи "Еще несколько трюков веб-разработки". Там же Вы можете прочитать и другие полезные статьи посвященные интересной и обширной теме "Веб-разработка".

В избранное