Изображения с автоматическим размером до и после тега <H1>

Question

Я работаю с дизайнером на сайте. У нее есть отличная идея для оформления заголовков h1 на сайте, но я не могу найти способ реализовать это.

Ее план состоит в том, чтобы центрировать каждый заголовок H1, помещая его между двумя визуальными элементами, размер которых изменяется, чтобы занять доступное пространство. Думайте о каждом визуальном элементе как о двусторонней стрелке с украшением в середине и прямой линией, соединяющей их все.

Вы можете увидеть это прямо сейчас со статическими изображениями, вставленными через CSS: before и: after теги на живом сайте (и понять, почему она это ненавидит). На изображениях изображены цветы, связанные линиями с петлями посередине.

http://getwellgabby.org/thanks/

Я думаю, что это работа для jQuery, но я не уверен, с чего начать. Буду признателен за любую помощь, указывающую мне правильное направление.

Answer 1

То есть ширина цветка будет меняться в зависимости от длины символа тега H1 в середине?Это, несомненно, исказит форму цветов / петель и, следовательно, не позволит улучшить внешний вид.

Вы можете просто распределить 3 элемента (левая цепочка цветов, заголовок, правая цепочка цветов) по максимальной ширине этой строки, что просто "text-align: center;"Другой сложный вариант - разбить обе цветочные цепочки на 5 частей.2 конца и середина никогда не меняются, но 2 раздела между ними - это прямые линии, заполняющие оставшееся пространство.Окончательный вид можно получить, сделав 1 фон прямой линии и поместив на него более низкий z-индекс и разместив над ним бутоны и петли и распределив их по ширине.

Надеюсь, вы поняли, что трудно работать без иллюстраций lol.

Answer 2

Вы можете добавлять изображения, но проблема в том, что заголовок слишком длинный. Поскольку изображения имеют фиксированную ширину, размер текста вашего заголовка очень ограничен. Вы можете уменьшить изображения, но тогда они будут искажены и будут выглядеть ужасно.

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

Вы также можете иметь несколько наборов изображений и использовать серверный код (не JavaScript) для переключения между ними. Вы можете проверить длину текста и оценить его ширину. Затем вы можете добавить класс в h1, который будет показывать соответствующие изображения.

Старайтесь не использовать JavaScript.

Answer 3

+ 1 Интересный вопрос.

Если вы не решите его полностью, похоже, вы можете использовать логику Раздвижные двери для расширения и сжатия изображений по мере необходимости.

http://www.alistapart.com/articles/slidingdoors2/

http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

Где вы будете использовать jQuery - это динамически настраиваемая ширина.Итак, найдите ширину h2, вычтите ее из ширины содержащего div, а затем разделите результат на два, и это ширина каждого бокового изображения.