CSS - средство для создания лучших сайтов

Леха ББ aka Alexys

Спецвыпуск Xakep, номер #027, стр. 027-032-5

Кастомайзинг таблиц и надписей

Забавные фишки можно сотворить с таблицами при помощи CSS, например, быстро, качественно и недорого сделать рамку для таблицы. Для этого надо вспомнить про существование border'ов, только не табличных, а CSS'ных. Синтаксис описания бордера таков:

border (-right, -left, -bottom, -top): width color style

width - ширина border'а, color - цвет, style - способ окрашивания.

Создавая таблицу, нужно просто описать свойства, такие как ширина, цвет и способ окрашивания border'а. Насчет ширины и цвета решать уже тебе самому, а сейчас речь пойдет о способах окрашивания бордеров. Насколько мне известно, существует 8 стилей border'а: Groove, Dotted, Inset, Outset, Dashed, Solid, Double и Ridge. Стили Groove, Inset, Outset и Ridge придают border'у объемный эффект, а остальные закрашивают border пунктирными или сплошными линиями.

Для создания обрамления как на рисунке воспользуйся следующим:

<table border=1 style="border: #000000 3px dotted;">

...

</table>

Кроме создания рамок, с помощью CSS'а можно создавать эффект свечения надписей, находящихся в ячейке таблицы (типа как на рисунке). Для создания такого эффекта нужно в свойствах тэга <td> использовать filter:glow(color=some_color strength=X).

<table>

<tr>

<td style="filter:glow(color=#0000ff strength=5); font-weight:bold; font-size:24px; font-family:Tahoma; color:FFFFFF">

<div>CSS RULEZ!</div>

</td>

</tr>

</table>

В результате использования вышеизложенного кода получилась надпись, внешне очень схожая с применением стиля Outer Glow в Photoshop'е:

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

<table bgcolor="#999999" style="border: coral 3px groove;"><tr>

<td style="filter:shadow(color=blue)">

<div class="color: yellow;">CSS снова Rulez!</div>

</td>

</tr></table>

Один есть недостаток от использования таких надписей - работают они только в ИЕ (4.0 и выше). Так что, если ты еще считаешь ОПЕРу лучшим броузером, то подумай, чего ты можешь лишиться.

Совместимость шрифтов

Все-таки главным назначением CSS'а модно назвать управление свойствами шрифтов, причем выбор шрифта является наиболее важным достоинством. А вдруг ты после установки очередной тысячи новых шрифтов решишь один из них использовать? Не самая лучшая картина предстанет перед тем, кто увидит сайт с совершенно не теми шрифтами, под которые все делалось. Поэтому актуален вопрос о выборе универсальных шрифтов.

Многие вебмастеры используют шрифты, входящие в MS Office. Простите пожалуйста, а кто сказал, что каждый просто обязан ставить Офис? А почему вообще только про винды в первую очередь думают? Линуха еще пока никто не отменял, они жили и живут. Так что не стоит выбирать Verdana, Tahoma, Arial и т.п. Хотя, бесспорно, эти шрифты очень хорошо вписываются почти в любой сайт. Намного лучше будет указать в семействе шрифтов (font-family) одно из следующих: