C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Écrire sur plusieurs plans

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Écrire sur plusieurs plans

Niveau: Intermédiaire | Par: Orange | Validé par: Orange | En date du: 20/05/2010


    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 ! Very Happy

  • 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 Wink 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 ! Bravo !



{ I would love to change the world, but they won't give me the source code }
MessageSujet: Écrire sur plusieurs plans   Jeu 20 Mai 2010, 17:16
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Écrire sur plusieurs plans   Jeu 04 Aoû 2011, 05:28
Revenir en haut Aller en bas
 

Écrire sur plusieurs plans

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Plusieurs arrières plan
» Mon ordinateur troune au ralenti....depuis plusieurs jours.
» Installer plusieurs logiciels en une seule opération
» Plusieurs diaporamas dans une animation
» [Résolu] comment mettre plusieurs animationa la suite

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit