AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    avatar
    Ehawee
    FémininAge : 24Messages : 4627

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



    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 !



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 3 Fév 2014 - 2:17

    Comme ça?
    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le 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?




    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mar 4 Fév 2014 - 17:47

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

    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le 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 ^^



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le 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
    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le 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



    avatar
    Dehvi
    MasculinAge : 24Messages : 72

    le Mar 22 Avr 2014 - 18:37

    Je peux m'y essayer ? J'ai fait le premier =)
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le 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.
    avatar
    Këdherys
    MasculinAge : 20Messages : 130

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

    Code:
    <div style="width:250px;height:250px;padding:0px;margin:auto;border:1px solid black;">
    <div style="background-color:#99cc00;width:50px;height:50px;margin-top:-15px;position:relative;z-index:2;"> </div>
    <div style="background-color:#1c99af;width:200px;height:200px;position:relative;margin-top:-65px;z-index:1;"> </div>
    <div style="background-color:#99cc00;width:200px;height:200px;position:relative;margin-left:50px;margin-top:-165px;z-index:1;"> </div>
    <div style="background-color:#1c99af;width:50px;height:50px;position:relative;z-index:3;margin-left:200px;margin-top:-65px;"> </div>
    <div style="width:150px;height:150px;background-color:#0000ff;position:relative;z-index:3;margin-left:50px;margin-top:-215px;"> </div>
    <div style="background-color:#99cc00;width:125px;height:125px;position:relative;z-index:4;margin-left:62px;margin-top:-153px;border-radius:125px;"> </div>
    <div style="background-color:#1c99af;width:80px;height:80px;position:relative;z-index:5;margin-left:83px;margin-top:-118px;border-radius:80px;"> </div>
    </div>




    avatar
    Alumine
    FémininAge : 20Messages : 488

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


    avatar
    Manouille
    FémininAge : 17Messages : 9

    le 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 ^^



























    avatar
    Alumine
    FémininAge : 20Messages : 488

    le 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: http://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
    avatar
    Schoko
    FémininAge : 22Messages : 3

    le 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 '-'
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 9:28