LEGO #2- les votes - P@lcopie gagnante !

Holà señores y señoritas !
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

---

   

           

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

---

   
   

   

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

---

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 (=

J'ai beaucoup hésité entre la 1 et la 4, parce que je trouve que ce sont les plus originales *-* (même si j'y connais pas grand chose en codage xD) La 4° est super bien présentée mais je sais pas pourquoi la première me paraît la moins classique du coup ce sera la 1ère pour moi *^*
Merci à tous pour vos participations en tous cas tout est trop cool T-T

J'ai adoré la première aussi! J'aime beaucoup le côté tout simple, et la transfo qui passe derrière, c'est vraiment bien trouvé *w*

Sinon la 3 était un petit coup de coeur aussi <3

J'crois que, merde quoi. Vous vous êtes super bien débrouillés ! C'est super, tous !
On a pas une transition pareille, toutes sont différentes, j'vous avoue que je ne m'attendais pas à tant de variétés !
Alors pour me décider franchement ce fut coton.
J'ai procédé par élimination, la 5 -> trop banale ; la 4 -> malgré que le chat soit mignon, tout comme la transition, elle ne me branche pas autant que les autres ; la 1 -> sont mimis comme tout ces deux blocs, la transition hachée, j'adore ! Mais malgré tout ce n'est pas 'suffisant'. C'est qu'il y a du niveau ; la 2 -> je dis oui mais. Mais parce que la 3 existe, et la 3 est vraiment ouah ! En fait c'est le rendu visuel qui m'a décidé entre la 2 & la 3 ~ 

J'ai aussi fonctionné par élimination... Je trouve la vitesse de la création 5 un peu trop lente, ce qui lui donne un air saccadé. La 2 utilise des préfixes inutiles (les moz-transform), alors même si j'aime l'effet, je juge le code. Pour la création 4, elle va à l'inverse des instructions (il fallait une transition qui dévoilait quelque chose "sous" l'autre bloc et là, c'est le contraire). La 3 est cool, mais la transition est plus lente au retour et ça m'énerve è_é Il reste la 1, mais bon, en même temps, elle est plutôt simple... Bah finalement, je sais pas quoi choisir

Err... Je pense que je vais revenir voter juste s'il y a égalité ou si c'est serré, comme ça j'aurai le temps d'y réfléchir un peu plus XD

A mon tour de commenter ! Bon, comme je ais qui les a faites je n'ai pas voté, j'ai peur que mon subconscient fasse du favoritisme x)
Heu allez, dans l'ordre !
La première m'a bien plu par l'originalité de l'idée, en plus c'est vraiment complexe à mettre en oeuvre, chapeau ! Mais je lui trouve un petit défaut: le mouvement est saccadé, disons qu'on se rend compte que le mouvement est décomposé en deux temps, alors que rajouter un petit "ease-in" à la transition aurait peut-être suffi; Après comme le dit A-lice c'est peut-être voulu !

La deux est sympa aussi, mais la transition reste classique, c'est plutôt le contenu des blocs qui est intéressant; d'ailleurs il y a un problème au niveau de la transition si on ne met pas sa souris au bon endroit, c'est un peu dommage (bon après ya les bugs que fait mon ordi parce qu'il est trop lent, mais bon x))

La troisième, heuuu... Elle est méga dure àcomprendre mais au final j'ai compris x) Ca m'a fait bizarre de voir le "tour" que faisait le bloc, je me suis demandé si 180° étaient utiles mais en fait oui à cause du texte. Sinon j'adore l'idée de la transition, le bloc qui en cache un en en dévoilant un autre, c'est cool ! C'est celle que j'aime le plus, esthétiquement, aussi.

La quatre je trouve que c'est la plus pro: l'idée paraît simple mais tout est très bien géré, le petit rebondissement de l'onglet, le zoom de l'image, l'apparition progressive du texte... C'est un codage qui paraît idéal pour un avatar ou quelque chose du même genre, mais il ya juste un petit truc que je trouve bizarre, c'est qu'il n'y aie une ombre qu'au hover. Et enfin même si le bloc dévoilé n'est pas vraiment dessous l'idée y est et le rendu est très beau aussi !

Et enfin la cinquième ^^ Pour moi c'est la transition la plus classique, celle que j'utilise presque toujours, juste après l'apparition/disparition. Et il y a un truc qui m'énerve, c'est la durée de la transition: trop de suspennnnnnnse ! Mais à vrai dire c'est tout l'objet qu'il faut considérer je crois et effectivement c'est sympa comme fiche de présentation / prédefs, c'est même plutôt original ! En plus les images sont un bon moyen de décrire son perso aussi.

Wow, quel boulot vous avez tous fait ! Peut-importe la création, ça rend super bien comme effet, gg !

Je voterais pour la première, je trouve ça sobre et efficace. Ça ferait vachement bien dans des topics explicatifs genre une faq où l'encadré visible contiendrait la question et celui qui se dévoile la réponse *.*

Alors, alors, je suis incapable de juger le codage sérieusement, vu que je n'ai que des notions assez vagues mais visuellement, je trouve toutes ces transitions très agréables, pile poil dans le bon timing et originales. La plus esthétique à mes yeux est incontestablement la troisième créa mais, question vote, j'hésite surtout entre la 1 (très amusante, précise et comme l'a dit Dako, super utile pour des petites explications!) et la 4 (la plus originale). Bon, allez, la première me semble plus sympa à utiliser, j'vais donc voter pour celle-là mais c'est serré xD

Félicitations à tous les participants :)

Du coup je rejoins mes VDD's, tous les rendus sont différents, tous ont étaient utilisés différemment et bravo à tous pour ce super travail 8D !

Alors personnellement j'ai eu beaucoup de mal à voter, puis finalement j'ai pas mal hésité entre la première et la troisième, puis après et bah....je vous dirais pas pour qui des deux j'ai voté 8DD !!!

Bravo à tous pour vos rendus ! :)

1 / Très sympa l'idée de faire une transition en 2 temps (^-^), par contre comme Alumine j'ai un petit peu de mal avec l'effet saccadé. :)

2 / Un effet sympathique, mais ces temps ci je le vois partout donc... J'ai un peu de mal avec >-<. Sur Firefox effectivement la transition bug un peu :)
Par contre, j'aime bien la manière dont la carte a été travaillée !

3 / Effet sympa et inattendu ! Par contre j'ai un peu de mal avec la vitesse, c'est peut-être un peu lent ?

4 / Ma préférée ! Par contre, comme cela a été dit au dessus, c'est l'inverse des consignes. :)
Par contre, je pense qu'un poil moins rapide ça aurait été sympa :3, c'est ptet un peu "abrupte" sinon :)

5 / Le bon classique mais toujours efficace slide up :) ! Peut-être un poil plus rapide, non ? C'est looong d'attendre ♥

Une pluie d'étoile sur tous vos rendus (⊃｡•́‿•̀｡)⊃━☆ﾟ.*･｡ﾟ ♥

Je rejoins l'avis de mes VDD, et bravo à tous! Je n’y connais rien, mais les effets rendent bien.
J'ai voté pour la 3 car je ne m'attendais pas à ce type d'effet ^^

Mon vote ira aussi pour la 3 :) Je trouve les couleurs sympas et la transition originale

Ho, comment vous êtes trop doués quoi c:
Personnellement je me suis même pas aventurée dans les codes mais j'ai mis du temps à me décider entre la 1 et la 3.

