Salutations les codeurs,
Voici l'heure (très tardive) des votes du Y'a de l'Ambiance #3 qui portait sur le thème des Manuscrits et des Vieux livres. On a eu trois participations superbes que vous pouvez retrouver ci-après! Cliquez sur les images pour voir les codes en action!
| Fyraliel
| Chione
| Youp
A vos souris, vous avez huit jours pour voter =)
Voici l'heure (très tardive) des votes du Y'a de l'Ambiance #3 qui portait sur le thème des Manuscrits et des Vieux livres. On a eu trois participations superbes que vous pouvez retrouver ci-après! Cliquez sur les images pour voir les codes en action!
| Fyraliel
- 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>
| Chione
- Code:
<style>
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
width:2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #381400;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
.message {
background:url(http://image.noelshack.com/fichiers/2015/28/1436651345-book.png);
position: absolute;
top: -420px;
left: 0;
width: 680px;
height: 420px;
padding: 20px;
transition: top 2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
z-index:99;
}
#toggle {
z-index:101;
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
#toggle + label:hover {
background:url(http://image.noelshack.com/fichiers/2015/28/1436649795-bookouvert.png);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#toggle + label {
position:absolute;
background:url(http://image.noelshack.com/fichiers/2015/28/1436649792-bookferm.png);
width:55px;
height:70px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
margin-top:66px;
margin-left:300px;
cursor:pointer;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
#toggle:checked ~ .message {
top: 0;
}
#toggle:checked ~ .container {
margin-top: 0px;
}
#toggle:checked + label {
background: url(http://image.noelshack.com/fichiers/2015/28/1436651859-ferm.png);
}
#toggle:checked + label:after {
z-index:105;
background: url(http://image.noelshack.com/fichiers/2015/28/1436651859-ferm.png);
}
.fond {
background:url(http://image.noelshack.com/fichiers/2015/28/1436649847-fontbibli.png);
width:700px;
height:420px;
position:relative;
}
.livre {
position:absolute;
background:url(http://image.noelshack.com/fichiers/2015/28/1436649792-bookferm.png);
width:55px;
height:70px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
margin-top:66px;
margin-left:350px;
}
.livre:hover {
background:url(http://image.noelshack.com/fichiers/2015/28/1436649795-bookouvert.png);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.pagegauche {
width:250px;
height:370px;
overflow:auto;
text-align:justify;
font-variant: small-caps;
font-family:times new roman;
font-size:14px;
margin-left:-250px;
opacity:0.5;
}
</style>
<center>
<div class="fond">
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>
<div class="message">
<p class="pagegauche">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tincidunt dolor, in mollis mauris consequat at. Donec et nibh laoreet, dignissim nunc quis, ultrices sapien. Etiam vel mauris lacus. Nullam nibh sem, vulputate id finibus eu, dapibus id massa. Vestibulum rutrum in leo eu semper. Donec viverra erat ut enim molestie, quis dictum quam imperdiet. Donec sit amet pellentesque turpis. Curabitur sit amet mi sodales, sodales magna nec, faucibus justo. Fusce sed turpis sapien. Ut non velit vel quam laoreet sodales ac quis dolor. Morbi semper, velit tincidunt placerat rhoncus, metus nunc porttitor tellus, non pulvinar nulla nunc in leo. Donec purus diam, feugiat quis ligula et, vehicula vulputate risus. Etiam in faucibus neque.
Maecenas eu magna dapibus, pellentesque lacus quis, aliquet justo. In vulputate diam urna, vitae pulvinar eros euismod nec. Pellentesque luctus posuere dui, sit amet maximus sem gravida id. Maecenas eget sollicitudin ex, sit amet hendrerit enim. Fusce ac accumsan nisi. Etiam dictum ac ex vitae faucibus. Morbi a consequat nulla, quis rhoncus nunc. Praesent pharetra magna at neque congue pellentesque.
Ut aliquet sem metus, in commodo velit volutpat a. Duis blandit dapibus nulla. Proin orci nunc, ullamcorper fringilla porta ut, sagittis nec tortor. Curabitur et egestas neque. Phasellus accumsan eros massa, vel dapibus dui interdum in. Quisque cursus urna felis, eget lobortis quam congue id. Mauris consequat leo et augue fringilla commodo. Morbi euismod turpis purus. Aliquam faucibus ante nec tempor blandit. Etiam porta sit amet nisi in viverra. Donec sed nisi a diam tincidunt malesuada. Proin erat quam, scelerisque in purus nec, bibendum varius enim. Aliquam erat volutpat.
Quisque enim est, venenatis at mauris eu, tempus vulputate nunc. Praesent augue nunc, interdum porttitor mi vitae, laoreet euismod velit. Sed vitae arcu elit. Suspendisse convallis bibendum metus, vel pharetra diam suscipit vel. Nulla quis scelerisque arcu, non vestibulum tellus. Morbi a auctor tellus. Sed posuere, tortor vel pretium feugiat, leo velit laoreet sem, quis viverra urna purus tempus quam. Morbi aliquam orci mauris, tempor fringilla nunc euismod accumsan. Aliquam ac ultricies purus, et imperdiet lorem. Proin eget scelerisque lacus.
Sed sit amet neque quis nisl ullamcorper viverra nec non mauris. Nulla sit amet malesuada nulla, in tristique nunc. Donec condimentum, lacus in maximus malesuada, neque turpis vestibulum erat, sit amet ultrices eros ante cursus dolor. Vivamus placerat sagittis lorem, vel posuere magna suscipit ac. Vestibulum consectetur velit risus, a luctus diam vulputate at. Phasellus vitae nisi pharetra, sollicitudin arcu id, pulvinar orci. Quisque metus dolor, sollicitudin quis gravida in, scelerisque eget odio. Nunc et nunc viverra, elementum quam commodo, ultricies felis. In a justo tortor. Sed eleifend commodo nisi, sit amet dapibus velit imperdiet quis. Vestibulum quis semper urna. Morbi ut metus id neque ornare bibendum ac vitae lectus. Nulla vel nibh felis.
</p>
<img src="http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/vector+illustration+1.jpg" style="height:360px;opacity:0.7;margin-top:-390px;float:right;margin-right:30px;"/>
</div>
</div>
</center>
| Youp
- 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>
A vos souris, vous avez huit jours pour voter =)
Dernière édition par Ehawee le Mer 25 Mai 2016 - 18:46, édité 1 fois
)