Un joli titre avec liseré tout en CSS

Pour faire des effets de titres sympas, facilement et sans images, en n’utilisant que du CSS 3 et la propriété linear-gradient .

Propriété CSS que l’on utilise ici  pour rajouter un liseré de chaque côté du titre <h1>

Code HTML :

<h1> <span> Un joli titre en CSS 3</span></h1>

Rajouter un liseré en CSS

Code CSS :

h1{
text-align:center;
background:linear-gradient (
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:-webkit-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:    -moz-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:     -ms-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:      -o-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
}
h1 span{
background:#fff;padding:0 20px;
}