Jak zrobić taką ramkę z nagłówkiem HTML5 CSS3

Question

Witam, poradzi ktoś może jak zrobić taką ramkę z nagłówkiem?

Jak było białe tło i czarna ramka to poradziłem sobie nadając ramce position: relative, a naglowkowi dałem białe tło, position: absolute, margin-top: -20px. Ale nie mam pomysłu jak to zrobić jak tło jest obrazkiem.

 

Answer 1

http://www.w3schools.com/css/css_image_transparency.asp

Comments

Dzięki, tylko nadal nie rozumiem. Bo jak dam tło nagłówka jakies a potem dam opacity 0 to i tak widac całą górną ramkę. Pewnie coś źle kombinuje

---

Jak jest to zdjęcie, to w edytorze grafiki obrób sobie zdjęcie (opacity) i zmień je na format .PNG. Nie będziesz musial wtedy kombinować.

Jak kolor to jest jeszcze rgba:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba

Answer 2

W HTML dla formularza istnieje tag <fieldset> i <legend> tylko nie wiem czy wciąż są dozwolone. Przy pewnej zabawie z CSS można by to doprowadzi do postaci z obrazka.

https://jsfiddle.net/m040vhqw/

EDIT: z obrazkiem w tle

https://jsfiddle.net/m040vhqw/2/

Comments

Jedno, duże ALE: semantyka leży. To samo można osiągnąć ustawiając górny border przy pomocy linear gradienta.

---

gradient w przykładzie jest wstawiony zamiast dowolnego obrazka w tle.

---

Metoda daje radę, na szczęście można edytować ramkę w fieldset np {border: 2px solid black}. Ale może da się jakoś bez stosowania formularzy ?? Bo w kodzie to tak dziwnie wygląda :D

---

Można choćby tak kombinować: http://codepen.io/Comandeer/pen/Margbq

---

Samego tagu <form> nie trzeba używać - wystarczy tylko <fieldset> i <legend> ale rzeczywiście to też może dziwnie wyglądać w kodzie. Innego pomysłu jednak nie mam.