Оформление заголовка
Теперь можно заняться заголовком. Во-первых, нужно задать его ширину и высоту, причем первую мы зададим в процентах, чтобы она могла изменяться вместе с шириной окна броузера:
width: 90%; height: 100рх;
Эти значения мы определяем для класса hdr. Значение height выбираем с таким расчетом, чтобы осталось еще немного пространства сверху от остальных блоков нашей веб-странички. Далее для заголовка лучше назначить шрифт покрупнее:
font-size: 6Орх;
Кроме того, будет лучше, если шрифт заголовка будет контрастен относительно всех остальных шрифтов. Выберем какую-нибудь необычную гарнитуру:
font-family: OdessaScriptFWF;
Однако, указывая в явном виде название гарнитуры шрифта, следует предусмотреть случай, когда на компьютере пользователя этого шрифта не окажется. Для этого можно определить (через запятую) еще несколько вариантов начертания шрифта в порядке убывания предпочтительности. Последним обязательно укажите начертание из стандартного набора (serif, sans-serif, cursive, fantasy, monospace). В данном случае нам нужен необычный шрифт, поэтому укажем значение fantasy:
font-family: OdessaScriptFWF, fantasy;
Теперь расставим буквы немного пошире с помощью уже знакомого нам свойства letter-spacing, а также определим высоту строки, равной высоте нашего блока:
letter-spacing: 0.05em; line-height: 100рх;
font-weight: 900;
Как видите, мы определили здесь максимально возможную жирность шрифта. Теперь определим цвет текста, сочетающийся с цветом фона:
color: #3163CE;
Далее, мы хотели нарисовать рамку вокруг заголовка. Определим ее свойства, используя сокращенную запись:
border: 10рх outset #003163;
В этой записи определены сразу три свойства: border-width, border-style и border-color. В некоторых случаях допустимо подобное объединение значений нескольких свойств в одну строку. Это можно написать быстрее, хотя и менее наглядно.
В принципе заголовок готов. Давайте только добавим к нему еще визуальный эффект с помощью свойства filter. Это работает, правда, только в броузере Internet Explorer и отсутствует в спецификациях CSS, однако смотрится очень красиво. Можно применить это свойство, например, так:
filter: shadow;
В результате наш блок будет отбрасывать тень. Существуют такие значения свойства filter, как dropshadow (другой тип тени), blur (размытие), wave (отражение в волне) и прочие.
