custom heading

een h1 hoeft niet saai te zijn...

de procedure

Met css kan je werkelijk alles stylen; dus waarom geen h1 of h2 (etc.)? Voor de hoeveelheid code hoef je het niet te laten. De css-code voor de custom-heading zal ik even hieronder zetten.

<style type="text/css">
.de-heading{
	background:#030;
	color:#E5CC92;
	margin-left:100px;
	width:60%;
	padding:28px 0 0 0;
	border-left:solid 1px #053}
.de-heading p{
	margin:0;
	padding:2em 1em 1em 1em;
	background:inherit;
	color:#E5CC92}
h1{
	background:#040;
	padding:8px;
	margin-left:-30px;
	margin-top:0;
	position:relative;
	width:70%;
	text-align:center;
	color:#0a0;
	border-right:solid 1px #075;	
	border-bottom:solid 1px #075}
.hoekje{
	width:0;
	height:0;
	line-height:0;
	border-left:30px solid transparent;
	border-top:20px solid #075;
	top:100%;
	left:0;
	position:absolute}
</style>
		

en de rest

En hieronder staat dan nog de div die je nodig hebt om in de body van de pagina te plaatsen. De gehele procedure is cross-browser en valideert op de css en op html5.

<div class="de-heading">
<h1>
	een h1<span class="hoekje"></span>
</h1>
<p>
	en hier wat tekst.
</p>
</div>