Mouahaha... Voici les votes de la deuxième édition de la boîte à lego !
Je rappelle que le défi portait sur les transitions, il fallait en créer une qui dévoile un bloc caché "sous" un autre, le contenu de ces blocs étant libre. Vous avez tous été très inventifs et vos créations sont toutes différentes les unes des autres, bravo !
Et enfin, voilà vos créations~
Création 1 par Onyx
- Code:
<style>#onn {margin: auto; margin-top: 100px; margin-bottom: 10px; position: relative; width: 400px; height: 100px;} #onn1 {position: absolute; z-index: 2; top: 0px; left: 0px; margin-top: 0px; background-color: #C7DEEF; box-shadow: inset 0px 0px 10px #98BDD9; padding: 10px; border-radius: 10px; color: #45759A; width: 380px; height: 80px; transition: z-index 0s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s, margin-top 0.5s; -webkit-transition: z-index 0s 0.5s, top 0.5s 0.5s, left 0.5s 0.5s, margin-top 0.5s;} #onn2{z-index: 1; position: absolute; width: 400px; height: 100px; background-color: #FFEBAE; box-shadow: inset 0px 0px 10px #EFCC61; padding: 10px; border-radius: 10px; color: #EFB361; width: 380px; height: 80px; transition: z-index 0s 0.5s; -webkit-transition: z-index 0s 0.5s;} #onn:hover #onn1 {z-index: 1; top: -100px; left: -10px; margin-top: 90px; transition: z-index 0s 0.5s, top 0.5s, left 0.5s, margin-top 0.5s 0.5s; -webkit-transition: z-index 0s 0.5s, top 0.5s, left 0.5s, margin-top 0.5s 0.5s;} #onn:hover #onn2 {z-index: 2;}</style><div id="onn"><div id="onn1">Survole-moi !</div><div id="onn2">Je suis un petit message caché ~</div></div>
Création 2 par Scavenger
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum, urna sed varius egestas, ante purus tristique ipsum, at porta tellus dolor iaculis nulla. Sed laoreet maximus eros eu iaculis.Vivamus fringilla hendrerit nibh id commodo.
Aliquam vitae risus interdum, iaculis sem et, dictum augue.
Never-utopia
- Code:
<style>.NU-global-card{width:300px;height:450px;position:relative}.NU-global-card br{display:none}.NU-back-card{position:absolute;z-index:42;width:300px;height:450px;border-radius:20px;background-image:url(http://subtlepatterns.com/patterns/carbon_fibre.png);transition:all 2s}.NU-back-card:hover{opacity:0;-ms-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);transform:rotateY(180deg)}.NU-content-card{background-image:url(http://subtlepatterns.com/patterns/dark_leather.png);padding:8px;width:284px;height:434px;border-radius:20px;opacity:0;-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transition:all 2s}.NU-back-card:hover~.NU-content-card{opacity:1;-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.NU-img-card{margin:8px auto auto;display:block!important;border-radius:8px}.NU-title-card{display:inline-block;text-align:center;width:100%;margin-top:-15px;font-size:25px;color:#fff;background-image:url(http://subtlepatterns.com/patterns/dark_wall.png);border-top:1px solid #000;border-bottom:1px solid #000;border-radius:50%;font-weight:700;box-shadow:0 -8px 15px #FFF;line-height:normal}.NU-text-card{line-height:normal;margin: 8px 0 0!important;border-radius:5px;background-color:rgba(255,255,255,.1);color:#fff;font-size:15px;width:272px;height:170px;overflow:hidden;text-align:justify;border:1px solid #505050;padding:5px}.NU-credit-oncard{text-decoration:none;font-size:10px;color:#000}.NU-global-card .NU-text-card br{display:initial}</style>
<div class="NU-global-card">
<div class="NU-back-card"></div>
<div class="NU-content-card">
<img class="NU-img-card" src="http://dummyimage.com/250x200/c2bac2/fff" />
<p class="NU-title-card">Titre</p>
<p class="NU-text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum, urna sed varius egestas, ante purus tristique ipsum, at porta tellus dolor iaculis nulla. Sed laoreet maximus eros eu iaculis.Vivamus fringilla hendrerit nibh id commodo.
Aliquam vitae risus interdum, iaculis sem et, dictum augue.</p>
</div>
<a class="NU-credit-oncard" href="http://www.never-utopia.com">Never-utopia</a>
</div>
Création n° 3 par P@lcopie
Prenom
Age - Sexe -
à retravailler
J'aime :
galérer, visiblement
J'ai vu :
beaucoup de choses
- Code:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<style> .bloc_grand {position: relative; height: 310px; width: 310px; margin: auto;} .bloc {position:relative; height: 100px; width: 300px; background: #ffcc00; font-family: 'Lobster', cursive; color: #ffffff; text-align: right; font-size: 24px; padding: 5px; margin: auto; margin-top: 20px;} .text {display: block; font-family: 'Lobster', cursive; color: #ffffff; text-align: left; font-size: 16px; padding-left: 110px} .text2 {display: block; font-family: 'Lobster', cursive; color: #bbbbbb; text-align: left; font-size: 16px;} .bloc_vert {position:absolute; width: 300px; height: 100px; padding: 5px; top:0; left:0; background-color: #00cc99; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; z-index: 1;} .bloc:hover > .bloc_vert {width: 100px; height: 300px; -webkit-transform: rotate(180deg); transform: rotate(180deg); filter:alpha(opacity=0); -webkit-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear;} .bloc_simple {position: absolute; height: 185px; width: 185px; background: #EEEEEE; padding:5px; margin-top: 60px; margin-left: 110px; z-index: 0;} .bloc_simple2 {position: absolute; left:0; height: 195px; width: 110px; background: #EEEEEE; margin-top: 60px; margin-right: 5px; z-index: 0;}</style>
<div class="bloc_grand"><div class="bloc"><span class="text">NOM <br /> Prenom <br /> Age - Sexe -</span><div class="bloc_vert">Enjoy !</div><div class="bloc_simple2"><img src="http://image.noelshack.com/fichiers/2015/07/1423845448-beety-5.jpg" width="110" height="195" /></div><div class="bloc_simple"><span class="text2">Je suis :<br />a retravailler<br /><br />J'aime : <br /> galerer, visiblement <br /><br /> J'ai vu : <br />beaucoup de choses</span></div></div></div>
Création n°4 par Celsius
Je vous met un aperçu en iframe, mais le code m'a été rendu ainsi:
aperçu : http://codepen.io/ptolam/full/bNaNEq/
code : http://codepen.io/ptolam/pen/bNaNEq
Création n°5 par A-Lice
Nom :
Prénom :
Âge :
Groupe :
Métier :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus quam, tempus vitae magna et, condimentum porttitor leo. Mauris efficitur sollicitudin lorem sed rutrum. Nam ut nunc sed lacus luctus sollicitudin quis sit amet enim. Cras eget venenatis lectus. Praesent eu leo vulputate, lobortis enim at, bibendum massa. Aliquam et tortor malesuada, blandit nisl eu, consectetur libero. Suspendisse imperdiet sodales mi, at gravida arcu dictum non. Etiam venenatis, mi a porta placerat, sem dolor auctor lacus, eget facilisis odio est ac augue. Mauris interdum ante nisl, sit amet tristique mauris imperdiet eget.
Morbi sit amet elementum ante. Morbi ipsum nisl, varius at pretium aliquam, molestie at purus. Quisque dolor nulla, tempor nec malesuada a, rutrum sit amet arcu. Fusce feugiat convallis leo nec euismod. Donec et facilisis felis. Aenean malesuada tristique vulputate. Aenean id ante neque. Sed venenatis orci sit amet tellus laoreet gravida porta id augue. Duis aliquam tristique dapibus. Aliquam erat volutpat. Nam efficitur velit nec odio vulputate, id lacinia nibh consequat.
Etiam congue, nunc eget ultricies interdum, lacus nulla facilisis nisi, quis efficitur dui elit id eros. Cras eget odio et quam venenatis tincidunt. Integer id finibus neque. Pellentesque cursus at ligula nec imperdiet. Nulla nec porttitor felis. Maecenas aliquam odio eleifend laoreet mollis. Morbi cursus ex metus, a mattis orci elementum eu.
Etiam fermentum arcu id est ornare blandit. Vivamus sed nisi malesuada, tincidunt eros in, feugiat nisl. Maecenas suscipit lobortis augue, malesuada viverra velit tempus quis. Morbi interdum facilisis libero, quis mattis felis hendrerit id. Duis eget diam at lectus fringilla dapibus. Pellentesque ut quam non erat semper fermentum. Sed in viverra nunc. Suspendisse vel enim laoreet, egestas libero eget, consectetur ligula. Morbi laoreet eu sapien at pellentesque.
Cras commodo non lectus ultricies efficitur. Nullam malesuada turpis ex, sed tempus sapien faucibus quis. Curabitur aliquam non ligula non imperdiet. Quisque molestie porttitor metus, in dapibus nisi. Morbi nec lacus non odio pharetra suscipit. Aenean eu neque eget dui pulvinar imperdiet. Duis placerat, massa sed volutpat vulputate, mi arcu auctor augue, nec ultricies leo sem eu nunc. Maecenas sapien nisl, feugiat a odio in, ornare pharetra lorem. Vestibulum nulla dui, ultrices ut odio ac, placerat ullamcorper enim. Sed feugiat nisi justo, eu dignissim tortor eleifend non. Donec finibus turpis ut condimentum varius. Donec sed dolor viverra, accumsan dolor vitae, iaculis dui.
- Code:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<style>div.cadre {width: 500px; height: 200px; margin: auto; overflow: hidden;} .cadre img {position: relative; bottom: 200px; transition: 1s; transition-timing-function: cubic-bezier(0,0,1,1); width: 500px; height: 200px;} .cadre:hover img {bottom: 400px; transition: 1s; transition-timing-function: cubic-bezier(0,0,1,1);} div.txt {color: white; font-size: 14px; text-align: justify; background: gray; overflow: auto; width: 480px; height: 180px; padding: 10px; font-family: 'Shadows Into Light', cursive;} .titre {font-size: 20px; font-weight: bold; text-decoration: underline; transition: 1s; font-family: 'Gloria Hallelujah', cursive;} .titre:hover {color: MediumAquamarine; text-decoration: none; transition: 1s;}</style>
<div class="cadre"><div class="txt"><div class="titre">Infos :</div>
Nom :
Prénom :
Âge :
Groupe :
Métier :
</div><img src="http://nsa33.casimages.com/img/2015/02/10/150210074544771252.png" alt="Infos" /></div><div class="cadre"><div class="txt"><div class="titre">Caractère :</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus quam, tempus vitae magna et, condimentum porttitor leo. Mauris efficitur sollicitudin lorem sed rutrum. Nam ut nunc sed lacus luctus sollicitudin quis sit amet enim. Cras eget venenatis lectus. Praesent eu leo vulputate, lobortis enim at, bibendum massa. Aliquam et tortor malesuada, blandit nisl eu, consectetur libero. Suspendisse imperdiet sodales mi, at gravida arcu dictum non. Etiam venenatis, mi a porta placerat, sem dolor auctor lacus, eget facilisis odio est ac augue. Mauris interdum ante nisl, sit amet tristique mauris imperdiet eget.
Morbi sit amet elementum ante. Morbi ipsum nisl, varius at pretium aliquam, molestie at purus. Quisque dolor nulla, tempor nec malesuada a, rutrum sit amet arcu. Fusce feugiat convallis leo nec euismod. Donec et facilisis felis. Aenean malesuada tristique vulputate. Aenean id ante neque. Sed venenatis orci sit amet tellus laoreet gravida porta id augue. Duis aliquam tristique dapibus. Aliquam erat volutpat. Nam efficitur velit nec odio vulputate, id lacinia nibh consequat.
</div><img src="http://nsa33.casimages.com/img/2015/02/10/150210074539197975.png" alt="Caractère" /></div><div class="cadre"><div class="txt"><div class="titre">Histoire :</div>
Etiam congue, nunc eget ultricies interdum, lacus nulla facilisis nisi, quis efficitur dui elit id eros. Cras eget odio et quam venenatis tincidunt. Integer id finibus neque. Pellentesque cursus at ligula nec imperdiet. Nulla nec porttitor felis. Maecenas aliquam odio eleifend laoreet mollis. Morbi cursus ex metus, a mattis orci elementum eu.
Etiam fermentum arcu id est ornare blandit. Vivamus sed nisi malesuada, tincidunt eros in, feugiat nisl. Maecenas suscipit lobortis augue, malesuada viverra velit tempus quis. Morbi interdum facilisis libero, quis mattis felis hendrerit id. Duis eget diam at lectus fringilla dapibus. Pellentesque ut quam non erat semper fermentum. Sed in viverra nunc. Suspendisse vel enim laoreet, egestas libero eget, consectetur ligula. Morbi laoreet eu sapien at pellentesque.
Cras commodo non lectus ultricies efficitur. Nullam malesuada turpis ex, sed tempus sapien faucibus quis. Curabitur aliquam non ligula non imperdiet. Quisque molestie porttitor metus, in dapibus nisi. Morbi nec lacus non odio pharetra suscipit. Aenean eu neque eget dui pulvinar imperdiet. Duis placerat, massa sed volutpat vulputate, mi arcu auctor augue, nec ultricies leo sem eu nunc. Maecenas sapien nisl, feugiat a odio in, ornare pharetra lorem. Vestibulum nulla dui, ultrices ut odio ac, placerat ullamcorper enim. Sed feugiat nisi justo, eu dignissim tortor eleifend non. Donec finibus turpis ut condimentum varius. Donec sed dolor viverra, accumsan dolor vitae, iaculis dui.</div><img src="http://nsa33.casimages.com/img/2015/02/10/150210074539389282.png" alt="Histoire" /></div>
Les votes sont ouverts une semaine, vous avez du temps pour choisir et disséquer tout ça ^^
Et encore merci de vos participations ! Elles sont superbes (=