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 du moment :
Code promo Nike : -25% dès 50€ ...
Voir le deal

    [Page d'Accueil] Survol avec opacité à 25%

    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Dim 16 Juil 2017 - 20:16

    Ma demande



    Bonjour, je fais une petite demande pour un Forum sans style (car pas réfléchis pour l'instant).
    J'ai essayé de faire une version de 2 codages, mais vu qu'il y a des CSS et des HTML, je n'ai pas forcément accès à tout directement sur le code (vu qu'il y a des liens CSS) et je suis nulle en création de codage... Enfin je sais modifier et faire des truc très moche quand je dois modifier le CSS... Je vais essayer de faire le meilleur schéma possible en espérant que vous arriverez à bien visualiser. Donc ça serait une PA (Si possible de faire un QEEL après)... Je sais pas si c'est possible en fonction de ma demande, mais vous pourrez peut-être récupérer des parties du codage vu qu'il y a des flèches (cf Schéma). Je suis désolée pour le visuel immonde, je ne suis pas une pro en Graphisme.


    Schéma(s) et Eléments


    Schémas :
    Page d'Accueil de Base:
    Survol:
    Tailles des éléments : Forum basé sur du 900px donc on peut dire pour la PA 864*656px -> mais je ne suis pas sûre de la dimension de la PA donc si c'est trop grand ou je me suis loupée : vous pouvez modifier les tailles.
    Cadre Partenariat : 650/60
    Image Partenariat : 50/50 (minimum 30*30)
    Triangle : 185/50
    Cadre Contexte : 650/150
    Texte Contexte : 640/130
    Image pour les Orange foncés : 50*50 (C'est les prédéfinis et les Top sites (donc si c'est du 40*40) c'est pas grave pour le Top site voir plus petit (35*35 minimum faut voir le coté esthétique).
    Images Orange claire : C'est les images pour le staff donc on va dire un truc homogène pas grave si on doit redimensionner... 6 cases c'est bien je pense...
    Il faudra peut-être réduire la taille des zones plus claires... J'ai mit les Titres un peu à l'arrache (car je l'avais oublié en le faisant) donc les mettre proprement.

    Effets voulus :
    Je vais faire une petite liste pour que vous vous y retrouviez :

    Flèche à gauche (Partie lien) : un lien pour aller sur les sujets, peut-être un effet éclaircissant quand on passe la sourit dessus (mais j'crois que ça peut se modifier sur les couleurs tout simplement.

    Contexte : une image puis une transition sur le texte (quand on survol) avec l'image au fond (opacité de 25%)

    Triangles bleu : Image (orange), survol du triangle (haut à gauche) les Actualité, survol du Triangle (bas à droite) : les évènements.

    Partenaires : Grossissement de l'image au survol si elle est entre 30/30 ou 50/50

    Awards : Image fixe. Au survol une transition sur le texte (RP du mois/Membre du mois), image en 25% d'opacité.

    Top Site : Clique dessus, ça dirige sur le lien.

    Prédéfinis : Image fixe (carré orange). Au survol, image (opacité 25%) Texte : Ralph H 30 ans + détail. (+ détail : donne sur le lien de la présentation du prédéfinis.

    Staff : Image fixe (orange). Transition sur le texte (Nom, Disponibilité, Statue, MP) avec l'image en Opacité de 25%. Si l'image est trop petite (lors de la transition), est-ce qu'on peut agrandir la surface de l'image (le double) pour faire rentrer tout le texte ?

    Version de votre forum : PHPBB2


    Ressources


    Les couleurs et les images sont en fonction de vous (on a pas choisi de couleurs pour le forum). Si c'est possible j'aimerai pouvoir les changer via le code HTML et non le CSS (parce que j'y connais rien en CSS...)


    Autres précisions ?


    A la base je voulais m'inspirer de 2 PA une de CCCrush et une autre que j'ai trouvé sur Never-Utopia (https://www.never-utopia.com/t49062-pa-en-trois-colonnes-violette) donc si c'est possible d'avoir le même style pour la partie grise (pour les Titres et les descriptions).
    J'ai toujours le tic de vouloir des codages pas simples... D'habitude je fais de la récupération mais vu que c'est une PA avec les CSS c'est pas très possible (pour mon niveau).
    Je remercie déjà la personne qui va faire ce travail car je sens que je demande un truc bien chiant. Donc merci et RE-merci !



    Dernière édition par Sydeale le Mer 19 Juil 2017 - 1:24, édité 1 fois
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mar 18 Juil 2017 - 1:39

    Voici le Code pour la flèche Noire :

    Il est de CCCrush donc je sais que je dois mettre le crédit sur le forum, mais je ne sais pas si je peux le mettre ici ?

    HTML:


    CSS3:
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mar 18 Juil 2017 - 13:57

    J'ai réussi à copier coller les codes et à obtenir un code, mais je ne suis pas encore au point pour la création de code (qui est bien sur la partie la plus chiante du code...) :
    un Screen:

    Code en HTML:

    Code en CSS:
    Sydeale
    Sydeale
    FémininAge : 27Messages : 124

    Mer 19 Juil 2017 - 1:26

    J'ai réussi à faire l'ensemble du codage, même s'il y a beaucoup d'erreur et de problème donc j'vais basculer dans une autre catégorie.
    Je pense toujours avoir besoin d'aide pour le QEEL car je n'ai aucune référence ou code de base pour faire de le récupération et faire mon code.

    (Désolée pour le poste inutile)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 22:51