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.

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

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

    Sondage

    Quelle est votre transition préférée ?

    [ 7 ]
    LEGO #2- les votes - P@lcopie gagnante ! Empty30%LEGO #2- les votes - P@lcopie gagnante ! Empty [30%] 
    [ 1 ]
    LEGO #2- les votes - P@lcopie gagnante ! Empty4%LEGO #2- les votes - P@lcopie gagnante ! Empty [4%] 
    [ 12 ]
    LEGO #2- les votes - P@lcopie gagnante ! Empty52%LEGO #2- les votes - P@lcopie gagnante ! Empty [52%] 
    [ 3 ]
    LEGO #2- les votes - P@lcopie gagnante ! Empty13%LEGO #2- les votes - P@lcopie gagnante ! Empty [13%] 
    [ 0 ]
    LEGO #2- les votes - P@lcopie gagnante ! Empty0%LEGO #2- les votes - P@lcopie gagnante ! Empty [0%] 

    Total des votes: 23
    Sondage clos
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Mer 18 Fév 2015 - 21:28

    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

       
    Survole-moi !
    Je suis un petit message caché ~


    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

       
       

       
    NOM
    Prenom
    Age - Sexe -
    Enjoy !
    Je suis :
    à 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



    Infos :

    Nom :
    Prénom :
    Âge :
    Groupe :
    Métier :
    Infos
    Caractère :

    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.
    Caractère
    Histoire :

    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.
    Histoire


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



    Alumine
    P@lcopie
    P@lcopie
    FémininAge : 27Messages : 283

    Mer 18 Fév 2015 - 21:35

    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



    LEGO #2- les votes - P@lcopie gagnante ! 1443821629-chmoul-signa
    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Mer 18 Fév 2015 - 21:44

    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




    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 18 Fév 2015 - 22:05

    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 ~ 

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 18 Fév 2015 - 22:47

    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 :hum:

    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



    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Jeu 19 Fév 2015 - 22:59

    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.





    Alumine
    Anonymous
    Invité

    Ven 20 Fév 2015 - 11:13

    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 *.*
    Samhain
    Samhain
    FémininAge : 31Messages : 4972

    Ven 20 Fév 2015 - 21:37

    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). :hum: 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 :)




    gif1gif2
    Anonymous
    Invité

    Ven 20 Fév 2015 - 21:39

    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 !!!
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 21 Fév 2015 - 22:02

    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 (⊃。•́‿•̀。)⊃━☆゚.*・。゚ ♥
    Hismeria
    Hismeria
    MasculinAge : 32Messages : 2424

    Dim 22 Fév 2015 - 20:12

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

    Dim 22 Fév 2015 - 20:20

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



    LEGO #2- les votes - P@lcopie gagnante ! 1492519401-bg-copie
    Toupimero
    Toupimero
    FémininAge : 64Messages : 56

    Mer 25 Fév 2015 - 9:22

    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 !)
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Mer 25 Fév 2015 - 16:18

    Et voilà, les votes sont terminés !
    Merci à tous pour vos participations et vos votes ! Very Happy
    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 ^^



    Alumine
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 25 Fév 2015 - 16:40

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

    P@lcopie
    P@lcopie
    FémininAge : 27Messages : 283

    Mer 25 Fév 2015 - 19:41

    (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/)



    LEGO #2- les votes - P@lcopie gagnante ! 1443821629-chmoul-signa
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 25 Fév 2015 - 20:44

    Toi aussi il t'intrigue cet avatar xD !

    P@lcopie
    P@lcopie
    FémininAge : 27Messages : 283

    Mer 25 Fév 2015 - 21:00

    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...)



    LEGO #2- les votes - P@lcopie gagnante ! 1443821629-chmoul-signa
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 25 Fév 2015 - 21:02

    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 :toto:

    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:


    Dernière édition par Nihil Scar Winspeare le Mer 25 Fév 2015 - 22:44, édité 1 fois (Raison : Correction faute au pseudo de Celsius)
    P@lcopie
    P@lcopie
    FémininAge : 27Messages : 283

    Mer 25 Fév 2015 - 21:29

    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 ♫



    LEGO #2- les votes - P@lcopie gagnante ! 1443821629-chmoul-signa
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 25 Fév 2015 - 21:41

    Je suis restée assez vague volontairement, il tient peut-être à garder son petit secret pour l'instant :toto:
    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)
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Mer 25 Fév 2015 - 22:29

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



    Alumine
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 12:47