Y'a de l'ambiance ! #1

Ven 10 Oct 2014 - 16:08

NyoTheNeko

Age : 30Messages : 5683

Ven 10 Oct 2014 - 16:08

Salut les loulous! :hug:

On relance un nouveau défis sous la forme du tout premier Y'a de l'ambiance ! Pour vous rappeler le principe, c'est de créer un élément qui a comme inspiration un mot ou un sentiment. Pour en savoir plus, je vous invite à lire ce sujet !

Le Thème: La Paix

Comme vous pouvez le voir, votre thème sera la PAIX! Je vous impose d'ailleurs un élément à créer: une fiche de présentation.

Petites indications supplémentaires:

Vu que c'est une fiche de présentation, je vais vous demander d'utiliser la fiche de CSS du forum. Il vous faudra donc me donner une prévisualisation en IFRAME et donner le code du CSS + HTML.
Évitez de faire plus de 550 pixels de large pour la fiche, histoire de ne pas déformer NU lors du sondage!
Vous pouvez utiliser toutes les ressources que vous voulez (image, Google Fonts, etc). Tout ce que je demande c'est que ça respecte le thème et le fait que ce soit une fiche de présentation!

Mis à part ça, laissez l'artiste en vous et votre imagination prendre le pas!

Comment participer et jusqu'à quand?

Vous avez deux semaines et deux jours, soit jusqu'au 23 novembre 23h59 pour m'envoyer par MP vos créations. Pour cela, il faudra me donner une prévisualisation + le code de la fiche en entier pour qu'ils puissent être affichés tous les deux durant le sondage qui sera lancé le 24 novembre!

Et surtout, n'oubliez pas:

Des XP à gagnerN'oubliez pas que chaque participation vous rapporte 4 XP et remporter l'épreuve vous en rapporte 6!

Dernière édition par NyoTheNeko le Sam 3 Jan 2015 - 13:03, édité 4 fois

Sam 18 Oct 2014 - 11:17

Sparrow-style

Age : 39Messages : 32055

Sam 18 Oct 2014 - 11:17

Hello x)

Dis-moi, j'ai une question : est-ce que tu autorises l'utilisation d'images/créations dans le code ou bien est-ce qu'il faut que ce soit 100% codage ?

Jeu 30 Oct 2014 - 9:28

Nihil Scar Winspeare

Messages : 5244

Jeu 30 Oct 2014 - 9:28

Hello :)

Finalement ça se passe comment pour ce défi :s ? >o<

Mer 5 Nov 2014 - 9:33

NyoTheNeko

Age : 30Messages : 5683

Mer 5 Nov 2014 - 9:33

Me revoilà, désolée! =D

Alors je donne uniquement un thème: vous pouvez utiliser toutes les ressources que vous voulez tant que c'est du code! ^^ Je vais le préciser dans le premier sujet! =D
Je vais d’ailleurs redonner 2 semaines, ayant reçu aucun code jusqu'à présent! xD

Mar 11 Nov 2014 - 12:03

NyoTheNeko

Age : 30Messages : 5683

Mar 11 Nov 2014 - 12:03

Petit up! Je n'ai toujours rien reçu! =(

Mar 11 Nov 2014 - 12:22

Nihil Scar Winspeare

Messages : 5244

Mar 11 Nov 2014 - 12:22

Hello,

J'ai une petite questions supplémentaire, c'est une fiche de présentation style forum de RP ou bien forum en général ? (en effet, en général le rendu est pas vraiment le même haha)
Je vais essayer de trouver le temps pour faire quelque chose, mais je ne suis pas sûre >.<, je dois dire que le thème de la paix ne me parle pas trop pour l'instant :toto:

, mais je suis sûre que je finirai pas trouver Very Happy

Mar 11 Nov 2014 - 12:28

Usul

Age : 36Messages : 75

Mar 11 Nov 2014 - 12:28

J'ai commencé pour ma part le codage ! Wink

Mar 11 Nov 2014 - 12:28

NyoTheNeko

Age : 30Messages : 5683

Mar 11 Nov 2014 - 12:28

Alors, c'est au choix, tant que c'est une fiche de présentation sur un forum. J'avoue que javais plus en tête pour forum RP, mais c'est toi qui choisis! ^^

Alors pour te donner une idée, le thème de la paix peut s'étendre sur beaucoup de trucs. Non pas uniquement la paix dans le sens de l'inverse de guerre, mais ça peut aussi être la paix intérieure (exemple super: le bouddhisme), ou un simple sentiment de paix (notamment quand tu regardes les coucher de soleil, la neige tomber, etc). C'est vraiment un thème très large. Je m'attends pas non plus à une fiche remplie de colombes et de signes de paix xD

Mar 11 Nov 2014 - 21:11

Usul

Age : 36Messages : 75

Mar 11 Nov 2014 - 21:11

Participation envoyée ! =)

Mar 11 Nov 2014 - 22:08

Invité

Mar 11 Nov 2014 - 22:08

Du coup c'est possible jusqu'à quelle date ? Je suis un peu perdue TT

Mar 11 Nov 2014 - 22:43

NyoTheNeko

Age : 30Messages : 5683

Mar 11 Nov 2014 - 22:43

Jusqu'au 19 novembre! C'est écrit dans le premier message! ^^

Dim 16 Nov 2014 - 1:07

NyoTheNeko

Age : 30Messages : 5683

Dim 16 Nov 2014 - 1:07

Plus que trois jours et je n'ai reçu qu'une seule participation! :sad:

Lun 17 Nov 2014 - 15:42

Nihil Scar Winspeare

Messages : 5244

Lun 17 Nov 2014 - 15:42

Hello :)

Je sais pas du tout si j'aurai le temps de participer ><, mais il me vient une nouvelle question... (oui oui, toujours là avec mes questions ennuyantes :toto:

)
Il s'agit d'un fiche où les membres postent seulement leur HTML dans le topic, le CSS étant dans le PA... Est-il possible d'ajouter un peu de Javascript ou pas trop ^-^ ? Je ne sais pas encore je vais en utiliser, mais c'est plus pour savoir "au cas où"

Lun 17 Nov 2014 - 15:45

NyoTheNeko

Age : 30Messages : 5683

Lun 17 Nov 2014 - 15:45

Si c'est du Javacript que tu peux mettre dans la section des modules de PA (vu que dans les messages ça marchera pas) et en cochant "sur les sujets" (ou sur toutes les pages), alors oui! ^^

Lun 17 Nov 2014 - 15:52

Nihil Scar Winspeare

Messages : 5244

Lun 17 Nov 2014 - 15:52

Oui oui, je demandais pour mettre dans les modules, car effectivement et heureusement, on ne peut pas mettre de JS directement dans les messages :)

Merci merci. J'ignore si ça me servira mais déjà ça pourra peut-être m'aider à trouver une idée ou de l'inspiration :)

Lun 17 Nov 2014 - 16:27

NyoTheNeko

Age : 30Messages : 5683

Lun 17 Nov 2014 - 16:27

Je t'en prie! ^^ Je pense laisser encore jusqu'à ce dimanche soir si je n'ai pas de participations d'ici mercredi =/

Ven 21 Nov 2014 - 10:04

NyoTheNeko

Age : 30Messages : 5683

Ven 21 Nov 2014 - 10:04

Vu que je n'ai toujours rien reçu. je donne jusqu'à dimanche 23 novembre 23h59!

Mar 16 Déc 2014 - 18:32

Usul

Age : 36Messages : 75

Mar 16 Déc 2014 - 18:32

Hum ? Des nouvelles ? :friends:

Sam 3 Jan 2015 - 13:01

NyoTheNeko

Age : 30Messages : 5683

Sam 3 Jan 2015 - 13:01

N'ayant reçu aucune participation mis à part celle d'Usul, c'est donc elle qui gagne les XP! =D

Voici sa très jolie présentation sur le thème de le Paix (vous retrouverez le code probablement en LS lorsque Usul le postera Wink

)

Sam 3 Jan 2015 - 13:06

Invité

Sam 3 Jan 2015 - 13:06

J'adore *-* C'est très sympa, bravo Usul !

Sam 3 Jan 2015 - 13:11

Usul

Age : 36Messages : 75

Sam 3 Jan 2015 - 13:11

Merci beaucoup ! :love:

Je vais de ce pas le mettre en libre-service, au cas où ça intéresse des gens ! =)

Sam 3 Jan 2015 - 14:04

Nihil Scar Winspeare

Messages : 5244

Sam 3 Jan 2015 - 14:04

Très jolie fiche Usul *-*

Tu as très bien su faire ressortir le côté paix je trouve ♥

Si tu veux Usul, je t'ai mis sous spoiler 2 petits conseils sur ton code CSS :)

Spoiler:

Petite remarque très rapide au passage sur le code, tu peux alléger une partie du CSS en retirant certains préfixes inutiles (Savoir quand utiliser des préfixes CSS). Je pense par exemple à "border-radius" où il n'y a plus du tout besoin de mettre les préfixes ainsi qu'aux transitions (◕‿◕✿)

Ainsi :

Code:: -webkit-border-top-left-radius: 50%; -moz-border-top-left-radius: 50%; border-top-left-radius: 50%; -webkit-border-top-right-radius: 50%; -moz-border-top-right-radius: 50%; border-top-right-radius: 50%;

Peut s'alléger et devenir :

Code:: border-top-left-radius: 50%; border-top-right-radius: 50%;

Ça sera plus rapide pour toi à écrire comme ça, et ça fonctionne tout aussi bien Very Happy

Et seconde petit conseil, si tu veux rendre ton code un peu plus léger (et facile à modifier), quand tu fais un effet au survol, tu n'es pas obligée de tout répéter, il te suffit de mettre les propriétés qui changent.

Exemple concret :

Si je prends cette partie là du CSS :

Code:: .rond0 { opacity: 0.7; width : 80px; height : 80px; overflow:hidden; border-radius: 50%; border : 2px solid white; margin-top: 2px; margin-left : 20px; margin-right : 30px; float:right; -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */ -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */ -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */ transition: opacity 0.5s ease-in-out; } .rond0:hover { opacity:1; width : 80px; height : 80px; overflow:hidden; border-radius: 50%; border : 2px solid white; margin-top: 2px; margin-left : 20px; margin-right : 30px; float:right; }

On peut voir que entre .rond0 et .rond0:hover il y a plusieurs lignes qui se répètent :

Code:: width : 80px; height : 80px; overflow:hidden; border-radius: 50%; border : 2px solid white; margin-top: 2px; margin-left : 20px; margin-right : 30px; float:right;

Tu n'as pas besoin de les spécifier dans la partie .rond0:hover :)
Il te suffit de mettre seulement ce qui change (dans ton cas, l'opacité).

Ainsi tu n'auras plus que ceci pour le CSS de .rond0:hover :

Code:: .rond0:hover { opacity:1; }

L'avantage pour toi ?
Le code est moins long, du coup ça sera plus facile pour toi de t'y retrouver et surtout si tu veux par exemple changer la taille de tes images (actuellement en 80px * 80px), tu n'auras qu'un seul endroit à modifier dans le CSS... Alors que si tu laisses ce "doublon de lignes", il y aura 2 endroits à changer (.rond0 et .rond0:hover)

Ce sont bien évidemment des conseils là pour t'aider à progresser (mais surtout te simplifier la vie :p), tu peux en faire ce que tu veux, les lire, en faire un feu de bois, n'importe. :hug:

Sam 3 Jan 2015 - 14:25

Usul

Age : 36Messages : 75

Sam 3 Jan 2015 - 14:25

Oooooooooh merci !! :hug:

Le second conseil, je le savais, mais j'ai pas appliqué comme une nunulle ! :wall:

Faut vraiment que je l'applique !

Pour le premier, je ne savais pas ! Je garde le lien dans mes favoris ! Cela me sera utile ! :love:

Donc merci merci merci pour ces conseils forts utiles !! :hug:

Du coup, je poste pas de suite en proposition de LS, je modifierais le code d'abord avec tes conseils !

Il faudrait aussi que je mette en pourcentage, mais j'ai pas trop le temps de tout remodifier... :siffle:

Contenu sponsorisé

Y'a de l'ambiance ! #1 - Usul gagnante !

Y'a de l'ambiance ! #1

Le Thème: La Paix

Comment participer et jusqu'à quand?

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée