Jouons avec (les feuilles de) style :-)

  • Joueur de Tentlan de tous pays...


    Je vous propose ici un nouveau jeu dont voici les règles.


    1) Seuls les changements de design sont acceptés
    2) Aucun scripting / codage pouvant altérer les fonction du jeu ne pourront être utilisés.
    3) Aucune action dans le jeu ne peut être effectué avant un rafraichissement de la page.
    4) Le design doit respecter la netiquette et suivre les règles du forum de Tentlan.


    Un simple exemple ici...


    Une ville maya dans les montagnes....



    Ou avec une touche de Gimp.... Des barbares dans la neige...



    Soyez creatifs ;)


    Les meilleurs résultats seront récompensés :-)


    Bon jeu,
    Crio.

  • Salut, j'ai pas très bien compris ton jeu, on doit modifier le code de la page pour ajouter une image ou la modifier, ou alors on doit faire ça avec un logiciel de montage ? :)

  • Moi non plus j'ai pas compris x)

    wwerwanww Ahau de l'Empire du Yucatán.
    Chef du Clan TheAlpha sur de multiple Jeux.


    "C'est l'Impatience de Gagner qui fait Perdre !"

  • Oui, il faut modifier la page avec l'extension développeur de Chrome ou Safari par exemple qui permettent de voir le résultat en direct... de mon coté j'ai aussi la possibilité de mettre des images en FTP sur un site (un peu plus technique) et donc de changer l'adresse de l'image avec la mienne (pour la neige)... je vais faire un petit how-to ce soir ;)

  • Voici :


    Pour modifier une page, vous devez utiliser un éditeur "en ligne" comme l'extension développeur de chrome ou safari.


    En faisant un clic droit sur la page de jeu vous verrai une option : inspecter l'élément. Celle-ci ouvrira une nouvelle fenêtre (l'inspecteur d'élément) et vous verrez les information de CSS pour la partie choisie


    Par exemple


    Code
    1. .worldmap-1 {
    2. width: 100px;
    3. height: 100px;
    4. background: url(../img/worldmap6.png) no-repeat -0px -500px;
    5. }


    Dans le code ci-dessous la case va appeler une partie de l'image worldmap6.png qui contient toutes les "tiles" du jeu.
    En changeant -500px; par -400px par example vous changerez automatiquement toutes les tiles du jeu identique avec -400px. (C'est de cette façon que j'ai fait les montagnes)


    Comme vous le voyez le background est directement sur le site de Tentlan.


    Pour le deuxième example j'ai remplacé l'image worldmap par la mienne


    Code
    1. .worldmap-1 {
    2. width: 100px;
    3. height: 100px;
    4. background: url(http://monserveur.fr/img/worldmap6.png) no-repeat -0px -500px;
    5. }


    D'autre modification sont possible avec un peu d'étude du css : HTML & CSS | Codecademy à un bon cours là dessus si vous êtes motivés.


    Si ça intéresse... j'irais un peu plus loin dans un autre post.


    Bon jeu.

  • Bien sûr ;)


    C'est vrai qu'ici j'utilise des moyen technologiques plus que artistique... Le concours est ouvert pour toute forme de modification.
    Je pense faire une récompense mensuelle pour la plus belle réalisation. En fonction de l'affluence je créerai deux catégories : Retouche et Technique.


    La première échéance est au 1/11 - Le verdict tombera le 3/11 et des ressources seront envoyées au gagnant (en fonction de mon "disponible").


    Bien à tous.


    Crio.

  • Tarakini, comme on n'a pas accès à ton ordi, le lien ne peut pas nous être d'une grande utilité. As-tu essayé de mettre l'image sur un site public?



    Rectification faite, même avec un site public, j'éprouve quelques difficultés à insérer un lien valable et sécurisé .

  • Merci wollowstone, j'ai vu que le lien ne fonctionnait pas (mais trop tard), Et je n'ai pas pu supprimer mon message ! Mais je ne sais toujours pas comment mettre cette image sur le forum ?

    :thumbsup: Les Irréductibles Gaulois :thumbsup:

  • Il y a plein de service gratuit pour envoyer ton image et tu peux alors mettre le lien ici... si tu as un google drive, ou un hébergeur comme ici : http://www.casimages.com


    Ensuite tu copie le lien qu'ils te donne dans une balise image


    Code
    1. [img]http://urldemonimage.com/monimage.png[/img]


    si ça marche pas je mettrai en place qqch pour vous permettre de le faire...


    Et voilàààà

  • Si vous cliquez sur plus d'options sur le forum vous avez normalement la possibilité de télécharger une image et de la joindre à vos messages, sans passer par des hébergeurs externes.