Agence 84 – Technologies Web & Mobile en Algérie

menu agence84

Blog Agence84

Texte avec fond dégradé en CSS

Vous avez marre de faire appel a un designer pour avoir un texte avec fonds dégradé? C’est desormais possible de le faire simplement en CSS.
L’astuce est simple à intégrer à votre code, Le texte  en PNG  commence avec votre couleur d’arrière-plan (dans ce cas, nous utilisons le dégradé blanc).

Tout d’abord le code HTML mis en place. Chaque titre (de préférence les tags d’entête) utilise un élément imbriqué supplémentaire vide span.

<h2>Mon titre cool<span></span></h2>

Utilisez le CSS pour définir le style du h2. Vous n’aurez pas besoin d’utiliser le style de l’exemple. Utilisez le vôtre. La seule chose importante est de veiller à ce que vous ayiez défini la propriété position à relative.

h2
{
/* style optionnel, vous pouvez utiliser tout ce que vous voulez  */
font-size:220%;
color:#0079b6;
font-weight:normal;
letter-spacing:-.05em;
margin:.6em 0;
/* ceci est important */
position:relative;
}

Maintenant, le dégradé.

Nous mettons un PNG transparent comme image de fond pour l’élément span et définissons la propriété position à absolute pour qu’il puisse se placer au-dessus du texte.

h2 span
{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(gradient_1.png) repeat-x;
}

Malheureusement, nous ne vivons pas dans un monde parfait et tous les navigateurs ne prennent pas en charge la transparence PNG. Donc, pour ces navigateurs, prenez-en compte.

* html h2 span
{
background-color:#fff;
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= »gradient_1.png », sizingMethod= »scale »);
}

Ainsi, le span vide est au-dessus du titre et il est allongé sur toute la largeur et la hauteur. Puisque le dégradé est inclus dans la couleur de fond du titre il ne sera pas visible dans l’écart entre les lettres rendant l’effet réel.

Voir le code en action : exemple.