Je trouve la 1 très soft, classe et efficace, en plus elle est toute mignonne et ça me donne envie de manger des chips.
Puis finalement, la 3 m'a vraiment tapé dans l'oeil (paske je suis quelqu'un de superficiel et que je la trouvais trop fat et way).
Au niveau de l'animation, les deux me plaisaient autant mais la 3 avait cet agencement séduisant et...poné.

(haaa et le petit coup de coeur pour le code avec le chaton, dont l'animation est aussi méga agréable à regarder !)

Et voilà, les votes sont terminés !
Merci à tous pour vos participations et vos votes !
Bon et je vais pas vous faire attendre x) La gagnante est... P@lcopie !
Félicitations à elle !
Les autres participants étaient Onyx pour la première création, ça a été serré ! Scavenger pour la n° 2, P@lcopie la 3, Celsius pour la 4 et enfin A-lice pour la cinquième.

Je trouve que c'est super que ce défi aie permis à des gens qu'on voit pas trop d'habitude dans le coin des verts de participer, et même de gagner ^^

Félicitation Pal ! Comme quoi tu n'es pas si nulle que ça

(Whut ? o.o Mais pourquoi y'a mon nom écrit en gros et gras là ?)
...
Bon, ça fait maintenant 20 minutes que j'attends la chute, et comme je vois qu'il y en a pas je m'inquiète...
Heu. Merci ? (j'ai pas encore atterri faut pas m'en vouloir) Je suis vraiment trop heureuse de recevoir ce prix aujourd'hui ! On m'avait dit de préparer un discours lors de ma nomination mais j'en ai pas fait... /pan/

Franchement je me sens mal de gagner avec toutes les créations trop cool que vous avez faites, alors merci à tous pour ça c'est trop bien ! Et heu... Non mais c'est surréaliste, j'y connais que dalle en codage moi xD Bon, on va dire que mon exemple est à suivre pour tout ceux qui osent pas se lancer ! Ouais c'est dur mais on peut y arriver *^*

(PS : Et si je peux échanger mes XPs codage contre un vœux, je veux le secret de l'avatar de Celsius *-* /pan/)

Toi aussi il t'intrigue cet avatar xD !

Carrément *-*
(d'après ce que j'ai compris c'est une sorte d'image aléatoire en fonction de l'actualisation de la page mais j'avais vu ça que sur des bannières alors ça m'intéresse xDD)

Ha et j'ai zappé un truc !
*tire la langue à Alumette*
J'ai gagnéééééééé !
/pan/
(maintenant la gamine de trois ans se retire...)

Félicitation P@lcopie pour ta victoire ! :)

Je pensais que la 1 était de Sca... ou bien la 2 (à cause du br{display:initial} ), pour celle de P@l j'avais trouvé, Celcius aussi et les autres aucune idée

Pour les curieux, sans dévoiler les petits secrets de Celsius, il a utilisé un petit peu de php. :3 (mon dieu, c'est toujours un peu triste, j'ai l'impression de révéler les secrets d'un magicien là ... /ZBAF/)

Spoiler:

Wow toutes ces possibilités trop cool !
Et t'inquiète pas pour les secrets, pour l'instant c'est du chinois pour moi, il me faudra bien 3 ou 4 ans avant de comprendre le principe, donc d'ici là ça aura le temps de changer --' (houla je serai jamais allé la chercher dans la partie RPG cette astuce par contre o.o Heureusement que tu le connaissais xD)
Par contre pour les autres je dis pas ♫

Je suis restée assez vague volontairement, il tient peut-être à garder son petit secret pour l'instant
C'est cool comme astuce tant qu'on n'en abuse pas trop (j'ai donné les premiers exemples qui me sont venus à l'esprit, mais on pourrait en imaginer des dizaines d'autres je pense) XD. Par ce que si les images sont vraiment trop différentes et qu'on ne reconnait plus l'avatar de la personne, ça devient vite agaçant je trouve. x)

C'était donc ça son secret... C'est trop classe ! Surtout quand on s'appelle Celsius
Un jour j'apprendrai aussi le PHP... quand j'aurai compris le JS
Le mystère de l'avatar magique est presque résolu...