Un effet assez sympa qui fait fureur dans les RPGs, consiste à écrire deux lignes de textes qui se chevauchent. L’installation et la compréhension du code se fait assez facilement. Pour un effet optimal compatible sur l’ensemble des navigateurs actuels (je ne garantis pas son fonctionnement sur IE6). Trèves de palabres, on est ici pour faire du code !

Mise en place du code
D’abord, il nous faut enfermer le texte dans une boîte (div) à laquelle nous aurons donné une propriété nous permettant de définir la distance qui séparera nos deux lignes de texte, comme ceci :

Code:

 <div style="line-height: 8px;">text
text</div>

N.B.: Le < br/> n’est pas obligatoire il sert seulement à provoquer un saut de ligne sur les pages HTML. Si vous désirez coller le code dans un message, remplacez le < br/> par un saut de ligne conventionnel (Entrée).

C’est la propriété line-height qui donnera la distance entre deux lignes de texte ; vous pouvez remplacer la valeur (6px) par celle de votre choix selon l’espace désiré entre les lignes de texte. Pour ce résultat :

text
text

Assez simple et ennuyeux, maintenant, donnons un style particulier à chacune de nos lignes de textes en encerclant chacune de nos lignes par la balise span comme ceci :

Code:

<div style="line-height: 6px;"><span>text</span>
<span>text</span></div>

Inutile de tester, le résultat est le même car nous n’avons pas encore donné de style CSS à nos balises span (et à son contenu). Ici, la limite est votre imagination, CSSActif fourmille d’effets de texte que vous pourrez appliquer à ce code :

Code:

<div style="line-height: 6px;"><span style="PROPRIÉTÉS CSS DE LA PREMIÈRE LIGNE">text</span>
<span style="PROPRIÉTÉS CSS DE LA DEUXIÈME LIGNE">text</span></div>

Voici quelques-uns de mes propres tests (libres d'utilisation) :

Bienvenue
sur CSSActif

Code:

<div style="line-height: 10px;"><span style="font-size: 34px; font-family: Monotype Corsiva; color: #C9C;">Bienvenue</span>
<span style="color: #333333; text-transform: uppercase; font-family: Times New Roman, serif;">sur CSSActif</span></div>

Bienvenue
sur CSSActif

Code:

<div style="line-height: 10px;"><span style="font-size: 34px; font-family: Impact; color: #F93; ">Bienvenue</span>
<span style="font-size: 20px; font-family: Verdana; color: #09F; text-decoration: line-through; margin-left: 20px;">sur CSSActif</span></div>

Bienvenue
sur CSSActif

Code:

<div style="line-height: 10px;"><span style="font-size: 34px; font-family: Time New Roman; color: #BABABA; text-transform: uppercase; ">Bienvenue</span>
<span style="font-size: 34px;  font-family: Monotype Corsiva;  color: #531014;  margin-left: 100px;">sur CSSActif</span></div>

À la prochaine sur CSSActif !