Облегчая себе верстку.
Всем нам давно известно, что каждый браузер имеет свои дефолтные значения CSS для многих объектов, таких как, скажем, список, параграф, границы и тому подобное (подробнее, например, тут). Для того, чтобы верстать действительно кроссбраузерно нам необходимо сбросить стандартные значения на некий общий знаменатель, а потом прописать все заново.
Некий сознательный гражданин Эрик Майер предложил следующую версию стилей для обнуления всех значений:
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
}
/* Не забываем описать стили для :focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Для таблиц все еще надо прописывать ‘cellspacing=”0″‘ в коде */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
В принципе, само по себе это правило достаточно хорошо за парой исключений. А именно – спорным является убирание рамки для псевдокласса :focus (это который рисует рамку вокруг нажатых ссылок), так как такими ссылками нельзя будет управлять с клавиатуры, нельзя будет понять, что они в данный момент в фокусе. Также спорным выглядит использование парных кавычек “”, так как в русской типографике используются обычно кавычки елочки «», вызываемые кодами « и »
Правильное обнуление значений зачастую позволяет избежать использования CSS-хаков, о которых мы поговорим в следующий раз.
Красивое выпадающее меню. Полупрозрачное и с тенью.
Вот такое:
Нравится?:-) Научить, как делать нечто подобное? Устраивайтесь поудобнее, мы начинаем.
Начать следует с того, что сейчас большинство выпадающих меню (как горизонтальных, так и вертикальных) делают из несортированных списков (тег <ul> (сокращение от unordered list)). В совокупности с свойствами display:none и display:block (последнее для псевдокласса :hover, хотя, можно сделать и так, чтобы пункты меню прятались при наведении на них курсора мыши, да) получаются красивые и динамичные менюшки.
В данном меню html код выглядит так:
<ul>
<li><a href=”#”>Главная</a></li>
<li><a href=”#”>О нас</a>
<div id=”shad2″>
<ul>
<li><a href=”#”>История</a></li>
<li><a href=”#”>Команда</a></li>
<li><a href=”#”>Офис</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Услуги</a>
<div id=”shad1″>
<ul>
<li><a href=”#”>Веб-дизайн</a></li>
<li><a href=”#”>Интернет</a></li>
<li><a href=”#”>Хостинг</a></li>
<li><a href=”#”>Доменные имена</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Контакты</a>
<div id=”shad3″>
<ul>
<li><a href=”#”>Телефон</a></li>
<li><a href=”#”>E-mail</a></li>
<li><a href=”#”>Почта</a></li>
</ul>
</div>
</li>
</ul>
</div>
Если посмотреть внимательно, то мы увидим, что основой меню является ненумерованный список (как я и говорил). В отдельные пунты меню вложены другие списки (это субменюшки, которые будут распахиваться при наведении курсора мыши). Оборачивающие <div id=”shade#”> нам нужны для размещения теней от меню. Тут я использовал совсем простое визуальное оформление, просто чтобы донести идею. Естественно, ваша фантазия может быть безграничной:-)
Итак, после того, как мы сделаем само меню, нам необходимо запустить страницу в браузере и замерить высоту всех блоков экранной линейкой (скачать можно тут) – это пригодится нам для построения “теней”, так как надо будет делать тень четко под размер блока.
Теперь откроем Photoshop и создадим новый файл высотой в 1 пиксель, а шириной равной ширине блоков нашего меню. Зальем его цветом и настроим прозрачность. А затем сохраним как png24 (с альфа-каналом). Это будет бэкграунд всех наших пунктов меню. Теперь создадим файлы по количеству блоков, а по ширине и высоте равные соответствующим блокам (вы ведь замерили высоту блоков?:-) ). Зальем их желаемым цветом, настроим прозрачность и мягкой стеркой дадим растушевку на краях, чтобы получились мягкие переходы. У меня вышло вот так:
Тени тоже готовы. Теперь нам осталось задать css-стили:
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}
#shad1 {
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}
#shad2 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}
#shad3 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00ff3c;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 0px;
top: 0;
display: none;
}
li div {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #229922;
font-weight: bold;
background: url(./bg.png);
padding: 5px;
border: 1px solid #00ff3c;
border-bottom: 0;
}
li:hover div {
display: block;
}
li:hover ul {
display: block;
}
Итак, по пунктам. В моей стилевой таблице для начала заданы контейнеры, которые будут вмещать тени. Потом, мы сбрасываем на всех ненумерованных списках внешние и внутренние отступы, буллеты, задаем нижнюю границу нужного цвета. Далее, мы даем всем элементам списка position:relative, чтобы список вложенный в пункт вышестоящего списка наследовал его позицию в пространстве. Затем, спискам, вложенным в вышестоящий элемент списка даюм абсолютную позицию, чтобы они не раздвигали список-родитель, и задаем им позицию относительно вмещающего элемента списка. А также скрываем их пока от любопытных глаз:-) Следующим шагом мы задаем позиционирование контейнерам div, вложенным в вышестоящий пункт списка, и тоже скрываем их (мы ведь не хотим, чтобы тени ото всех подменю постоянно мозолили нам глаза?:-) ). Настраиваем стиль ссылок. Даем отступы, границы и прописываем наш полупрозрачный фон. И, наконец, говорим браузеру, что при наведении курсора мыши на элемент списка нам хотелось бы увидеть все вложенные контейнеры. И, вуаля. Наше меню работает.
Готовый пример можно скачать, и поковырять самостоятельно. Успехов!
UPD:
А вот еще по просьбам трудящихся выкладываю вариант этой же менюшки, но горизонтального расположения. Подменю выпадают вниз.
Палки и плашки. О мусоре на странице.
Сегодня мне хотелось бы поговорить о различных декоративных элементах, излишняя любовь к которым может значительно ухудшить внешний вид макета.
Это палки и плашки.
Под палками я понимаю либо горизонтальные разделители (<HR>), которые были введены в спецификацию HTML в эпоху web1.0 (немногим позже вымирания динозавров, да-да) и предназначались для смысловой отбивки блоков текста (аналогично типографской линии, или звездочкам) друг от друга; либо css-свойство border (граница элемента), достаточно часто используемое не по назначению.
Примеры плохого использования палок:
Если на первой картинке вертикальную палку убрать совсем, а горизонтальные уменьшить раза так в четыре, картинке полегчает. А в таком виде она полна мусора.
Во второй картинке можно вообще убрать все вертикальные палки, станет только лучше. Я, честно признаться, не понимаю, зачем они там вообще, но видел и такие примеры верстки.
Почти такая же беда и с плашками:
Плашка, это элемент также предназначенный для смысловой отбивки небольшого блока текста. Применять их нужно весьма осторожно. Если увлечься, то получится ужас, показанный на картинках выше. Да-да, я и такое видел. И даже, когда-то, делал:-)
В случае первой картинки у нас огромная плашка под основным текстом давит на зрителя и приводит его в уныние. Ее можно с легким сердцем удалить, оставив только мелкую плашку под меню. Она позволяет визуально отделить меню от основного текста и акцентирует на нем внимание зрителя.
В случае второй картинки от плашек надо вообще отказаться, обыграв визуальную отбивку блоков друг от друга более плотным межстрочным интервалом (line-height) и более разреженными отступами блоков друг от друга.
Я показал всего четыре достаточно простых примера, но если вы немного подумаете, вы легко сможете сами понять в каких еще случаях палки плашки могут мешать, а в каких – наоборот, – пригодиться. При условии соблюдения правильного баланса ваши макеты всегда будут легкими и изящными.
Еще несколько трюков веб-разработки
Как-то в статье Как реализовать кнопку, не используя, собственно, кнопку? я писал о том, как сделать кнопку в 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;
}
Еще достаточно интересный трюк – оборачивание дива ссылкой. Строго говоря, такая конструкция не валидна (ссылка по умолчанию – строковый элемент, дивак – блочный), но если на этом не заморачиваться, то можно полностью отказаться от карт-изображений (ох уже эта точная подгонка активной зоны), и от таблиц (хотя само изображение можно свободно резать по количеству блоков).
————————————-
Трюк со ссылкой – показываем картинку.
Достаточно часто в процессе веб-разработки дизайнеру приходится сталкиваться с ситуацией, когда необходимо “оживить” ссылку, на которую наводится курсор. Тому, как это сделать без помощи флеша и джава-скриптов посвящен сегодняшний рассказ.
Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и Java Script мы легко можем сделать интерфейс сайта более динамичным.
Суть метода заключается в следующем: мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.
Подробный листинг (на примере “Шага за горизонт”):
HTML:
<span id=”item1″><img src=”d1.jpg” alt=”” /></span>
CSS:
a span {
display: none;
}
a:hover span {
display: inline;
position: absolute;
}
а позиционирование элементов назначается отдельно, по id:
#item1 {
left: 495px;
top: 100px;
}
Все достаточно просто, не правда ли?;-)
————————————-