AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


3 résultats trouvés pour auteur_Youp

Liste de propriétés, entre célèbres et plus méconnues - Sam 9 Jan 2016 - 1:57



Yop !

Je vais essayer aujourd'hui de dresser un exemplier de toutes les propriétés liées à l'esthétique qui vous permettront donc de réaliser avec précision ce que vous avez en tête. En effet, beaucoup de balises restent peu connues. J'ai découvert il y'a seulement un mois que l'on pouvait mettre un dégradé sur un bloc. Mon tutoriel n'est pas exhaustif, il y'a surement d'autres propriétés que je ne connais pas. Vous pouvez tout à fait me les soumettre à la suite afin que je les ajoute ^^


Menu des propriétés relatives:
I. Au texte, à la police
II. Au bloc
III. A la bordure


I. Propriétés de la police

Prenons un exemple simple:  Je suis un bateau.
Voici les propriétés permettant d'en modifier l'esthétisme. Je mets ici les balises qui sont aussi les plus connues dans un soucis d'exhaustivité.

La propriété  "font-size" permet de régler la taille de la police. La valeur est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px, valeur fixe) et le pourcentage (%, valeur relative, variant suivant la taille de l'écran).
Exemple :
Code:
<div style=" font-size: 20px;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "color" permet de définir la couleur du texte.Le plus souvent, elle est exprimée en hexadécimal (mais si vous savez, cette chose: #FF6347) ou par son nom (blue, tomato, lightgreen etc. Pour toutes les voir, vous pouvez aller ici: http://web-color.aliasdmc.fr/ ).
Exemple :
Code:
<div style="color: blue;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "font-family" permet de changer la police d'un texte. La valeur (votre nom de police) se met entre guillemets simples. Vous pouvez trouver des polices originales sur le site google font, à installer sur l'ensemble de votre forum en copiant simplement après la balise head dans le template overall_header, ou dans votre message avant votre codage, le bout du code fourni sous cette forme:
Code:
<link href="https://fonts.googleapis.com/css?family=Griffy" rel="stylesheet">

Vous pouvez ajouter un autre police "au cas où" après une virgule et sans guillemets. Imaginons pendant une panne du site "google font", celle ci sera alors remplacé par cette police (times imaginons) ou un style de police (serif, sans-serif, cursive, fantasy, monospace)
Exemple :
Code:
<div style="font-family: 'Griffy', cursive; "> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "font-style" permet d'afficher le texte en italique en y associant la valeur "italic", en oblique avec la valeur "oblique" (mais il y'a peu de différence suivent les polices), ou en "normal".
Exemple :
Code:
<div style="font-style: italic;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="font-style: oblique;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "font-weight" permet de définir l'épaisseur du texte, en y associant la valeur "bold" on met le texte en gras, "bolder" en plus gras encore, "normal" de façon normal et "lighter" en plus léger. (Attention avec certaines polices, cela n'a aucun effet). On peut aussi définir l'épaisseur de sa police en utilisant des nombres compris entre 100 (très fin, lighter) à 900 (très gras, bolder). La valeur "normal" est à 400.
Exemple :
Code:
<div style="font-family: 'Open Sans'; font-weight: lighter;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="font-family: 'Open Sans'; font-weight: bold;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Avec les chiffres: (respectivement 300, 400, 600, 700, 900)
Code:
<div style="font-family: 'Open Sans'; font-weight: 300;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Je suis un bateau
Je suis un bateau
Je suis un bateau
Je suis un bateau

La propriété  " font-variant" permet d'afficher le texte en petites capitales en y associant la valeur "small-caps". Ou "normal" (je ne préciserais plus que normal vaut dire qu'elle prend sa valeur de base, sa valeur normale).
Exemple :
Code:
<div style=" font-variant: small-caps; "> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "line-height" permet de gérer l'espace interligne. La valeur est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px), le pourcentage (%) et le numérique (exprimé en chiffre, se fonde sur la valeur de font-size, le 1 étant l'écart normal).
Exemple :  
Je suis un bateau.
Je suis un beau bateau.
Code:
<div style="line-height: 10px; "> Je suis un bateau.
Je suis un beau bateau.  </div>

Donne:
Je suis un bateau.
Je suis un beau bateau.

Code:
<div style="line-height: 2; "> Je suis un bateau.
Je suis un beau bateau.  </div>

Donne:
Je suis un bateau.
Je suis un beau bateau.


La propriété  "text-shadow:" permet d'ajouter des ombres au texte. La valeur associée s'écrit de la sorte: "décalage horizontal    décalage verticale    niveau de flou    couleur". Il peut y avoir deux ombres différentes (regardez le troisième exemple)
Exemple :
Code:
<div style="text-shadow: 2px 2px 0px white;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="text-shadow: -2px -2px 2px grey;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="text-shadow: 2px 2px 0px orange, -1px -1px 0px blue;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  " letter-spacing" permet de régler l'espace entre les lettres. Généralement utilisée avec les pixels, on ne peut pas utiliser les pourcentages pour exprimer la valeur.
Exemple :
Code:
<div style=" letter-spacing: 10px;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.



La propriété  "text-align" permet de régler l'alignement horizontale du texte: à gauche (left), à droite (right), au centre (center) ou justifié (justify). Un texte justifié est un texte aligné à gauche et à droite, si bien que l'espace entre les mots s'adaptent afin que le texte ait cette forme de bloc, de carré. La propriété text-align déplace de manière général tout élément inline.
Exemple :
Code:
<div style="text-align: center;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


Vous voulez aligner du texte verticalement dans un bloc? ( Cette propriété touche plus au bloc qu'à la police mais bon, je me suis dit que si vous cherchiez la solution, vous iriez davantage voir de ce côté-ci que dans le post qui suit. ) Il existe plusieurs solutions, je vais vous énumérer. La propriété  "vertical-align: middle" vous le permet mais seulement si vous convertissez votre élément en une cellule de tableau ("display:table-cell").
Exemple :
Code:
<div style="width: 200px; height:100Px; background: white; display:table-cell; vertical-align: middle;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

La deuxième solution utilise plusieurs propriétés et valeurs! L'élément doit être en "position:absolute", avec un "top:50%", et un "transform: translateY(-50%)".
Une troisième solution est l'utilisation de flexbox (ce que je recommende super-méga-fortement pour le positionnement, c'est une vraie révolution pratique !) Il faut utiliser deux blocs, le premier englobe le second, le premier est un parent, le second un enfant. On peut indiquer l'alignement sur l'enfant, en mettant le "display: flex" sur le parent et "margin-auto" sur l'enfant (et oui, c'est tout bête)
Exemple :
Code:
<div style="width: 200px; height:100Px; background: white; display: flex;"><div style="margin:auto;"> Je suis un bateau. </div></div>

Donne:
Je suis un bateau.

On peut également indiquer l'alignement sur le parent avec un "display: flex; ", "flex-direction: column" et un "justify-content: center".
Exemple :
Code:
<div style="width: 200px; height:100Px; background: white; display: flex; flex-direction: column; justify-content: center;"><div style="color:darkgrey;"> Je suis un bateau. </div></div>

Donne:
Je suis un bateau.


La propriété  " text-indent" permet de définir la longueur de l'espace avant la première ligne de texte dans un élément le contenant. La valeur est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px, valeur fixe) et le pourcentage (%, valeur relative, variant suivant la taille de l'écran). ( Ce qui suit ne fonctionne malheureusement pas sur la grande majorité des navigateurs mais cela pourrait changer à l'avenir alors je vous le mets tout de même). Elle peut aussi être associée avec la valeur "each-line" qui permet de définir cet espace pour la première ligne certes, mais plus encore, après chaque saut de ligne "forcé" (qui ne sont pas automatiques), sous la forme "text-indent: unité-de-longueur each-line;". Associée à la valeur "hanging", toutes les lignes auront cet espace SAUF la première. Vous pouvez aussi associer "hanging" et "each-line" ensemble.
Exemple :
Code:
<div style="width: 200px; height:120Px; background: white; text-indent: 20px;">Je suis un bateau. Un énorme bateau.
Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg.  </div>

Donne:
Je suis un bateau. Un énorme bateau.
Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg.


La propriété  " text-align-last" permet de définir la façon dont la dernière ligne du texte doit être alignée, ainsi que celles qui sont avant un saut de ligne forcé . Elle peut être associée à la valeur "left" (gauche), "right" (droite), "center" (centré) et "justify" (justifié).
Exemple :
Code:
<div style="width: 200px; height:120Px; background: white; text-align-last: center;">Je suis un bateau. Un énorme bateau.
Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg.  </div>

Donne:
Je suis un bateau. Un énorme bateau.
Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg.


La propriété  " word-spacing" permet de régler l'espace entre les mots. La valeur est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px, valeur fixe) et le pourcentage (%, valeur relative, variant suivant la taille de l'écran).
Exemple :
Code:
<div style="word-spacing:15px; "> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "text-transform" permet de modifier ce qui attrait aux majuscules, minuscules. La valeur "capitalize" permet de mettre la première lettre du texte en majuscule, la valeur "uppercase" permet de mettre tout en majuscule, la valeur "lowercase"permet de mettre tout en minuscule, la valeur "none" produit un texte normal (valeur par défault).
Exemple :
Code:
<div style="text-transform: uppercase;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.


La propriété  "text-decoration" permet de modifier la décoration d'un mot (le soulignement par exemple). La valeur "underline" permet de le souligner, la valeur "overline" permet de le surligner, la valeur "line-through" de le barrer, la valeur "none" de ne pas le décorer (pratique pour enlever le soulignement des liens par exemple).
Exemple :
Code:
<div style="text-decoration: overline;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Les autres:
Je suis un bateau sous underline.

Je suis un bateau sous line-through.



La propriété  "font-stretch" permet d'afficher le texte de façon resserré avec les valeurs "semi-condensed, condensed", "extra-condensed" et "ultra-condensed" ou moins resserré avec "semi-expanded", "expanded", "extra-expanded" et "ultra-expanded".
Exemple :
Code:
<div style="font-family:'Times New Roman';font-stretch:normal;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="font-family:'Times New Roman';font-stretch: ultra-condensed;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.

Code:
<div style="font-family:'Times New Roman';font-stretch: ultra-expanded;"> Je suis un bateau. </div>

Donne:
Je suis un bateau.



Du coup, un petit code à remplir, avec toutes les propriétés vues précédemment:
Code:
.police {
font-size: ;
color: ;
font-family: '  ' ;
font-style: ;
font-weight: ;
font-variant: ;
line-height: ;
text-shadow: décalage horizontal décalage verticale niveau de flou  couleur , décalage horizontal    décalage verticale    niveau de flou    couleur;
letter-spacing: ;
text-align: ;
text-decoration: ;
word-spacing; ;
text-transform: ;
font-stretch: ;
font-size-adjust : ;
text-indent: ;
text-align-last: ;
}  


Youp

Fiche de pub coloréé en page html - Jeu 7 Jan 2016 - 16:50



Hey ! Voici une petite fiche de pub sympathique aux couleurs estivales. Il y'a des animations sur la partie staff, qui dévoile le nom du staff. La voici: (vous n'aurez pas les images dans le code, à vous de les mettre, mais je vous expliquerais où)



Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc. Mais ne vous en faites pas, ce n'est vraiment pas sorcier


Le code de la page html et ses explications

Donc dans modules -> gestion des pages html -> créer en mode avancé, vous mettez ceci :
Code:
<!DOCTYPE html>
  <html>
    <head> 
      <meta charset="utf-8" />
      <title>Fiche de pub pour refresh</title>
      <base target="_blank" />
      <style type="text/css">
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
  background-image: url('LIEN');
  background-repeat: no-repeat;
}

a {
  text-decoration:none;
  color: white !important;
}

.titre {
  color : #fb6920;
  font-size: 24px;
  font-weight: ;
  letter-spacing: px;
  font-family: 'Indie Flower';
  float: right;
  position: relative;
  margin-right: 20px;
  margin-top: 257px;
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
}    

.contexte{
  width: 350px;
  height: 310px;
  background: white;
  position: absolute;
  top: 300px;
  overflow: auto;
  margin-left: 25px;
  font-size: 15px;
  padding: 7px;
  text-align:justify;
  color: chocolate;
}

.contexte:first-letter {
  font-size:290%;
  float:left;
  background: #fb6920;
  color: white;
  padding-left: 6px;
  padding-right: 5px;
  margin-right: 3px;
}  

.staff1{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 300px;
  left: 420px;
  background: white;
  color: chocolate;
}  

.imagestaff1 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff1:hover > .imagestaff1 {
  filter:alpha(opacity=0);
  opacity:0;
  visibility:hidden;
}

.staff2 {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 410px;
  left: 420px;
  background: white;
  color: chocolate;
}    


.imagestaff2 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff2:hover > .imagestaff2 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.staff3{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 520px;
  left: 420px;
  background: white;
  color: chocolate;
}

.imagestaff3 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff3:hover > .imagestaff3 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.blocliens{
  width: 550px;
  height: 36px;
  position: absolute;
  top: 650px;
  vertical-align: middle;
}  

.lien1{
  width: 109px;
  height: 35px;
  background: #fb6920;
  color: white !important;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien1:hover{
  width: 109px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien2{
  width: 111px;
  height: 35px;
  background: gold;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.lien2:hover{
  width: 111px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.blocinfo{
  width: 400px;
  background: white;
  position: absolute;
  top: 710px;
  overflow: auto;
  margin-left: 50px;
  font-size: 15px;
  padding: 15px;
  text-align:justify;
  color: chocolate;
  border-radius: 20px;
}

.boutonphrase {
  color : #fb6920;
  font-size: 20px;
  font-family: 'Indie Flower';
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
  width: 190px;
  margin: auto;
}    

.bouton {
  width: 100px;
  margin: auto;
  margin-top: -17px;
}    

.crédit {
  font-size: 10px;
  position: absolute;
  top: 875px;
  margin-left: 200Px;
  color: grey;
}
</style>
      <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" >
    </head>       
    <body>                 
<div class="page">
                                                              
 <div class="titre">
                               Si tu devais partir en voyage, où irais-tu?                                
 </div>
                                                            
 <div class="contexte">
                               LE CONTEXTE BLABLABLA, ces balises -> <br /> <br /> Correspondent à un saut de ligne si vous souhaitez les utiliser. A la suite un petit lien vers le contexte en entier, vous pouvez le retirer: <a target="_blank" href="LIENde_la_suite_de_votre_contexte"><span style="color: rgb(185, 43, 42);">La suite...</span></a>                            
 </div>
                                                        
 <div class="staff1">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
          NOM STAFF      
 </div>
                  
 <div class="imagestaff1">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="staff2">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
         NOM STAFF          
 </div>
                    
 <div class="imagestaff2">
                      
 </div>
                                                        
 </div>
                                                        
 <div class="staff3">
      
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
        NOM STAFF    
 </div>
                    
 <div class="imagestaff3">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="blocliens">
                                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                  Règlement </a>                          
 </div>
                            
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Base de données </a>                        
 </div>
                    
 <div class="lien1">
       <a href="LIEN" target="_blank">                     Fruits du démon </a>                          
 </div>
                              
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Questions  </a>                          
 </div>
                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                    Staff  </a>                    
 </div>
                                            
 </div>
                                              
 <div class="blocinfo">
                           Date d'ouverture: <br /> Membres enregistrés: <br />Nombre de messages postés : <br />  <br />                
 <div class="boutonphrase">
                 Venez nous rejoindre !                  
 </div><br />                  
 <div class="bouton">
                  <a title="OnePieceRefresh" href="LIEN_Forum"><img src="Image_bouton_partenariat" alt="logo partenaire" /></a>                  
 </div>
                                        
 </div>
                                    
 <div class="crédit">
                              @Youp sur <a target="_blank" href="http://www.never-utopia.com/"> <span style="color: rgb(185, 43, 42);">Never Utopia</span> </a>                              
 </div>
                                                                                
</div>
</body>
</html>


Ensuite, à chaque fois que vous voulez modifier votre code, vous devrez utiliser le mode avancé, soit l'engrenage sur lequel il est écrit "html". Sinon, cela va cause des bugs.

Code:
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
 background-image: url('LIEN');
 background-repeat: no-repeat;
}

N'oubliez pas de remplacer le LIEN par un... roulement de tambour... Lien ! Razz Ce lien correspond à l'image en haut de la fiche, l'image ici fait 550 de largeur (width) et 275 de hauteur (height). Si vous désirez changer les proportions, il vous faudra changer certains placements comme celui du titre par exemple (modifier simplement la valeur top ).

Modifier aussi le lien des images de imagestaff1, 2 et 3 ainsi que le nom qui s'affiche en dessous (j'ai noté NOM STAFF). Les images font 100x100px.

Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" />            

Correspond à la police google font que l'on utilise pour certaines parties de la fiche, vous pouvez la remplacer par une autre si vous le souhaitez bien sûr. Ajouter juste à la suite le code similaire que vous donne google font.

N'oubliez pas de modifier aussi tout les LIEN (donc pour la navigation rapide, ex règlement, staff etc..., sur le bouton de partenariat aussi), et l'image du bouton de partenariat.



Utiliser dans un message: mettre une iframe :

Hop hop, maintenant pour l'utiliser, il suffit d'utiliser une iframe sous cette forme:
Code:
<iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>

Modifier les valeurs de hauteur et de largeur si vous avez modifier celle-ci sur votre page html. Enlever la première div si vous ne voulez pas que la fiche soit centrée.

Voili voilou, j'espère que le rendu vous plaît et si vous avez un problème avec la modification du code, n'hésitez pas à passer dans "personnalisations" ou "problème avec mon code". N'enlevez pas le crédit bien sûr (surtout celui qui amène vers N-U, mais sur ce point je vous fait confiance ^^

Youp

Un livre animé à glisser où vous le voulez - Sam 7 Nov 2015 - 15:57



Bonjour bonjour, après un looooong oubli, je viens enfin vous proposer ce petit livre animé où vous pourrez mettre votre contexte ou tout autre texte. Il s'agit d'un livre où vous pouvez tourner les pages.

Voilà l'aperçu (si vous ne le voyez pas, actualisez simplement la page) :


Je tiens à préciser que je me suis appuyée sur un tutoriel en anglais pour le réaliser.

Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc.


Il faut donc créer une page html pour héberger notre livre. Si vous voulez que celui ci soit visible dans un message, il faudra l'herberger via une iframe. Vous êtes perdus ? Allons y petit à petit.

PS: N'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^
De plus si vous l'utiliser, penser à indiquez que si rien ne s'affiche, il suffit d'actualiser.


Créer une page html

Allez dans : Modules -> Gestion des pages html -> Création en mode avancé

Le code correspondant au livre est celui-ci :
Code:
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Titre de la Page</title>
    <base target="_blank" />
    <style type="text/css">
      #myBook {
      display:none;
     position:absolute;
      left : 0px;
      top:0px;
      width: 328px;
      height:533px;
      }
      .imBookPage {
      position:absolute;
      left:0px;
      top:0px;
      width: 328px;
      height:533px;
      overflow:hidden;
      }
    </style>
  <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
    <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
    <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  
  </head>
  <body>                                            
<div id="myBook" style="display:none;">
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
              
 <div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
       Memory      
 </div>
                  
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/486457couvdos.png)">
      <br /> <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />                      
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
      <br />          
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
          
 <div style="  font-size:300%; float:left; margin: 2px; color: peru;">
      Q      
 </div>
     uod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.<br /><br />Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.      
 </div>
                          
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
            
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                        
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                        
 </div>
                                        
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
                  
  <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
            
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
  <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                  
 </div>
                      
</div>
</body>
</html>


Explication du code  

Code:

    <style type="text/css">
      #myBook {
      display:none;
     position:absolute;
      left : 0px;
      top:0px;
      width: 328px;
      height:533px;
      }
      .imBookPage {
      position:absolute;
      left:0px;
      top:0px;
      width: 328px;
      height:533px;
      overflow:hidden;
      }
    </style>
  <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
    <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
    <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  

Ce passage correspond au javascript utilisé pour faire tourner les pages, on y associe un style permettant de modifier la position du livre dans la page html (ici simplement en haut à gauche, ce qui permet de faire une jolie iframe. Si jamais vous voulez mettre un lien qui amène à votre page html, avec un fond en dessous du livre imaginons, modifier les valeurs de positionnement rendra le tout plus joli. En centrant le livre par exemple.) et de modifier la taille (très important si vous voulez changer d'image, en prendre une plus petite par exemple). Mybook c'est votre livre en entier, imbookpage ce sont vos pages.

Code:
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
Blabla
</div>

Ceci correspond à une page, ici la couverture. Elle a une image différente des autres. Si vous souhaitez changer d'image, modifiez simplement l'url ici présente.

Code:
<div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
       Memory      
 </div>

Le titre de mon livre, je vous laisse le soin d'analyser les valeurs et de les modifier si vous voulez un autre résultat. Juste une chose: le "display table-cell et vertical-align middle" permet d'aligner verticalement le titre.

Code:
<img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />  

Une image sur la page du livre.  

Code:
<div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;"> mise en forme du texte contenu dans la page </div>

La mise en forme que j'ai choisi pour mon texte contenu dans la page. Il faut l'ajouter dans chaque imbookpage choisie en prenant grand soin de la fermer avant de fermer l'imbookpage.

Code:
<div style="  font-size:300%; float:left; margin: 2px; color: peru;">
      Q      
 </div>

Une lettrine, je vous renvoie au tutoriel de Kazuya

Faire une iframe
Vous voulez insérer ce livre dans un message ? Je vous renvoie au très bon tutoriel de Cheshire cat

Allez y pour regarder les explications ! En somme ça nous donne avec mon exemple:
Code:
<iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" scrolling="no" style="width: 660px; height: 533px; display: block; margin: auto;"></iframe>


Revenir en haut

La date/heure actuelle est Mer 15 Mai 2024 - 11:29