Урок 3: Создание информационного блока с тенью (HTML + CSS)

Замечания

Тень для блока можно создать при помощи CSS-стиля box-shadow (посмотреть пример), который в настоящее время поддерживается всеми адекватными популярными браузерами. Так что, старые добрые методы верстки теней постепенно уходят в небытие :)
Да и сама верстка блока при переходе сайта на HTML5 поплыла. В общем, технология не рекомендуется к использованию, ознакамливаемся исключительно в познавательных целях (хотя в некоторых других задачах подобная технология все еще актуальна).

Данный практический материал поможет вам научиться создавать резиновые информационные блоки с тенью. В основе лежит принцип создания графических панелей, поэтому для начала вам необходимо ознакомиться с соответствующей статьей.

Первый шаг при создании блока — его отрисовка в графическом редакторе. Рисуется он очень просто: прямоугольник средних размеров с примененным к нему эффектом тени. Я, например, нарисовал в редакторе 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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
    <td class="rcaption">Заголовок</td>
    <td class="vsh"><img src="/vshadow_top.jpg"></td>
  </tr>
  <tr>
    <td class="lcontent"></td>
    <td class="rcontent">&nbsp;</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">&nbsp;</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">&nbsp;</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-страницы.

Комментарии

Оставить комментарий »

 
Nickolai
2 ноября 2010, 12:26
#1
 

Благодарю за хороший урок!
Стильный шаблон.

BlogDix
26 февраля 2011, 10:12
#2
 

блин.. еще б исходники выложил.

Joker-jar
27 февраля 2011, 3:16
#3
 

Тут же кишит исходниками, разве нет?

Joker-jar
28 октября 2011, 16:20
#4
 

Этот урок писал, когда сайт имел совершенно другой дизайн (белый фон), после смены дизайна тень немного потеряла свой вид :) В любом случае, технология морально устарела, о чем я и написал замечание в начале статьи.

Тапочек
29 ноября 2011, 6:03
#5
 

А как это применить условными комментариями только для эксплорера? То есть вот у меня прописан html и css конкретного блока для нормальных браузеров, а для эксплорера нужен этот костыль. В какое место кода его влепить, чтобы эксплорер не силился отобразить оба варианта?

odmin
20 июня 2012, 19:29
#6
 

можно слегка упростить:

<style> 
  .box {border-collapse: collapse; width: 300} 
  .box td {padding: 0}
  .box img {width: 10px; height: 10px}
  .box .rcontent {width: 100%; height: 100%}
  .box td.hsh {width: 100%; background: url('hshadow.jpg') repeat-x}
  .box td.vsh {background: url('vshadow.jpg') repeat-y; vertical-align: top}
  .box .rcaption {border: 1px solid black; background: #999; padding: 2px 10px; padding-left: 0; font-weight: bold}
  .box .rcontent {border: 1px solid black; padding: 3px 10px; padding-left: 0; text-align: justify}
</style>
<table class="box"> 
  <tr>
    <td class="rcaption" colspan="2">[ЗАГОЛОВОК]</td>
    <td class="vsh"><img src="vshadow_top.jpg"></td>
  </tr>
  <tr>
    <td class="rcontent" colspan="2">[КОНТЕНТ]</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>

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий