Le staff approuve -> Les votes

Voici donc venue l'heure des votes ! Je rappelle donc que l'objectif était de créer un message de validation (acceptation ou refus) utilisable par un staff de forum (ou non d'ailleurs).

Je vous laisse donc voter pour votre préféré parmi les suivants ! Je ne sais pas encore jusqu'à quand seront ouverts les votes. Probablement une dizaine de jours (:

Alors un peu de nerfs marin d'eau douce !

Voici donc la première participation par Elysia :

Code:

<br/><div class="validation"><div class="validation_icon"><img src="http://nsm08.casimages.com/img/2015/04/25//15042505135119468513202870.png" /></div><div class="validation_texte"><p class="non_survol">Commande validée</p><p class="survol"><span>Veuillez patienter en respectant <a href="#">les conditions de relances</a>.
Test</span></p></div></div> <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <style>p{margin:0} .validation{margin:auto;width:490px;height:60px;padding:5px;background:rgba(180,200,65,.4);transition:all 1s ease-out;-webkit-transition:all 1s ease-out;font-family:Montserrat,sans-serif!important;color:#94a62e;box-shadow:0 0 5px 1px #9bb029} .validation:hover{background:rgba(180,200,65,1);box-shadow:0 0 5px 1px #9bb029;-webkit-transition:all 1s ease-out;transition:all 1s ease-out} .validation_icon{float:left;width:60px;height:60px;background:#94a62f;text-align:center} .validation_icon img{width:50px;height:50px;margin-top:5px} .validation_texte{width:430px;height:60px;background:#c7d673;position:absolute;margin-left:60px;line-height:50px!important;overflow:hidden} .non_survol{width:410px;height:40px;padding:10px;line-height:40px;text-align:center;font-family:Montserrat,sans-serif!important;font-size:25px;text-transform:uppercase;letter-spacing:.1em} .survol{position:absolute;margin-left:-430px;margin-top:-60px;width:420px;height:50px;padding:5px;background:#d6e099;line-height:50px;font-family:Montserrat,sans-serif!important;text-align:center;font-size:12px;overflow:hidden;-webkit-transition:all 1s ease-out;transition:all 1s ease-out} .validation:hover .survol{margin-left:0;-webkit-transition:all 1s ease-out;transition:all 1s ease-out} .validation a{color:#afca15;text-shadow:1px 1px 0 #e5f392;text-decoration:none!important;-webkit-transition:all .5s;transition:all .5s} .validation a:hover{color:#fff;text-shadow:1px 1px 0 #afca15;text-decoration:none!important;-webkit-transition:all .5s;transition:all .5s}</style>

La deuxième :


   
   

Code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>@keyframes valid_blink{0%{box-shadow:none}50%{box-shadow:0 0 20px #32CD32}100%{box-shadow:none}}@-webkit-keyframes valid_blink{0%{box-shadow:0 0 0}50%{box-shadow:0 0 20px #32CD32}100%{box-shadow:0 0 0}}.valid_staff_s{width:400px;height:120px;background-color:#222;border-radius:15px;margin:auto;margin-top:20px;margin-bottom:20px;-webkit-animation:3s cubic-bezier(1,-0.01,0,0.99) 0s normal none infinite running valid_blink;-moz-animation:3s cubic-bezier(1,-0.01,0,0.99) 0s normal none infinite running valid_blink;-o-animation:3s cubic-bezier(1,-0.01,0,0.99) 0s normal none infinite running valid_blink;-ms-animation:3s cubic-bezier(1,-0.01,0,0.99) 0s normal none infinite running valid_blink;animation:3s cubic-bezier(1,-0.01,0,0.99) 0s normal none infinite running valid_blink}.valid_staff_s_header{color:#000;font-weight:700;font-size:12px;font-family:'Open Sans',sans-serif;text-align:center;width:175px;margin:auto;padding:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color:#D2D2D2}.valid_staff_s p{color:#F4F4F4;font-family:'Open Sans',sans-serif;font-size:11px;padding:5px 15px;text-align:justify}</style>
    <div class="valid_staff_s"><div class="valid_staff_s_header">La commande est validée !</div><p>▬ Il est autorisé de la relancer toutes les 48h minimum.<br>▬ Une commande laissée sans nouvelles sera relancée au bout de 10 jours.<br>▬ Après la relance du modérateur, si nous n'avons toujours pas d'actualisation de la commande elle sera archivée après une semaine.<br></p></div>

La troisième par Alzufen :

Code:

<style>.band1 { background: #414040; width: 100px; height: 75px; z-index: 997; } .band2 { background: #000; width: 200px; height: 50px; transform: rotate3d(-5, 30, 0, 74deg); position: absolute; top: 0; left: -5px; z-index: 998; } .band3, .band3bis { position: absolute; background: #2A2A2A; width: 300px; height: 75px; z-index: 999; } .band3 { transform: skewX(10deg); top: 12px; left: 83px; } .band3bis { transform: skewX(-10deg); top: 12px; left: 61px; } .band4 { background: #000; width: 200px; height: 50px; transform: rotate3d(-5, -30, 0, -74deg); position: absolute; top: 0; left: 250px; z-index: 998; } .band5 { position: absolute; background: #414040; top: 0; width: 100px; height: 75px; z-index: 997; left: 340px; } .texte { width: 304px; height: 73px; overflow: hidden; position: absolute; top: 14px; left: 70px; z-index: 999; font-size: 11px; text-align: justify; font-family: 'Times New Roman'; line-height: 1;}</style><div style="position: relative; overflow: hidden; height: 90px; width: 439px; margin: auto;"><div class="band1"><img src="http://img11.hostingpics.net/pics/174337valide2.png" style="height: 75px;"/></div><div class="band2"></div><div class="band3"></div><div class="band3bis"></div><div class="band4"></div><div class="band5"></div><div class="texte" style="color: #C7ECC9;">Félicitation ta commande est maintenant validée, il te reste pu qu'à attendre... N'oublie pas, tu peux upper toutes les 24h !
Félicitation, tu es validée, tu peux maintenant aller RP, mais pense à recenser ton avatar !
Bravo, tu corresponds tout à fait à ce qu'on recherche, bienvenue dans l'équipe :D</div></div>

En enfin la dernière par Onyx :

Code:

<div style="width: 80%; padding: 5px; background-color: #CFD8ED; box-shadow: 0px 0px 5px #4B6298; color: #7084B4; font-family: 'georgia'; font-size: 14px; text-align: center; text-shadow: 1px 1px 0px #f2f6ff; margin: auto;"><div style="padding: 10px; border: 1px solid #f2f6ff; ">Bienvenue dans notre cité petit pétoncle ♥

Après avoir étudié avec attention votre demande d'asile, nous acceptons de vous accueillir parmi nous et nous <b>validons</b> votre nouveau statut en tant qu'<b>apprenti gardien d'Océanis</b>.

~ Puisse les courants marins vous porter vers votre destin ~</div></div>

Je rappelle que j'apprécie qu'on tienne compte du code quand on vote mais que le rendu compte aussi (donc oui Grav tu peux voter ).

La première est vachement classe, le bémol selon moi, c'est que déjà le texte est tronqué, mais ça, ils le sont quasi tous donc bon, suffit de réajuster après mais aussi qu'un effet au survol sur une validation c'est pas idéal. Ce n'est que mon avis, mais on va pas forcément tous survoler un code pour voir si y'a un effet au survol surtout qu'il y a rien qui l'indique ce survol. Il permet malgré tout de rajouter un peu de texte et de ne pas encombré l'aperçus principal pour ceux qui ont l'habitude, donc ça reste chouette

La deuxième est sympa, l'idée de l'ombre vert en "Keyframes" qui fait style néon est intéressant mais pas pour une validation... Ca fais trop de code pour pas grand chose, les keyframes c'est bien mais avec modération. Après, sans ça, c'est sympathique, sobre mais bien :) L'idée serait intéressante à exploiter avec un code mis en JS pour faire ça, on aurait pas à le re-poster à chaque fois, il chargerait tout seul et on pourrait un peu plus l'opti ^^ Ah et elle se retrouve tronqué aussi *siffle*

La trois c'est pareil que les deux autres, elle se retrouve tronqué mais ça, ça reste un détail. Après, elle est simple, elle fait un peu penser à un ruban genre comme ceux du forum après ça fais beaucoup de code pour pas grand chose aussi :s

La dernière est très sobre, très classique, y'a de quoi écrire un bon texte si on réduit la police (ou même pas) et donc voilà ça le fais, elle est bien, classe, après, pour une validation on voit plus souvent le vert, mais ça dépend du design du forum... Cela dit, si la personne qui l'a fait est un archi, il respecte pas sa couleur //TITANIC// (ironie, ironie)

Malgré tout, mon vote va pour la première, car même si l'effet hover ne me convient pas, elle n'en reste pas moins classe

Ne me demandez pas ce que je fous là, je ne sais pas moi-même...
J'ai voté pour la deuxième car bien que très simple je suis fan du clignotement... Il va falloir vous habituez au fait que je vote toujours sur des détails futiles et sans grand intérêt (je fais pareil en graph').

La première est très simple mais elle fait son petit effet, j'ai failli voter pour celle-ci d'ailleurs ^^
La troisième colle assez bien avec de design actuel de N-U mais je suis assez d'accord sur le fait que c'est beaucoup de code pour un petit truc.
La troisième est sobre, simple et efficace mais elle ne m'a pas assez convaincue désolée ^^'

Je ne ferais pas de remarque sur le texte tronqué, d'une part car il a déjà été souligné et d'autre part parce que le rendu ici est peut-être différent du rendu sur les forums test ou autre plateforme et donc vous ne vous doutiez peut-être pas que ça donnerait ça :/ un petit réglage dans le code et il n'y paraîtra plus

Bravo à tous les participants en tout cas, c'est du bon travail ^^

J'ai pas mal hésité, pour ma part, (depuis hier soir, j'suis en mode "mais pour qui voteeeeeer?" )

La première, je l'apprécie beaucoup, et elle est assez proche de ce que je voulais faire si j'avais eu le temps de participer (je suis une folle sur les effets de volet coulissant en ce moment U_u j'ai découvert comment faire avec beaucoup de bidouille, ça a révolutionné ma vie //PAN) Sur mon écran, le texte n'est pas coupé, mais ça doit dépendre des ordis tout ça.

La seconde, je l'ai trouvé délirante avec le clignotant, mais l'harmonie des couleurs, entre le gris/noir et le vert ne me parle pas trop. En plus, dans le cadre en haut, il y a, sur mon écran en tous cas, un point d'exclamation orphelin à la ligne. ça hérisse le poil de la typographe que je suis : avant les signes de ponctuation, ce sont des espaces insécables qu'il faut, in-sé-ca-bleuh! //PAN (vous sentez la déformation professionnelle des études là?) mais le clignotant est trippant!

La troisième est celle à laquelle j'ai le moins accroché. Y'a de la bonne idée, la petite bannière est plutôt cool, mais l'icône "validé" me semble pixellisée à mort, comme si on avait agrandit l'image, et ça... non... ça, ça va pas être possible quoi! //mode graphiste qui râle off// c'est dommage, n'empêche, parce que la disposition était toute choute

La dernière est la plus simple, certes, mais elle est bleue. Et, comme la première, a une bonne harmonie colorimétrique. Et en plus, elle est parfaitement lisible, et, pour les gens bavards comme moi, on peut même écrire beaucoup dedans (plus que dans la première!) Du coup, j'ai voté pour la 4e (malgré une grosse hésitation avec la 1e). Et puis bleu quoi! (je ne sais pas qui l'a codée, mais je l'aime!)

Le but de l'exercice étant aussi que le texte s'affiche malgré la petite hauteur imposée, je trouve que le seul qui s'en est sorti est bien la dernière! Le texte est tronqué au passage de la souris pour le premier, idem pour le second, et l'affichage du troisième me semble bizarre. Du coup je vote la dernière: simple et efficace, qui a pas de soucis de texte.

Sinon, du point de vue application et code, j'aurai voté la première, mais le problème de texte lui a volé le vote =P

Bon, je me décide à voter aussi ! Ou plutôt à ne pas voter >< Je développe.

Déjà tous les 4 vous m'avez fait un beau truc franchement !

Pour le 1° quand je l'ai reçu limite j'avais déjà décidé de voter pour celui-là xD Mais finalement le texte est tronqué et j'aurais préféré avoir un overflow: auto pour y remédier :/ Ou tout simplement pouvoir l'avoir sur deux lignes en réduisant le line-height c'était amplement faisable, voir même en le supprimant. C'est vraiment dommage parce que la création est super en dehors de ça ! D'ailleurs, ça m'a choqué de voir les balises style à la fin et non pas au début comme d'habitude '-' Je savais pas que c'était possible et pris en compte !

Pour le 2° mamamia pourquoi donc nous as-tu mis du noir D8 ? J'aime le noir Mais pour une validation je trouve que c'est peut-être trop sombre. Mais après tout dépend du forum. J'adore l'effet clignotant. Mais quand tu vois le code en question, je me dis que pour un message de validation c'est peut-être beaucoup '-' Enfin sauf si le reste du forum est ainsi, ça me paraît énoooooorme comme travail u_u Et puis il y a aussi le débordement du texte, alors que là le overflow: auto aurait été de mise !

Pour le 3°, je n'aime pas les bandeaux >< J'ai jamais kiffé ça. Mais j'apprécie l'effort au niveau du code, et je ne vois pas grand chose à y redire Bien que je suis d'accord avec Eha, pourquoi donc l'image est ainsi pixelisée :o ?

Pour le 4°, j'ai envie de dire oui ! Mais non x) Ce qui me chagrine c'est le code en only HTML avec le CSS intégré.

Alors oui je chipote sur beaucoup de chose mais c'est pour montrer que je ne peux pas me décider. Vous m'avez fait de belles créations et je vous en remercie (: Mais mon vote sera blanc cette fois-ci (mate la rime ).

Mon vote va vers la première création (parce que oui, je m'enjaille trop avec les trucs animés!)
Mais pas de panique pour les autres c'est aussi super!
Dommage que les textes ne soient pas pas complets ou qu'ils dépassent pour les trois premiers
Je suis une quiche donc pas très bien placée pour dire qu'est-ce qui est bien ou non u.u mais bon... XD

Comme beaucoup l'ont dit c'est vraiment dommage que les textes soient coupés. Rien que pour ça j'ai hésité longuement à voter pour le dernier qui est simple, efficace, joli ET QUI N'A PAS LE TEXTE COUPE (quelle émotion! ><, mais en fait non...

Le premier est vraiment trop classe. J'adore l'idée de base. Si je dois critiquer quelque chose (notez que ça relève surtout de mes capacités intellectuelles limitées *.*) j'avais pas capté qu'il y avait un effet hover avant de voir le code. C'est à cause des gens comme moi que toute la classitude d'un code se perd. Je m'en excuse platement...
Ceci étant dit ça donne l'opinion d'un boulet comme moi, et je dois dire que j'étais déjà saucé par le style du premier avant même de me rendre compte qu'il y avait un effet. Pour faire court: je suis fan!

Yo !

J'ai le plaisir de venir vous annoncer que nous avons un gagnant ! Ou plutôt une gagnante, qui est Elysia ! Encore xD. Tu remportes donc 6 XP pour avoir gagné et 4 XP pour avoir participé (:

Je remercie tous ceux qui ont participé parce que vos créations sont toutes sympas ! Et malgré que mon schéma était prêt je n'ai pas trouvé le temps de le coder :/ Je le proposerai probablement en LS. D'ailleurs, je vous invite à le faire si vous le souhaitez. Ce serait vraiment dommage de passer à côté de vos chefs-d'œuvres !

Bravo Elysia (Je vois souvent ce nom en ce moment XD)

Tu crois vraiment que je vais mettre ma créa en LS ? Genre j'ai reçu un vote magique de je ne sais pas qui juste pour me faire plaisir je suis sûr, et tu crois que je vais mettre en LS ? En plus, si l'image était pixellisé, c'est parce que j'ai fait ça à l'arrache pour te faire plaisir et participer à ton défi car tu l'avais demandé XD Du coup, j'ai pris une petite image, je pensais que ça irait, et finalement non, alors j'ai agrandis en CSS et ça a fait tout moche mais au moins j'ai participé XD

J'avais déjà assez galéré à faire un effet bandeau avec les rotations et tout le tralala, qui en plus n'est pas totalement réussi et se retrouve tronqué car en prime, j'avais pas testé mon code sur FA, alors hein

Bref, Félicitation aux participants et à la gagnante

Bon ok peut-être pas toi xD Mais Elysia et les deux autres peuvent très bien le faire
En tout cas merci d'avoir participé

Bravo Elysia, j'avais voté pour toi en plus *^*

Et merci à ceux qui ont aimé mon code (le dernier) que j'ai fait en 5 minutes (sérieusement, 5 minutes) XD
Moi je vais chercher mes 4 XP Alzu, j'aime les XPs, c'est délicieux avec du nutella :héhé:

Pour la première création je vois pas d'inconvénient, le texte est pas tronqué chez moi...

Len kagamine a écrit:Pour la première création je vois pas d'inconvénient, le texte est pas tronqué chez moi...

Maintenant oui, avec le nouveau thème. Le captain a changé du code qui influait sur les messages. Donc certain ont toujours leurs textes tronquées, d'autres non. Tout dépend des réglages utilisés.

D'accord, merci pour l'info o/