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.

Le deal à ne pas rater :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    Mission#4 - Pas besoin de logiciel pour refaire la déco! [initié/av.]

    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Dim 2 Fév 2014 - 13:47

    Bonjour à tous, et bienvenue dans cette petite mission de codage qui aura pour but de vous faire faire mumuse avec des blocs de couleur! (alors? Heureux?)

    L'exercice d'aujourd'hui sera de dire à ces satanés graphistes qu'on n'a pas besoin de logiciel pour créer des images, nous ! (hein? Ma couleur de pseudo? Graphiste, moi? mais non, chut! Vous n'avez rien vu!)

    Plus sérieusement (non parce qu'on va dire que je m'acharne sur les graphistes là xD) il s'agit aujourd'hui de reproduire ce qui suit :

    Mission#4 - Pas besoin de logiciel pour refaire la déco! [initié/av.] 1402021237416243

    En html et CSS hein? (non je précise pour les p'tits malins qui auraient envie de me ressortir le truc avec un logiciel de graphisme!)

    Avant de commencer, demandez-vous comment vous pouvez décomposer l'image, et comment vous pouvez la coder ensuite. Si votre codage fait exploser la mise en forme du forum du cap'taine, demandez-vous s'il n'y a pas un petit souci!

    Force et courage!

    (PS >> afin de vous prouver que "si" c'est possible >> http://test-olue.forumactif.org/t60-test-mission-5 )


    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !




    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 3 Fév 2014 - 2:17

    Comme ça?
    • Revenir en haut
    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Lun 3 Fév 2014 - 11:09

    Par exemple ^^ Ce n'est pas la solution que j'avais choisie personnellement, mais l'idée d'utiliser un damier de "table" n'est pas mauvaise. Cependant, elle a des limites en terme de flexibilité ^^

    Imagine que je veuille faire ça, maintenant >> deuxième post

    Il a fallut que je change deux variables, moi ^^ et toi? si tu veux reproduire ça, comment fais-tu?





    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 4 Fév 2014 - 17:47

    Right, c'est plutôt différent XD

    • Revenir en haut
    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Mar 4 Fév 2014 - 18:38

    C'est tout à fait ça congrats! ^^ Ce que j'ai bien envie de proposer, c'est que tour à tour les gens proposent des motifs à reproduire ^^ histoire qu'on se fasse tous la main avec les positions relatives & absolutes ^^

    et pour ceux qui n'auraient pas compris la subtilité du truc, ou qui ne connaissent pas cette histoire de position, n'hésitez pas à demander (on mord pas, pas vrai Onyx qu'on mord pas?)

    Allez, On' ^^ propose donc un motif à reproduire ^^




    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 4 Fév 2014 - 20:23

    Zut alors, j'aurais pas du participer XD

    (Qui mord? Pas moi, je le jure sur mon honneur de non-scout!)

    Allez, voilà pour le motif à reproduire :

    Celui-ci ? : http://forum-test-onyx2.forum-canada.com/t15-mission-4-n-u#15

    Ou celui-là ? : http://forum-test-onyx2.forum-canada.com/t15-mission-4-n-u#16
    • Revenir en haut
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mar 18 Mar 2014 - 20:27

    Hello..
    Bha moi, déjà, j'aurais utilisé un canvas (qui est fait pour ça en fait) xD.
    Je ferais un petit essai si j'trouve le temps. xD



    • Revenir en haut
    Dehvi
    Dehvi
    MasculinAge : 31Messages : 72

    Mar 22 Avr 2014 - 18:37

    Je peux m'y essayer ? J'ai fait le premier =)
    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Sam 26 Avr 2014 - 16:19

    Je m'y suis essayée également. J'en ai passé du temps avant de me rendre compte qu'un truc clochait sur ce forum quand je le testais. Donc j'ai laissé tomber ce point en voyant que sur 2 autres forums ça fonctionnait. À vous de juger maintenant. (J'avoue que j'ai jamais trop fait ça donc je stresse un peu de ce qu'on va bien pouvoir me dire.)

    NB : J'ai prit la liberté de prendre d'autre couleur.



    NB 2 : Je voulais savoir si je pouvais poster dans les précédentes missions, sans les faire puisqu'elles sont terminées, pour voir ce qui avait été fait ?


    Edit :: Après avoir vu ce qu'ont fait les autres je me dis que je me complique un peu la vie dans certains point.
    • Revenir en haut
    Këdherys
    Këdherys
    MasculinAge : 27Messages : 130

    Sam 26 Avr 2014 - 23:07











    Bonsoir ! Je me remet au codage sous forumactif (diantre que je fus bête d'avoir codé sous Notepad++ et d'avoir voulu mettre du css après avoir fait mon code. u_u)
    Donc, il se compose de 7 div's avec l'emploi du z-index, et du margin. J'aurais pu le faire à l'aide d'un overflow aussi je pense, non ?

    Mon code:




    • Revenir en haut
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Dim 18 Mai 2014 - 17:24

    Bonsoir! J'ai voulu m'y mettre aussi et comme je ne suis pas experte, j'ai commencé avec un principe faux... Puis je m'en suis rendue compte et j'ai tout refait dans le bon sens. C'était stupide, mais bon. Le plus bizarre c'est que j'arrive quand même à obtenir la même chose, même s'il m'a fallu adapter mes marges.
    Je vous laisse en juger:


    • Revenir en haut
    Manouille
    Manouille
    FémininAge : 24Messages : 9

    Dim 16 Nov 2014 - 20:17

    Bonjour bonjour !
    Voilà mon résultat, j'espère que c'est bien ce qu'il fallait faire, vu que je n'ai utilisé que des margin pour placer les éléments ^^



























    • Revenir en haut
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Dim 16 Nov 2014 - 20:55

    Salut ! (=
    Je crois que depuis mon dernier post je me suis pas mal améliorée, hum du coup j'ai fini par capter x)
    Le truc c'est que cette mission a pour but de faire utiliser les propriétés de positionnement, relative et absolute ! Du coup en les utilisant tu aurais pu trouver un code plus simple, et plus facile à modifier par la suite !
    Tu dois pouvoir trouver des pistes ici: https://www.never-utopia.com/t42996-partie-2-etape-7-les-positions-et-le-z-index

    Voilà, et bravo c'est une belle performance de faire ça sans positions !



    Alumine
    • Revenir en haut
    Schoko
    Schoko
    FémininAge : 29Messages : 3

    Dim 4 Jan 2015 - 13:28





    Code:
    <span style="width: 100px; height: 100px; background-color: orange; display : inline-block; "></span><span style="width: 300px; height: 100px; background-color: crimson; display : inline-block; "></span>
    <span style="width: 100px; height: 300px; background-color: crimson; display : inline-block; "></span><span style="width: 300px; height: 300px; background-color: red; display : inline-block; "></span><span style="width: 200px; height: 200px; background-color: crimson; display : inline-block; margin-left: -280px; margin-bottom: 30px; border-radius: 100%; border: 30px orange solid; "></span><span style="width: 100px; height: 300px; background-color: orange; display : inline-block; margin-left: 20px; "></span>
    <span style="width: 300px; height: 100px; background-color: orange; display : inline-block; margin-left: 100px; "></span><span style="width: 100px; height: 100px; background-color: crimson; display : inline-block; "></span>

    Ja-jan ♪ J'ai changé les couleurs par flemme de faire screen-shoot / prélèvement :I

    Par contre, moi aussi, j'ai tout fait avec des margin '-'
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 11:20