Effet de superposition de texte

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet de superposition de texte

Message par Camoche03 le Ven 22 Juil 2011 - 12:40

Re Bonjour,
Je cherche à savoir faire ceci :


Je veux dire un effet de superposition de textes

Merci Smile


Dernière édition par Camoche03 le Sam 23 Juil 2011 - 15:23, édité 1 fois

Camoche03
**

Féminin
Messages : 75
Inscrit(e) le : 02/03/2011

http://lgdc-warriors.forumgratuit.org/
Camoche03 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Ea le Ven 22 Juil 2011 - 12:51

Bonjour,


Il suffit de mettre un truc du style :

Code:
<div style="text-align:center; line-height:5px; font-size:20px;">
  <span style="color:red;font-style:italic">la compagnie</span><br/>
  des lapins bleus
</div>
line-height donne la "hauteur" d'une ligne, donc si y'a du texte plus grand que la hauteur de la ligne ( font-size pour la taille de la police ), il recouvrira la ligne du dessus/dessous.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Camoche03 le Ven 22 Juil 2011 - 12:54

Merci ça marche ♥ comment changer la police ?

Camoche03
**

Féminin
Messages : 75
Inscrit(e) le : 02/03/2011

http://lgdc-warriors.forumgratuit.org/
Camoche03 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Camoche03 le Ven 22 Juil 2011 - 13:00

En fait j'ai trouvé Smile est-ce que tu connais le nom de la police sur l'image ? Smile

Camoche03
**

Féminin
Messages : 75
Inscrit(e) le : 02/03/2011

http://lgdc-warriors.forumgratuit.org/
Camoche03 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Ea le Ven 22 Juil 2011 - 13:21

Code:
<div style="text-align:center; line-height:5px; font-size:20px; font-family:'trebuchet ms', arial, verdana, serif;">
  <span style="color:red;font-style:italic">la compagnie</span><br/>
  des lapins bleus
</div>
Ou si il faut une différente sur les 2 lignes :

Code:
<div style="text-align:center; line-height:5px; font-size:20px;">
  <span style="color:red;font-style:italic; font-family:'trebuchet ms', arial, verdana, serif;">la compagnie</span><br/>
  <span style="font-family:candara, tahoma, serif;">des lapins bleus</span>
</div>
Par contre cela agit comme suit : si la première police de la liste est installée sur l'ordinateur, elle est mise au texte, sinon si la deuxième police est installée elle est mise au texte, sinon si la troisième police est installée elle est mise au texte, ..., et si aucune des polices de la liste n'est installée une police par défaut est mise.

Là la police de votre exemple n'est probablement installée chez personne.

Il y a par contre par exemple le service google web fonts qui permet d'utiliser une de leur police sans qu'elle soit installée.

Par exemple si je veux utiliser la Damion je peux mettre :

Code:
<link href='http://fonts.googleapis.com/css?family=Damion&v2' rel='stylesheet' type='text/css'>
<div style="text-align:center; line-height:5px; font-size:20px; font-family: 'Damion', cursive;">
  <span style="color:red;font-style:italic; ">la compagnie</span><br/>
  des lapins bleus
</div>

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Camoche03 le Ven 22 Juil 2011 - 13:46

Ca m'a tout fait buger x)


J'aimerais bien celle la pour la phrase : <link href='http://fonts.googleapis.com/css?family=Give You Glory&v2' rel='stylesheet' type='text/css'> Give You Glory

et elle pour la phrase : <link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC&v2' rel='stylesheet' type='text/css'>
Bowlby One SC


Si tu veux bien, bien sûr Smile

Camoche03
**

Féminin
Messages : 75
Inscrit(e) le : 02/03/2011

http://lgdc-warriors.forumgratuit.org/
Camoche03 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Ea le Ven 22 Juil 2011 - 13:55

Et bien il suffit de mettre les 2 <link> sur la page, et puis on peut utiliser le nom dans la liste des polices du types :

Code:
font-family: 'Give You Glory', arial, verdana, 'Bowlby One SC', 'trebuchet ms', serif;
Donc pour les 2 polices ça donne :

Code:
<link href='http://fonts.googleapis.com/css?family=Give You Glory&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC&v2' rel='stylesheet' type='text/css'>

<div style="text-align:center; line-height:10px; font-size:20px;">
  <span style="color:red;font-style:italic; font-family: 'Give You Glory', cursive; font-size:28px;">la compagnie</span><br/>
  <span style="font-family: 'Bowlby One SC', sans-serif;">des lapins bleus</span>
</div>
( j'ai ajouté un font-size à la première ligne parce que la police n'a pas le même gabarit que celle de la deuxième ligne ( donc ça aurait semblé tout petit en laissant à la même taille )

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet de superposition de texte

Message par Camoche03 le Sam 23 Juil 2011 - 15:22

Merci, résolu ♥

Camoche03
**

Féminin
Messages : 75
Inscrit(e) le : 02/03/2011

http://lgdc-warriors.forumgratuit.org/
Camoche03 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum