Y'a de l'ambiance #3 - Manuscrits & Vieux livres

Hello les choupinets à la crème!

C'est, une fois n'est pas coutume, votre bleue cheloue préférée qui vient empiéter sur le domaine des verts! (Moi j'aime les verts, mais je peux pas le dire trop fort, sinon ça donnerait raison à Scav', et j'aime pas donner raison à Scav!)

Votre défi du jour (enfin, de quelques jours) sera de faire une création sur le thème des Manuscrits & des vieux livres.

Il faut qu'on sente l'influence de ces objets si particuliers dans votre création! Vous pouvez créer n'importe quoi, une signature codée, une PA, une fiche, une page html, utiliser des images ou non... Seul le respect du thème est un critère!

Pour me retourner vos créations, merci de poster à la suite un Aperçu Image, un lien vers un forum test & le code sous balises "code".

Vous avez jusqu'au 22 juillet pour faire revivre les vieilles pages dans vos lignes de code, & faire honneur à ces objets du passé absolument merveilleux <3 A vos claviers!

(oui, ça se sent que j'ai le nez dans des imprimés du XVIe siècle en ce moment ^^)

Haaaaaaaaan je suis trop fan de l'idée !!! Si je savais coder je l'aurais fait >.< Mais du coup je suivrais les votes

Bah rien ne t'empêche d'essayer un petit truc simple si le coeur t'en dit =) (genre une entête de Rp ou quelque chose comme ça ^^, l'important c'est d'essayer ^^)

Super contente que tu aimes l'idée en tous cas :)

Bonne idée ce défi !

Dommage que je n'ai pas le temps de réfléchir à ce défi, sinon j'aurais bien participé ^^

Super contente qu'il te plaise =) (même si tu n'as pas le temps de le tenter ^^)

Juste pour un défi je suis en train de décortiquer les cursus codage + l'aide de mon chéri... Ca ne tourne pas rond chez moi c'est pas possible >.<

Au contraire c'est très bien Fyra \o/

environs 3h que je suis dessus et j'ai écrit 1 ligne de code... Si je te le rend l'année prochaine ça ira Eha ? xD
Quoi ? Le défi sera passé ? Bon faut que je décortique plus vite que ça alors >.<

Je vais participer, je suis moi aussi en train de dépatouiller le cursus :)
Bisous et à bientôt !

--> Nous vainquerons !

Bon courage Kathee *-* Je suis de tout coeur avec toi ! Personnellement j'en suis à la moitié de mon code, j'attaquerais la suite demain parce que là j'ai eu mon compte pour la soirée !

Allez, courage les filles <3 Le code n'aura pas raison de vous =3 (je suis super contente que tu tentes pour ce défi, quand même, Fy xD)

(Kathee : je suis amoureuse de ton nouveau kit <3)

Moi le courage je l'ai, mais c'est l'inspi qui a fondu avec le soleil u_u !

Merci Eha, j'espère qu'il déforme pas notre joli fofof, ce kit xD
Bon courage les doudous !

J'ai juste eu le temps de terminer mon code vendredi que j'ai dû partir en Week End et j'ai pas eu le  temps de poster... (J'aime pas quand les choses traînent U_U)

Voici donc ma participation, je ne vous cache pas comment je suis trop fière de moi et comment ce fut laborieux d'arriver à un tel résultat ! Mais je l'ai fait c'est le principal !

Pour ma part ce sera donc une fiche de rp, j'ai trouvé ça plus simple à réaliser vu mon niveau en fait (Bouh c'est honteux elle a choisi la solution de facilité //PAN)

Voici le screen :


Le lien vers le code :
http://test-fyraliel.forumactif.org/h1-manuscrit

le code:

Code:

<style>.effet img{-webkit-filter: sepia(100%);filter: sepia(100%);} .effet br{display: none;} .display_br br{display: initial;} div.display_br::-webkit-scrollbar{width: 6px;} div.display_br::-webkit-scrollbar-track{background: #9B712D;} div.display_br::-webkit-scrollbar-thumb{background: #993300;}</style>
<link href='http://fonts.googleapis.com/css?family=Rouge+Script|Montez|Arizonia' rel='stylesheet' type='text/css'/>
<div style="background-image: url('http://nsa37.casimages.com/img/2015/07/02/150702073108866200.gif'); width: 500px; height: 370px" class="effet">
<div style="display: inline-block; vertical-align: top; text-align: center; width: 205px; height: 300px; margin: 40px 0 0 40px;">
<img src="http://nsa37.casimages.com/img/2015/07/02/150702104543549968.png" style="width: 190px; height: 75px;" />
<span style="font: 40px 'Arizonia', cursive; color:#993300;">Titre du RP</span>

<span style="font: 25px 'Montez', cursive; color:#B66E4A;" class="display_br"><br />Participant 1 <br /> & <br /> Participant 2</span></div>
<div style="display: inline-block; text-align: justify; width: 205px; height: 300px; margin: 25px 0 0 20px; font: 28px 'Rouge Script', cursive; color:#2B0000; overflow: auto;"class="display_br"> Nam sole orto magnitudine angusti gurgitis sed profundi a transitu arcebantur et dum piscatorios quaerunt lenunculos vel innare temere contextis cratibus parant, effusae legiones, quae hiemabant tunc apud Siden, isdem impetu occurrere veloci. et signis prope ripam locatis ad manus comminus conserendas denseta scutorum conpage semet scientissime praestruebant, ausos quoque aliquos fiducia nandi vel cavatis arborum truncis amnem permeare latenter facillime trucidarunt.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</div></div>

Han *-* classe ^^ GG Fyra, c'est du beau boulot =) Je sais que le code c'est pas du tout ton domaine, donc franchement, bravo =)

Je vais participer!

Je vais probablement tenter aussi ! =D

Après quelques heures de bagarres voilà pour moi è_é :
Avant:


Quand on clique sur le petit bouquin à droite:


le lien : http://yolochione.forumactif.org/h7-livre

Très bonne idée de défi ! Voilà ce que j'ai fait :  ( cliquer sur la page memory et les différentes pages )



Je pense que je mettrais ce codage en libre service dans une version annotée pour ceux que ça intéresserait ^^  Sinon voilà ce que ça donne sur une page html de mon forum test: http://test4yoda.forumactif.org/h2-livre-ancien .

Voilà le code :

Code:

<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>                   <style> #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">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});    </script>                                                  
<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;">
   <br /><br />  Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris. <br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat. Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.      
 </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;">
     <br /><br />Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </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;">
     <br /><br />Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </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;">
          <br /><br /> Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </div>
                  
 </div>
                      
</div>

Sowy sowy du double post mais j'ai besoin de savoir quelque chose et je veux être sûr qu'on me voit... Est ce que les gens sous google chrome voit les images de mon code ( les images de background, les pages du livre) ? Sous firefox je les vois, sous chrome je ne les vois pas personnellement. ça m'arrangerait si ce n'était que moi

nope je ne les vois pas sous chrome :/

Arrrrrrrrrrg zut de flute de zut ! Merci pour ta réponse Fyraliel, je vais me pencher sur le problème demain du coup.

si je peux me permettre (wahou j'arrive pas à croire que c'est moi qui vais dire ça, la fille elle code une fiche elle donne des conseils où va le monde >.<) peut-être qu'un webkit aiderait mais ne me demande pas où faut le mettre (ah bah voilà, je me disais bien aussi ça paraissait trop beau xD)

Bon courage en tout cas ^^

En fait c'était juste un problème de html, j'avais pas bien placé un guillemet dans le style background et du coup ça buguait sous chrome mais pas sous firefox ( ils sont malins ces renards, ils comprennent même les étourderies)

ah oui !!! La comme ça il rend super bien le code ^^

Heyyyy,

Dis-moi Youp, ton code en libre service, il est en html aussi ou pas ? ^^' Parce qu'il est top franchement :3