le MEMO du WEB développeur
 

••• Trucs en CSS3 •••   Liste des Mémos, astuces et bonnes pratiques

Foncer une image au passage de la souris - CSS
Effet carnet de notes en CSS 3 - empilement de feuilles - CSS

Un joli titre sans image, tout en CSS - 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 :

Effet ruban sur un titre en CSS 3 - CSS
Dessiner un cercle sans image grâce à CSS 3 - CSS
Une bordure en pointillés en CSS3 - Effet couture. - CSS
Un effet de changement de couleur fluide en CSS3 - CSS
Colorer une ligne sur 2 dans un tableau en CSS3 - CSS
Les transitions en CSS3 : rotation d'un élément - rotate() - CSS
Dessiner un triangle avec CSS3 - CSS
Ombrage - propriété box-shadow - CSS
Arrondir les bords d'un élément - CSS
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