Помгите реализовать рамку заголовка средствами html и css

[gap]

Дизайнер нарисовал вот такую рамку, для всех заголовков сайта.

background блока не однотонный, как правило картинка или текстура

Есть у кого нибудь мысли как это реализовать средствами html и css?

[boond]

Что тут сложного, три блока разной высоты и с разными бордерами.

[Sergik+]

  On 12/3/2014 at 1:52 AM, gap said:

Дизайнер нарисовал вот такую рамку, для всех заголовков сайта.

background блока не однотонный, как правило картинка или текстура

Есть у кого нибудь мысли как это реализовать средствами html и css?

Самое простое это рисовать прямоугольник с таким бордером с z-index:1 а текст изнутри поднять

отрицательным маржином с z-index:2 и сделать паддинги слева и справа.

[Switch74]

  On 12/3/2014 at 3:58 AM, Sergik+ said:

 

  On 12/3/2014 at 1:52 AM, gap said:

Дизайнер нарисовал вот такую рамку, для всех заголовков сайта.

background блока не однотонный, как правило картинка или текстура

Есть у кого нибудь мысли как это реализовать средствами html и css?

Самое простое это рисовать прямоугольник с таким бордером с z-index:1 а текст изнутри поднять

отрицательным маржином с z-index:2 и сделать паддинги слева и справа.

 

Только нужна прозрачность....

 

3 блока:

1.левый с бордерами сверху/снизу/слева

2.центральный с бордером снизу

3.правый с бордерами сверху/снизу/справа

[SelenIT]

Для новых браузеров достаточно 1 блока.

[gap]

  On 12/3/2014 at 8:52 AM, SelenIT said:

Для новых браузеров достаточно 1 блока.

Эх, не успел своё решение запостить. Ваш код несомненно красивее и продвинутее. Большое спасибо.

Edited December 3, 2014 by gap

[Switch74]

  On 12/3/2014 at 8:52 AM, SelenIT said:

Для новых браузеров достаточно 1 блока.

Мне кажется не хватает чего-то, смотрю через последний хром винды

 

  On 12/3/2014 at 8:55 AM, gap said:

Эх, не успел своё решение запостить. Ваш код несомненно красивее и продвинутее.

А здесь как раз три блока, с небольшими доработками

[Q4Dizzy]

А если в несколько строк?

[gap]

  On 12/3/2014 at 9:12 AM, Switch74 said:

  On 12/3/2014 at 8:55 AM, gap said:

Эх, не успел своё решение запостить. Ваш код несомненно красивее и продвинутее.

А здесь как раз три блока, с небольшими доработками

 

Да, Ваше предложение и натолкнуло на мысль. Большое спасибо!

Edited December 3, 2014 by gap

[rus]

а через fieldset + legend не?

[SelenIT]

С центрированием, насколько мне известно, не (по крайней мере, без уличной магии). Без центрирования, видимо, можно, но капризно, негибко и, простите за выражение, несемантично..

[rus]

мда... с центрированием и семантикой пожалуй засада.