Как сделать нестандартную обводку с текстом ?

Question

[nepster-web]

Подскажите пожалуйста как можно с помощью html/css сделать, что то такое ?

Answer 1

[Евгений Низамиев]

Даешь изящность!
cssdeck.com/labs/raw0pe27

Comments

[Евгений Низамиев]

@nepster09 а мой способ не подошел?

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

@RadiationX я к своему стыду вообще про этот тег забыл, да и видел-то его всего пару раз.
У меня в ff легенда выравнивается по левому краю, то есть не работает margin: 0 auto;, в хроме все ок. Мне Ваш вариант нравится куда больше моего :). Единственное, выравнивание по центру надо добить. Автора возможно смущает использование тега не по назначению, так как он по идее для формы. Но я для себя запомню обязательно, возможность использоваться любую текстуру на фоне очень радует.

[Евгений Низамиев]

@iiil я кстати чисто случайно вспомнил это.
Как-то раз, года полтора назад увидел такой приём. Хорошо запомнился)

[Руслан]

=) тоже про него совсем забыл, это решение 100% @iiil в ff по центру -> legend align="center"

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

@rOOse да, теперь точно на все 100%. @nepster09 - присмотритесь, этот вариант проще и более гибкий, и уж точно можно смело отметить решением.

[Евгений Низамиев]

@rOOse у fieldset прописал text-align:center; и всё стало замечательно)

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

@RadiationX или у самой легенды через атрибут

[nepster-web]

таки да, большое спасибо!

[nepster-web]

@iiil @RadiationX @rOOse Подскажите пожалуйста еще как сделать текст по центру ? align атрибут устаревшего html, можно ли как-то без него ?

[Руслан]

@nepster09 @RadiationX писал же у fieldset прописал text-align:center;

[nepster-web]

У меня это не срабатывает.

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

@nepster09 Вас смущает исключительно устаревший атрибут, или предстоящая в связи с его использованием лишняя работа? Если первое - то не парьтесь, в конце-концов, Вы используете очень легкую и красивую конструкцию. Если второе - то можно сделать небольшой скрипт, который будет искать заголовки и в зависимости от его класса присваивать то или иное свойство атрибуту align.

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

@nepster09 пишу, потому что margin не работает в ff, align-center тоже. И так на вскидку ничего не приходит в голову.

[nepster-web]

@iiil там дело все в том, что в том примере фиксированные размеры. У меня адаптивная верстка и что самое интересное, если указать width:100%, верхний бордер пропадает. По поводу устаревшего атрибута, да, align это уже прошлое как и ie

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

@nepster09 зачем Вам указывать 100% ширину? codepen.io/iiil/pen/dCfLm
Вот, абсолютно адаптивный вариант.
Что касается атрибута - да, он не поддерживается в html5, но боюсь придется на это забить. Браузеры его поддерживают.

[nepster-web]

@iiil да, но тег align все портит =(

Answer 2

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

Я вижу только одну проблему - неравномерный background, из-за этого если блоку с текстом "Параметры игры" сделать такой же background, как у самого блока (футбольное поле?) - может появиться рамка.
Напишите, должен ли блок быть резиновым. Ну и потрудитесь выложить хоть файл с текстурой, а лучше начните что-то ваять на jsfiddle.net или на codepen.io.

Повторяю, если не обращать внимания на текстуру, то не вижу трудностей. Вот один из способов
codepen.io/iiil/pen/oLztA

Comments

[nepster-web]

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

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

@nepster09 изменил ответ, посмотрите.

Answer 3

[Руслан]

Или так codepen.io/roose/pen/mkoJH если тайл-текстура качественная, то и ею можно заполнить.