Jump to content
  • 0

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


gap
 Share

Question

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

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

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

h_1417571359_7869682_80e0fd85ec.png

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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

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

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

h_1417571359_7869682_80e0fd85ec.png

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

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

Link to comment
Share on other sites

  • 0

 

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

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

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

h_1417571359_7869682_80e0fd85ec.png

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

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

 

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

 

3 блока:

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

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

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

Link to comment
Share on other sites

  • 0

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

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

 

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

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

Link to comment
Share on other sites

  • 0

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

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

 

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

Edited by gap
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy