Урок 3: Создание информационного блока с тенью (HTML + CSS)
Замечания
Данный практический материал поможет вам научиться создавать резиновые информационные блоки с тенью. В основе лежит принцип создания графических панелей, поэтому для начала вам необходимо ознакомиться с соответствующей статьей.
Первый шаг при создании блока — его отрисовка в графическом редакторе. Рисуется он очень просто: прямоугольник средних размеров с примененным к нему эффектом тени. Я, например, нарисовал в редакторе Gimp (исходник):
Далее необходимо сверстать этот блок. Для нас важна именно тень, сам блок мы не трогаем. Определяем (мысленно) в тени участки с однородной текстурой, растянутой по горизонтали и участки с однородной текстурой, растянутой по вертикали учитывая, что наш блок имеет динамические размеры:
Зеленый участок — вертикально-однородная тень, синий участок — горизонтально-однородная тень, красные участки — окончания/закругления тени, которые необходимо описывать отдельными изображениями. Тень должна быть полностью охвачена воображаемой синей и зеленой маской, допускается захват лишней белой полоски шириной 1-2 пикселя. Для моего изображения оказалось достаточной ширина в 10 пикселей. Красные участки, соответственно, оказались размером 10x10 пикселей.
На первом этапе верстки вырежем участки тени, помеченные красной маской и сохраним их как отдельные изображения. Верхнему правому участку дадим название vshadow_top.jpg, нижнему левому — hshadow_left.jpg, нижнему правому — shadow_corner.jpg.
Далее из участка тени, помеченного синей маской, вырезаем полоску высотой равной высоте маски и шириной 1-5 пикселей. Сохраняем эту полоску под именем hshadow.jpg. Соответственно, из участка тени, помеченного зеленой маской, вырезаем полоску шириной равной ширине маски и высотой 1-5 пикселей. Сохраняем эту полоску под именем vshadow.jpg.
Следующей этап — создание HTML-структуры блока. Создаем таблицу 3x3 с произвольно заданной шириной и высотой:
<table border="1" style="width: 300px; height: 200px"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Убираем поля в ячейках, зазор между ячейками. Центральной ячейке задаем ширину и высоту 100%, вставляем изображения vshadow_top.jpg, hshadow_left.jpg и shadow_corner.jpg в соответствующие ячейки при помощи тегов img:
<style> .box {border-collapse: collapse; width: 300px; height: 200px} .box td {padding: 0} .box img {width: 10px; height: 10px} .box .rcontent {width: 100%; height: 100%} </style> <table class="box" border="1"> <tr> <td></td> <td></td> <td><img src="/vshadow_top.jpg"></td> </tr> <tr> <td></td> <td class="rcontent"> </td> <td></td> </tr> <tr> <td><img src="/hshadow_left.jpg"></td> <td></td> <td><img src="/shadow_corner.jpg"></td> </tr> </table>
 |
||
 |
 |
Задаем изображения hshadow.jpg и vshadow.jpg как фоновые изображения необходимых ячеек с дублированием по горизонтали и вертикали соответственно:
<style> .box {border-collapse: collapse; width: 300px; height: 200px} .box td {padding: 0} .box img {width: 10px; height: 10px} .box .rcontent {width: 100%; height: 100%} .box td.hsh {background: url('/hshadow.jpg') repeat-x} .box td.vsh {background: url('/vshadow.jpg') repeat-y; vertical-align: top} </style> <table class="box" border="1"> <tr> <td></td> <td></td> <td class="vsh"><img src="/vshadow_top.jpg"></td> </tr> <tr> <td></td> <td class="rcontent"> </td> <td class="vsh"></td> </tr> <tr> <td><img src="/hshadow_left.jpg"></td> <td class="hsh"></td> <td><img src="/shadow_corner.jpg"></td> </tr> </table>
|
||
|
|
Левую и центральную ячейку в первой строке используем как заголовок блока. Левая ячейка будет использваться в качестве отступа. Задаем стили границ этих ячеек таким образом, чтобы ячейки выглядели как единая область (у левой ячейки убираем правую границу, а у центральной — левую). Центральной ячейке задаем поля сверху и снизу, а также поле справа, равное ширине левой ячейки. Задаем цвет заголовка. Аналогично используем левую и центральную ячейку во второй строке в качестве контентной области блока:
<style> .box {border-collapse: collapse; width: 300px; height: 200px} .box td {padding: 0} .box img {width: 10px; height: 10px} .box .rcontent {width: 100%; height: 100%} .box td.hsh {background: url('/hshadow.jpg') repeat-x} .box td.vsh {background: url('/vshadow.jpg') repeat-y; vertical-align: top} .box .lcaption {border: 1px solid black; border-right: none; background: #999;} .box .rcaption {border: 1px solid black; border-left: none; background: #999; padding: 2px 10px; padding-left: 0} .box .lcontent {border: 1px solid black; border-right: none} .box .rcontent {border: 1px solid black; border-left: none; padding: 3px 10px; padding-left: 0} </style> <table class="box" border="1"> <tr> <td class="lcaption"> </td> <td class="rcaption">Заголовок</td> <td class="vsh"><img src="/vshadow_top.jpg"></td> </tr> <tr> <td class="lcontent"></td> <td class="rcontent"> </td> <td class="vsh"></td> </tr> <tr> <td><img src="/hshadow_left.jpg"></td> <td class="hsh"></td> <td><img src="/shadow_corner.jpg"></td> </tr> </table>
| Заголовок | |
|
|
|
Убираем границы таблицы (атрибут border), а также стиль height — теперь высота блока будет определяться его контентом. Для тестирования помещаем в центральную ячейку какой-нибудь контент, например, текст:
<style> .box {border-collapse: collapse; width: 300px} .box td {padding: 0} .box img {width: 10px; height: 10px} .box .rcontent {width: 100%; height: 100%} .box td.hsh {background: url('/hshadow.jpg') repeat-x} .box td.vsh {background: url('/vshadow.jpg') repeat-y; vertical-align: top} .box .lcaption {border: 1px solid black; border-right: none; background: #999;} .box .rcaption {border: 1px solid black; border-left: none; background: #999; padding: 2px 10px; padding-left: 0; font-weight: bold} .box .lcontent {border: 1px solid black; border-right: none} .box .rcontent {border: 1px solid black; border-left: none; padding: 3px 10px; padding-left: 0; text-align: justify} </style> <table class="box"> <tr> <td class="lcaption"> </td> <td class="rcaption">Язык HTML</td> <td class="vsh"><img src="/vshadow_top.jpg"></td> </tr> <tr> <td class="lcontent"></td> <td class="rcontent">Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.</td> <td class="vsh"></td> </tr> <tr> <td><img src="/hshadow_left.jpg"></td> <td class="hsh"></td> <td><img src="/shadow_corner.jpg"></td> </tr> </table>
| Язык HTML | |
|
| Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. | ||
|
|
Наш блок готов. Шаблон блока имеет следующий вид:
Стили:
.box {border-collapse: collapse; width: [ШИРИНА]} .box td {padding: 0} .box img {width: 10px; height: 10px} .box .rcontent {width: 100%; height: 100%} .box td.hsh {background: url('/hshadow.jpg') repeat-x} .box td.vsh {background: url('/vshadow.jpg') repeat-y; vertical-align: top} .box .lcaption {border: 1px solid black; border-right: none; background: #999} .box .rcaption {border: 1px solid black; border-left: none; background: #999; padding: 2px 10px; padding-left: 0; font-weight: bold} .box .lcontent {border: 1px solid black; border-right: none} .box .rcontent {border: 1px solid black; border-left: none; padding: 3px 10px; padding-left: 0; text-align: justify}
Код:
<table class="box"> <tr> <td class="lcaption"> </td> <td class="rcaption">[ЗАГОЛОВОК]</td> <td class="vsh"><img src="/vshadow_top.jpg"></td> </tr> <tr> <td class="lcontent"></td> <td class="rcontent">[КОНТЕНТ]</td> <td class="vsh"></td> </tr> <tr> <td><img src="/hshadow_left.jpg"></td> <td class="hsh"></td> <td><img src="/shadow_corner.jpg"></td> </tr> </table>
Для последующего использования данного шаблона в HTML-страницах необходимо:
- поместить файлы изображений в корневую директорию;
- поместить стили блока в файл стилей HTML-страницы;
- поместить код блока в нужное место HTML-страницы, при этом заменить [ШИРИНА] на требуемую ширину блока, [ЗАГОЛОВОК] — на заголовок блока, [КОНТЕНТ] — на контент блока.
Понятное дело, что изображения можно поместить и в отдельную папку (images, например). При этом нужно будет подкорректировать пути в стилях и коде.
В следующем уроке мы воспользуемся нашим шаблоном блока для создания HTML-страницы.
Благодарю за хороший урок!
Стильный шаблон.
блин.. еще б исходники выложил.
Тут же кишит исходниками, разве нет?
Этот урок писал, когда сайт имел совершенно другой дизайн (белый фон), после смены дизайна тень немного потеряла свой вид :) В любом случае, технология морально устарела, о чем я и написал замечание в начале статьи.
А как это применить условными комментариями только для эксплорера? То есть вот у меня прописан html и css конкретного блока для нормальных браузеров, а для эксплорера нужен этот костыль. В какое место кода его влепить, чтобы эксплорер не силился отобразить оба варианта?
можно слегка упростить: