Панелі - один з улюблених елементів веб-майстрів. Панель - дуже універсальний елемент, його можна задіяти, наприклад, в якості шапки сайту:
або горизонтального меню:
Щоб панель була красивою, їй потрібно надати обсяг, декоративні кордону, тіні, тому без графіки тут не обійтися. Найпростіший спосіб - всю панель зберегти як зображення і в HTML-сторінку вставити у вигляді елемента img або як фон елемента-контейнера. У той же час даний спосіб є найменш гнучким і зручним, так як панель буде мати жорсткі розміри. Зазвичай для створення "гумових" (тобто, легко змінюють свої розміри) панелей використовують особливість браузерів обробки фонових зображень.
Елементу-контейнера, будь то комірку таблиці або блок div, можна задати фонове зображення за допомогою CSS-стилю background-image. Якщо розміри елемента більше розміру фонової картинки, то браузер буде автоматично дублювати фонове зображення по горизонталі і вертикалі, заповнюючи тим самим всю область елемента фоном. Для прикладу створимо просте фонове зображення розміром 16x16 пікселів (зображення збільшено в 4 рази):
і використовуємо його як фонове зображення для таблиці розміром 160x160 пікселів:
Браузер повністю заповнив таблицю фоном, продублировав фонове зображення 10 раз по горизонталі і вертикалі. За допомогою CSS-стилю background-repeat можна задати режим дублювання фону: repeat-x - дублювати тільки по горизонталі, repeat-y - дублювати тільки по вертикалі, repeat - дублювати по горизонталі і вертикалі (за замовчуванням), no-repeat - не дублювати .
Ця особливість і використовується для створення графічних "гумових" панелей. Алгоритм створення панелі з динамічної шириною наступний:
2. Визначаємо ділянку панелі з однорідною текстурою, розтягнутої по горизонталі. Для цього необхідно виділити обрамляють частини (робимо це подумки, тобто лінії НЕ малюємо):
3. Ліву та праву обрамляють частини необхідно вирізати із загальної панелі і зберегти як окремі зображення panel_left.jpg і panel_right.jpg;
4. Із середньої частини вирізаємо смужку зображення висотою рівній висоті панелі і шириною 1-5 пікселів і також зберігаємо як окреме зображення panel_center.jpg. В результаті у нас повинно вийти три невеликих зображення: panel_left.jpg, panel_center.jpg, panel_right.jpg:
5. Створюємо HTML-таблицю з одним рядком і трьома осередками. Задаємо висоту таблиці рівну висоті панелі і довільну ширину. Першою і третьої осередку задаємо ширину, відповідну ширині зображень-обрамлень panel_left.jpg і panel_right.jpg:
6. В першу і третю клітинку таблиці поміщаємо елементи img, що відображають наші зображення-обрамлення. Центральної осередку задаємо фонове зображення panel_center.jpg і дублювання по горизонталі. Це можна зробити одним CSS-стилем background:
7. Необхідно прибрати зазор між осередками таблиці за допомогою стилю border-collapse. а також прибрати поля в першій і третій осередку за допомогою стилю padding. Це дозволить всім зображенням щільно примкнути один до одного:
Також варто подбати про користувачів, у яких в браузерах відключена графіка. Необхідно задати фоновий колір панелі, близький до графічного кольором, а також вказати розміри картинок в тегах img. Остаточний приклад можна скачати тут.