le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Un joli titre sans image, tout en CSS

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;
}

 

publié le 30/06/2013 par Memo Web
CSS3
Commentaire :
Merci :)
par inconnu, le 23/01/2015
Commenter le Mémo :

Dessiner un cercle sans image grâce à CSS 3
Lorsque le margin appliqué à un enfant déplace son parent
Effet ruban sur un titre en CSS 3
Utiliser des constantes dans un fichier CSS
Comment rajouter un séparateur entre les items d'une liste
Rajouter une image en CSS avec la balise :before ou :after
Générer un fichier CSS en PHP
Colorer une ligne sur 2 dans un tableau en CSS3
Enlever la bordure qui apparaît au survol d'une image sur un lien hypertexte
Centrer une image horizontalement
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos