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.

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

    (PA) (AWFUL) Une Page d'Accueil tout en symétrie

    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Lun 6 Avr 2015 - 19:48

    Ma demande



    Bonjour/Bonsoir et Joyeuses Pâques ! Si je reviens vers vous aujourd'hui c'est qu'un de mes Forums vient d'avoir un an (*souffle les bougies*) et qu'une V2 à donc été initiée comme cadeau. Mais comme tout Forum qui se respecte, il lui faudrait une nouvelle page d'accueil pour finir de revêtir sa nouvelle peau. Je remercie donc par avance celui ou celle qui acceptera de se pencher sur ma demande.

    Schéma(s) et Eléments
    Schémas : https://i.servimg.com/u/f19/16/91/02/27/pa_cop10.png
    Tailles des éléments : Je pense que du 900 pixels de large (avec la longueur qu'il faut mais je pense que ça tournera autour des 550/600 pixels) sera parfaite.
    Effets voulus : Différents effets de hover, qui son précisés sur le schéma. Je reviens sur ce qui concerne le Staff car ce n'est peut être pas clair, s'il le faut je peux peut être fournir le lien d'un Forum pour une meilleure visualisation. Quand on clique sur la flèche (qui sera sans doute une petite image, que je peux fournir également) l'image du membre du Staff défile vers la gauche pour en révéler une autre. Il me semble que cela implique du Javascript mais je ne suis pas sûre, je n'y connais pas grand chose :/ Lorsqu'on passe la souris sur cette même image, l'opacité change pour laisser apparaître le Pseudo, le rang et un lien vers le profil/mp.
    Je ne j'ai pas précisé non plus mais il y a un cadre blanc autour des images des partenaires, en plus d'un effet de colorisation lorsqu'on passe la souris sur une icone (l'image est ordinairement en noir et blanc et les couleurs apparaissent ensuite)
    Version de votre forum : PHPBB2


    Ressources
    Image de flèche pour le défilement du Staff (attention elle est blanche et transparente !) : https://2img.net/r/hpimg11/pics/153947left.png
    Image de base des partenaires : https://i.servimg.com/u/f19/16/91/02/27/pa12.png
    S'il faut encore autre chose, je peux le fournir, il me faudra juste le temps de le créer Wink


    Autres précisions ?
    Mis à part le titre tout en haut qui est en Georgia, tous les autres seront en police Dekko http://www.google.com/fonts/specimen/Dekko Les liens peuvent également être de cette police. La police du contenu, quant à elle, restera en Georgia.
    La couleur de l'overflow est #ff6347
    La couleur du fond gris clair est #45494f
    La couleur des cadres gris foncé est #242223
    La couleur du fond des liens plus claire encore est #575a5c
    (Comment ça je reproduis 50 Shades of Grey ? xD)
    Le contour gris du cercle n'a pas besoin d'être reproduit, je l'ai juste mis pour délimiter le cercle et qu'on le voie mieux sur le schéma. L'image arrondie quant à elle devra l'être par CSS parce que c'est compliqué de réaliser des images rondes pour quelqu'un qui ne graphe pas trop, si cela ne vous dérange pas ^^"



    Dernière édition par Nana-Yankee le Mer 15 Avr 2015 - 16:11, édité 1 fois
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 7 Avr 2015 - 10:29

    Je prends ta commande, je m'y mets dans la semaine :3
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Mar 7 Avr 2015 - 14:55

    Quelle rapidité ! Merci beaucoup de t'en charger, tu es un ange <3 ^^
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 7 Avr 2015 - 20:57

    Salut !
    Tu peux avoir une idée de ce que ça donne ici :


    Tout n'est pas fini. En effet, je vais devoir me servir de javascript sur le slider du staff, je vais me pencher dessus. Il me reste donc quelques questions :
    - Quelle est la couleur du lien survolé ? Le fond change, mais je n'ai pas l'hexa du texte
    - Que comptes-tu mettre derrière la grande image centrale ? Pour l'instant j'ai mis un cercle blanc, mais l'effet de disparition va bien servir à quelque chose, non ?
    - Je n'ai pas encore stylé les overflow car je code sous FF et les styles d'overflow ne fonctionnent pas sur ce navigateur.
    - J'ai pris la liberté de grossir la police, car j'imagine que tu as fait ton schéma sur un logiciel d'infographie. Mais 10px en codage et 10px en image ne donnent pas la même chose (à moins que tu aies vraiment envie d'avoir des titres tous petits ? Ça peut être un choix personnel hein xD)

    Pour l'instant dis moi si ça te convient~

    Bye !
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Mar 7 Avr 2015 - 21:29

    Hey !
    Ooooh c'est magnifique je suis sous le charme ! Tu as déjà fait un excellent travail !
    Pour répondre à tes questions, je pense qu'une touche de couleur, comme du #ff6347 (ou une variante plus sombre si ça jure de trop #cd4f39) serait pas mal ^^
    Derrière la grande image centrale je pensais mettre le contexte du Forum ! :) Avec un titre du même style que les autres et un overflow au cas où ce qui est écrit soit trop long ^^
    Pas de souci pour le codage des overflow, peut être que je peux trouver un tutoriel quelque part et les intégrer moi même au code si jamais
    Oui j'ai utilisé Photofiltre et Gimp donc 10 pixels paraissent grand dessus, tu as bien fait de prendre cette initiative xD
    Tout me plait dans ce que tu as réalisé oui, ça correspond bien à ce que je voulais alors je suis aux anges ! Merci beaucoup pour tout le travail que tu as déjà fourni !
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 11:10

    Désolée, j'ai un peu tardé à te tenir au courant x)Je viens donner des nouvelles !
    La PA avance bien et le slider pour le staff est mis en place, on peut dire que j'ai quasiment terminé. J'installerai ça très vite sur mon forum test pour te montrer et tu me diras si cela te convient.
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 11:36

    Coucou ! C'est pas grave, je me doute que tu as d'autre chose à faire de tes journées aussi xD
    Super ! Pas de souci, j'attends bien sagement alors ^^
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 12:33

    C'est encore moi !
    Tu peux voir le résultat ici :


    Il ne me reste plus qu'à styler les overflow et je pense en avoir terminé. Peut-être pourrais-tu me fournir directement ton contexte pour que je l'intègre ?
    (et je te préviens d'office : le code est très, très long)
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 13:23

    C'est super ! Le slider marche du coup ? Parce que quand je clique sur la flèche c'est l'image ronde du centre qui s'efface et les images n'ont pas l'air de bouger... A moins que ce soit mon navigateur qui déconne xD Bon courage pour les overflow !
    Bien sûr que je peux te le passer, le voici :

    Spoiler:

    Ce n'est pas grave si le codage est long, le résultat le vaut bien xD
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 13:55

    Tu utilises Chrome ? Parce que Chrome n'aime pas les border-radius xD Du coup, le carré qui englobe l'image ne s'arrête pas aux bords du cercle....
    Sur FF et IE, tout marche parfaitement. l'image du slider change, c'est juste que par flemme j'ai mis la même. Si tu passes la souris dessus, tu verras que le texte change. x)
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 14:00

    Ah bah oui je suis sous Chrome ça doit être ça xD J'ai testé sous FF et c'est bon Wink
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 14:09

    Je vais voir si je peux arranger ce souci et également ajouter le contexte :3
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 14:12

    D'accord ! Si jamais c'est possible tu peux mettre la flèche au dessus des images, ça devrait arranger ce souci ^^
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 9 Avr 2015 - 14:41

    J'interviens juste pour préciser que dans le LS que tu vas poster Awful, il ne faudra pas y inclure le contexte de Nana Wink

    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 15:47

    A-lice > Je ne pense pas poster ce code en libre service, Nana a imaginé sa PA et n'a probablement pas envie de la voir sur d'autres forums :3

    Nana-Yankee > En effet, changer la flèche de place semble être une solution viable ! Si ça ne te dérange pas, je pense la changer de côté (la mettre à droite au lieu de gauche)
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 15:57

    Bah à la base une demande de code implique la mise en libre service par la suite, c'est les règles de la section donc ça ne me dérange pas que d'autres Forums l'aient aussi... si d'autres personnes sont à la recherche d'une page d'accueil comme celle là, ben elle sera déjà à disposition ^^

    Ça me va bien à droite aussi ! Wink
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 16:01

    Oh, mea culpa xD De toute façon, c'était certain que je n'aurais pas laissé un contexte pour un LS. Bref, je m'attaque au changement du slider et je reviens vers toi !
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 16:03

    D'accord ! ^^ Bon courage o/
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 9 Avr 2015 - 16:48

    Bon, j'ai arrangé le slider et ça semble fonctionner sur Chrome, mais y'a un lien qui saute (celui des prédefs) donc je dois arranger ça. J'ai aussi ajouté le contexte, je te laisse voir ce que ça donner :


    Le slider fonctionne bel et bien, si tu regardes, il y a un léger fade et le texte change :3
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Jeu 9 Avr 2015 - 16:55

    J'ai vérifié ça marche oui, c'est impeccable ! \o/
    Courage pour ce fichu lien qui saute xD Au pire tu peux peut être essayer de le mettre ailleurs aussi si ça te pose trop de soucis xD
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 9 Avr 2015 - 18:45

    Awful a écrit:A-lice > Je ne pense pas poster ce code en libre service, Nana a imaginé sa PA et n'a probablement pas envie de la voir sur d'autres forums :3

    Comme l'a dit Nana, ce ne sont pas des commandes qui sont faites ici mais des demandes de LS. Les gens qui postent ici le savent puisque c'est dans le règlement Wink

    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Lun 13 Avr 2015 - 16:39

    Bonjour, je fais un petit up ! ^^
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Lun 13 Avr 2015 - 17:45

    Désolée, je suis pas revenue sur le code pour corriger le déplacement du lien >_< Je m'y mets au plus vite !
    Nana-Yankee
    Nana-Yankee
    FémininAge : 29Messages : 65

    Lun 13 Avr 2015 - 18:08

    C'est pas grave prends ton temps va xD
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 14 Avr 2015 - 20:06

    J'ai réglé le problème du lien sur Chrome, je nettoie le code et je reviens vers toi :3
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 22:27