Un joli titre en CSS 3

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;
}
0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.