Не так давно, я долго придумывал расстановку блоков для одного маленького сайта, и для этого мне не хватало визуализации. В чем проблема спросите вы? А я банально отвечу, когда я делал блоки в графическом редакторе (firework, photo shop, и тп) мне не хватало наглядности, да с одной стороны блоки есть, даже кое как мог их подчеркнуть (тень, края и тп) для большего выделение одного от второго. И тут же меня постигла лень, крутить их в разные стороны, да так чтобы они все были ровненькие, симметричные (в плане расстановки), да и чтобы текст их тянул куда надо, ой…
После всего этого мозг-о-сотрясения полез я в любимый блокнот рубать код и смотреть на результат как говорится в режиме «Real Time» (настоящее время), много ума не понадобилось чтобы сверстать блоки подобающим образом, и опять выпал за грань реально, блоки ни как не выделялись визуально и меня это немного бесило. Я не мог лицезреть то расположение блоков которое хотел. Ах как я любил рисовать блоки в графическом редакторе, делать им закругление краев под 7PX, да подкидывать тени на 4PX под 60% под углом в 270 градусов, да еще цвета блокам постоянно менять или вообще заменять цвета картинками, и тут до меня дошла идея сделать блок который будет иметь все то что я перечислял захлебываясь собственной слюной!
Не долго раздумывая я вспоминал CSS 3 и проклинал БРАУЗЕРЫ его не поддерживающие (на сей момент почти все), но как говорили многие хорошие люди надо видеть плюсы и использовать то что есть. А есть у нас “IE6, Safari, да Opera, в прочем и многое другое (но это уже совсем другая история)”.
И так! Для начала я взял первое что было в голове, а это собственно картинка нашего будущего блока:

Далее как банально не звучит я подумал! как это будет смотреться в слоях? И для примера я взял опять же первое что пришло в голову «ТАБЛИЦУ» (в данный момент исправляю на слои). После чего разметил основные составные.

Как видно у нас 9 основных частей, 4 угла, 4 стороны и одна внутренность, и еще если заметить то можно увидит нашу таблицу в 3 столбца и 3 строчки:
___________
___________
и стили:
___________
___________
И так спустя пару минут мы создали нашу таблицу которая внешне идеально походит на наш долгожданный квадратик, но основная цель, превратить эту таблицу в подобие ”DIV'a” но не в простое а чтобы можно было менять задний план как задумывалось:

при использовании такого заднего фона:

Еще также нужно чтобы рабочая область начиналась от туда от куда и должна начинаться рабочая область, по умолчанию с верхнего угла левой стороны.
Выйдя с на поле боя с против браузера IE использовав все что только в голову взбрело я создал, код который побил все баги IE с таблицами, в частности когда кусок объекта пропадал под таблицой при использовании отрицательного значения margin у меня получилась следующая конструкция:
Стили:
___________
___________
Код:
___________
___________
И так теперь при применении класса “zBlock” мы будем иметь то что хотели, элегантную рамочку за читаные секунды, которая свободно тянется во все возможные стороны не царапая пользователей своей острой натурой!

Сам же данный мини плагин применил пару раз для мелких конкурсных работ от моего колледжа.
Желаю всем найти применении данной штуковины в своих целях, а также с радостью выслушаю критику и дельные советы.
Пример который на скриншоте
Мини example
После всего этого мозг-о-сотрясения полез я в любимый блокнот рубать код и смотреть на результат как говорится в режиме «Real Time» (настоящее время), много ума не понадобилось чтобы сверстать блоки подобающим образом, и опять выпал за грань реально, блоки ни как не выделялись визуально и меня это немного бесило. Я не мог лицезреть то расположение блоков которое хотел. Ах как я любил рисовать блоки в графическом редакторе, делать им закругление краев под 7PX, да подкидывать тени на 4PX под 60% под углом в 270 градусов, да еще цвета блокам постоянно менять или вообще заменять цвета картинками, и тут до меня дошла идея сделать блок который будет иметь все то что я перечислял захлебываясь собственной слюной!
Не долго раздумывая я вспоминал CSS 3 и проклинал БРАУЗЕРЫ его не поддерживающие (на сей момент почти все), но как говорили многие хорошие люди надо видеть плюсы и использовать то что есть. А есть у нас “IE6, Safari, да Opera, в прочем и многое другое (но это уже совсем другая история)”.
И так! Для начала я взял первое что было в голове, а это собственно картинка нашего будущего блока:

Далее как банально не звучит я подумал! как это будет смотреться в слоях? И для примера я взял опять же первое что пришло в голову «ТАБЛИЦУ» (в данный момент исправляю на слои). После чего разметил основные составные.

Как видно у нас 9 основных частей, 4 угла, 4 стороны и одна внутренность, и еще если заметить то можно увидит нашу таблицу в 3 столбца и 3 строчки:
___________
<table class="z" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th class="lt"></th>
<th class="t"> </th>
<th class="rt"></th>
</tr><tr>
<th class="l"></th>
<td></td>
<th class="r"></th>
</tr><tr>
<th class="lb"></th>
<th class="b"></th>
<th class="rb"></th>
</tr>
</tbody>
</table>
___________
и стили:
___________
table.z{width:100%}
table.z td{height:100%;vertical-align:top}
table.z th.l,table.z th.r{width:12px;background-image:url(g.png)}
table.z th.t,table.z th.b{height:12px;background-image:url(v.png)}
table.z th.lb,table.z th.rb,table.z th.lt,table.z th.rt{background-image:url(b.png)}
table.z th.r,table.z th.l{background-repeat:repeat-y}
table.z th.t,table.z th.b{background-repeat:repeat-x}
table.z th.l{background-position:-4px 0}
table.z th.r{background-position:8px 0}
table.z th.t{background-position:0 -4px;font-size:1px}
table.z th.b{background-position:0 8px}
table.z th.lb{background-position:0 -13px}
table.z th.rb{background-position:-13px -13px}
table.z th.rt{background-position:12px 0}
table.z th.lt{background-position:0 0}
___________
И так спустя пару минут мы создали нашу таблицу которая внешне идеально походит на наш долгожданный квадратик, но основная цель, превратить эту таблицу в подобие ”DIV'a” но не в простое а чтобы можно было менять задний план как задумывалось:

при использовании такого заднего фона:

Еще также нужно чтобы рабочая область начиналась от туда от куда и должна начинаться рабочая область, по умолчанию с верхнего угла левой стороны.
Выйдя с на поле боя с против браузера IE использовав все что только в голову взбрело я создал, код который побил все баги IE с таблицами, в частности когда кусок объекта пропадал под таблицой при использовании отрицательного значения margin у меня получилась следующая конструкция:
Стили:
___________
table.z{width:100%}
table.z td{height:100%;vertical-align:top}
table.z i.x{position:relative;left:-12px;padding-right:24px;width:100%;margin:-12px -48px -12px 0}
table.z td i.y{margin:0 -24px 0 0}
table.z th.l,table.z th.r{width:12px;background-image:url(g.png)}
table.z th.t,table.z th.b{height:12px;background-image:url(v.png)}
table.z th.lb,table.z th.rb,table.z th.lt,table.z th.rt{background-image:url(b.png)}
table.z th.r,table.z th.l{background-repeat:repeat-y}
table.z th.t,table.z th.b{background-repeat:repeat-x}
table.z th.l{background-position:-4px 0}
table.z th.r{background-position:8px 0}
table.z th.t{background-position:0 -4px;font-size:1px}
table.z th.b{background-position:0 8px}
table.z th.lb{background-position:0 -13px}
table.z th.rb{background-position:-13px -13px}
table.z th.rt{background-position:12px 0}
table.z th.lt{background-position:0 0}
table.z td i{display:block;font-style:normal}
___________
Код:
___________
<table class="z" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th class="lt"></th>
<th class="t"> </th>
<th class="rt"></th>
</tr><tr>
<th class="l"></th>
<td>
<i class="x">
<i class="y">
<i style="height:XXXpx"></i>
</i>
</i>
</td>
<th class="r"></th>
</tr><tr>
<th class="lb"></th>
<th class="b"></th>
<th class="rb"></th>
</tr>
</tbody>
</table>
___________
Согласитесь, на замену маленькому DIV'у код както великоват, и тогда я вспомнил что обладаю маленькими знаниями в области jQuery и вообще JavaScript
___________
$(document).ready(function(){
var zBlocks = $("div.zBlock");
function zBlock (el) {
var cutClass = zBlocks.attr("class");
$(el).html('
<i style="height:'+$(el).css("height")+'">'+$(el).html()+'
');
}
for(var i=0; i<zBlocks.length; i++) {
zBlock(zBlocks[i])
}
});
___________
И так теперь при применении класса “zBlock” мы будем иметь то что хотели, элегантную рамочку за читаные секунды, которая свободно тянется во все возможные стороны не царапая пользователей своей острой натурой!

Сам же данный мини плагин применил пару раз для мелких конкурсных работ от моего колледжа.
Желаю всем найти применении данной штуковины в своих целях, а также с радостью выслушаю критику и дельные советы.
СЫЛКИ
Пример который на скриншоте
Мини example