Как сверстать нестандартный заголовок?

Question

[Kirill Popolov]

Добрый день.
Встала задача сверстать нестандартный заголовок, не могу сообразить как это лучше сделать. Есть некоторой неизвестной длины заголовок (может быть и две строки). Максимальная ширина ограничивается размером контейнера. Задача состоит в том, чтобы добавить по сторонам заголовка две полоски толщиной один пиксель с градиентом (из белого в прозрачный).
Самое близкое тут: css-tricks, но не подходит, поскольку в моем случае часть градиента скрывается, выглядит не очень хорошо.

Comments

[Николай]

А есть картинка? Что-то по описанию сложно понять, что надо сверстать и почему для решения не подходит :before и :after

[Kirill Popolov]

Заголовок может быть короче или длиннее - необходимо, чтобы гардиент при этом удлинялся или укорачивался, а не обрезался.
к псевдоклассам нельзя применить фильтры (в данном случае градиент) в ie8, поэтому они не подходят.

[Masterme]

@Piterski потому что :before и :after - это пидерастия

[Masterme]

@ezhikov вообще конечно ты молодец - спрашивать как сверстать не выложив сразу картинку как это должно выглядеть

[Юрий Лобанов]

В таких вопросах ВСЕГДА надо указывать кроссбраузерность, нужна или нет. Сделать такое можно, но способ зависит от того, что Вы собираетесь поддерживать.

Answer 1

[Masterme]

вариант 1 - сделать таблицей. таблицы никогда ещё не подводили. что касается семантики, чтоб в тексте был чистый h2, не обёрнутый в другие теги, то можно сделать пост-эффект на JS, после загрузки страницы, который оборачивает h2 в таблицу.

вариант 2, для однородного фона - сделать градиентный фон этой полоски во всю ширину страницы, положить её в див, а внутри этого дива - спан с заголовком и фоном цвета фона страницы.

вариант 3 - использовать множественный бэкграунд, но там, похоже, придётся повозиться, сложно вычислить правильные координаты.

вариант 4 - положить контейнер с заголовком в контейнер с левым фоном в контейнер с правым фоном. но там тоже как в варианте 3 придётся повозиться с вычислением координат.

Comments

[Kirill Popolov]

Попробую с таблицами. Остальное точно не подходит.

Answer 2

[Алексей]

Я конечно не верстальщик, но 1 пиксельный прозрачный png растянутый по ширине бекграундом не пойдет?

Comments

[Kirill Popolov]

Не подойдет. Под текстом не должно быть ничего, а по краям градиент. Бэкграунд на странице неоднородный, иначе бы просто положил под текст цветную подложку.

[Алексей]

Ну 3 контейнера, слева и права с полосками, центральный с текстом, нет?

[Иван Малышев]

скорее всего нет, ведь все заголовки будут разного размера. А для каждого заголовка рисовать линейки из одного пикселя - не комильфо.

[Kirill Popolov]

@ScorpLeX если знать размер заголовка, то вопроса даже не возникло бы.

Answer 3

[Дмитрий С]

Центральный блок с текстом, боковые - градиенты. В каждом боковом еще один блок с высотой в пару пикселей и шириной 100% - белая полоса, тоже градиент. Вариантов - масса, на самом деле

Answer 4

[Никита Гуляев]

а если див с высотой в 1 пиксель и шириной в процентах и используя css3 gradient?

Comments

[Kirill Popolov]

Немного не понял. Какой процент задавать?