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; }
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!