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.


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

    Partagez
    avatar
    Sydeale
    FémininAge : 20Messages : 124

    le 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 (http://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
    avatar
    Sydeale
    FémininAge : 20Messages : 124

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

    <!-- LIENS - 10 MAXIMUM --><div id="lksOLD"><a href="https://guidedunouveau.com">Guide du Nouveau</a>
    <a href="https://règlement.com">Règlement</a>
    <a href="https://groupes.com">Groupes</a>
    <a href="https://bottindesavatars.com">Bottin des Avatars</a>
    <a href="https://faq.com">FAQ</a>
    <a href="https://partenariat.com">Partenariat</a>
    <a href="https://présentation.com">Présentation</a>
    <a href="https://flood.com">Flood</a>
    <a href="https://gazette.com">Gazette</a>
    <a href="https://chatbox.com">Chatbox</a>
    <a href="https://trucenplus.com">Truc en plus</a>
    <a href="https://crédits.com">Crédits</a>
    </div><div class="triOLD">


    CSS3:
    Code:

    #lksOLD {
    position:absolute; z-index:2; margin-left:0px;
    height:650px; width:185px; background-color:#399;
    text-transform:uppercase; text-align:center; font-size:17px;
    }
    #lksOLD a {
    display:block; color:white; padding:17.05px 0; text-decoration:none !important;
    }
    #lksOLD a:hover {
    background-color:rgba(250,250,250,0.3);
    }
    .triOLD {
    position:absolute; z-index:2; margin-left:0px; margin-top:650px; width:0; height:0;
    border-style:solid; border-width:50px 92.5px 0 92.5px; border-color:#399 transparent transparent transparent;
    }
    avatar
    Sydeale
    FémininAge : 20Messages : 124

    le 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:
    <!-- LIENS - 10 MAXIMUM -->
    <div id="lksOLD"><div style="display: inline-block;"><a href="https://guidedunouveau.com">Guide du Nouveau</a>
    <a href="https://règlement.com">Règlement</a>
    <a href="https://groupes.com">Groupes</a>
    <a href="https://bottindesavatars.com">Bottin des Avatars</a>
    <a href="https://faq.com">FAQ</a>
    <a href="https://partenariat.com">Partenariat</a>
    <a href="https://présentation.com">Présentation</a>
    <a href="https://flood.com">Flood</a>
    <a href="https://gazette.com">Gazette</a>
    <a href="https://chatbox.com">Chatbox</a>
    <a href="https://trucenplus.com">Truc en plus</a>
    <a href="https://crédits.com">Crédits</a>
    </div></div><div class="triOLD"></div>

    <!-- RESTE DE LA PA -->
       
       <div style="display: inline-block; margin-left: 185px;"><div class="fond_PA"><div style="height: 620px; width: 715px"><center>
    <div class="titrePA">Bienvenue sur Quatre Clans, une nouvelle vie</div>
    <br />
    <div class="sous-titresPA"><justify>Contexte</justify></div>
    <div class="blocsPA" style="height: 100px; width: 685px;">Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. <a href="#">La suite</a>
    </div>

    <table><tr><td rowspan="2"><div class="blocsPA" style="height: 250px"; "width: 250x";>
    <div class="newsOLD">
    <!-- CONTENU ACTUALITES -->
    <div>♦ 00/00/00 ▬ ...<br/>♦ 00/00/00 ▬ ...<br/>♦ 00/00/00 ▬ ...</div></div></div></td>
    <td colspan="3"><div class="sous-titresPA">Le staff</div>
    <div class="blocsPA" style="height: 90px; width: 400px">
    <table><tr><td align"center" width="33.33%">Staff 1</td>
    <td align"center" width="33.33%">Staff 2</td>
    <td align"center" width="33.33%"> Staff 3</td>
    </tr>
    <tr><td align"center" width="33.33%">Staff 1</td>
    <td align"center" width="33.33%">Staff 2</td>
    <td align"center" width="33.33%">Staff 3</td>
    </tr></table></div>

    </td></tr>
    <tr>
    <td>Prédéfinis</td>

    <td>Awards</td>

    <td>Top Sites</td>
    </tr>

    <!-- 8 TOP PARTENAIRES --><div class="partOLD"><!-- I --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- III --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- IV --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- V --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- VI --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- VII --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- VIII --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a><!-- II --><a href="..." target="_blank">

    </div></div></div><link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css" />

    Code en CSS:
    Code:
    #lksOLD {
    position:absolute; z-index:2; margin-left:0px;
    height:650px; width:185px; background-color:#399;
    text-transform:uppercase; text-align:center; font-size:17px;
    }
    #lksOLD a {
    display:block; color:white; padding:17.05px 0; text-decoration:none !important;
    }
    #lksOLD a:hover {
    background-color:rgba(250,250,250,0.3);
    }
    .triOLD {
    position:absolute; z-index:2; margin-left:0px; margin-top:650px; width:0; height:0;
    border-style:solid; border-width:50px 92.5px 0 92.5px; border-color:#399 transparent transparent transparent;
    }


    /***************************** MISE EN FORME PA *****************************/

        .fond_PA {
          background-color: #332129;
          padding: 15px;
          text-align: justify;
        }

        .fond_PA a {
          color: #A2778B !important;
          text-decoration: none !important;
        }

        .titrePA {
          color: #A2778B;
          font-size: 30px;
          font-family: 'Dancing Script', cursive;
        }

        .sous-titresPA {
          color: #E1D5DB;
          font-size: 25px;
          font-family: 'Dancing Script', cursive;
          text-align: center;
        }

        .blocsPA {
          width: 200px;
          overflow: auto;
          background-color: #3D2A33;
          padding: 15px;
          text-align: justify;
          color: #E6DBE0;
        }

        /*** IMAGES DU STAFF ***/

        .imgPA {
          width: 100px;
          height: 100px;
        }

        .info {
          position: relative;
          z-index: 24;
          text-decoration: none;
        }
       
      c.info:hover {
          z-index: 25;
        }
       
      c.info span {
          display: none;
        }
       
      c.info:hover span {
          display: block;
          position: absolute;
          top: -9em;
          left: -0em;
          width: 100px;
          height: 100px;
          background-color: #3D2A33;
          color: #F3F3F3;
          text-align: center;
          font-weight: none;
        }

    /* TRIANGLE ACTUALITES PA */
    .newsOLD {
    border-left-color:#399 !important;
    }
    /* CONTENU ACTUALITES PA */
    .newsOLD div{
    background-color:#399 !important; color:black !important;
    }

    .ctxtOLD {
    position:absolute; margin-left:250px; margin-top:25px;
    width:245px; height:250px; padding:10px; overflow:hidden; line-height:16px;
    background-color:rgba(250,250,250,0.2); color:#399; text-align:justify; font-size:12px;
    }
    .ctxtOLD:hover {
    overflow:auto;
    }
    .newsOLD {
    position:absolute; z-index:2; margin-left:0px; margin-top:0px;
    width:0; height:0; border-style:solid; border-width:45px 0 0 45px; border-color:transparent transparent transparent #399;
    }
    .newsOLD div{
    position:absolute; margin-left:-45px;
    width:265px; height:0px; overflow:hidden;
    background-color:#399; text-align:justify; font-size:12px;
    transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
     }
    .newsOLD:hover div{
    margin-top:-270px;
    height:250px; width:245px; padding:5px; overflow:auto;
    }
      /***************************** FIN MISE EN FORME PA *****************************/

    .partOLD {
    position:absolute; margin-top:325px; margin-left:0px;
    width:715px; height:50px; padding:10px 0; overflow:auto;
    text-align:center; background-color:rgba(250,250,250,0.2);
    }
    .partOLD img {
    opacity:0.6; transition:opacity linear 0.5s; -webkit-transition:opacity linear 0.5s;
    }
    .partOLD a{
    margin:0 5px;
    }
    .partOLD img:hover {
    opacity:1;
    }
    avatar
    Sydeale
    FémininAge : 20Messages : 124

    le 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 Sam 25 Nov 2017 - 0:54