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 à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

    Message RP en CSS

    JodieCravery
    JodieCravery
    FémininAge : 30Messages : 68

    Dim 6 Mar 2016 - 10:27

    #css #html #codage_rp #effet_hover #auteur_JodieCravery


    Bonjour à tous ceux qui lisent ce message .o.

    Je ne suis pas la personne la plus douée du monde mais, de temps en temps, je fais des codes pas trop hasardeux et qui donneront pas envie de s'arracher les yeux à des codeurs expérimentés (quoique). Du coup je me suis dit qu'en guise de première participation au forum, j'allais vous proposer un code que j'ai réalisé il y a quelques temps et dont je ne me sers plus vraiment. Il y a deux façon de faire cette fiche de réponse pour qu'elle soit entièrement personnalisable :
    - Avec le CSS du forum (si vous êtes administrateur, donc)
    - Avec une fiche CSS hébergée sur internet et liée à la fiche

    Je propose aussi une version du code avec le CSS directement dans le html, mais certaines parties ne seront pas personnalisables (seulement l'ombre, la couleur de fond, les dimensions hauteur/largeur, la couleur de la bordure et du texte et le titre). Dans tous les cas, il ne faut pas supprimer le lien vers la fiche CSS pour garder l'aspect de la fiche.

    Aperçu:

    La grande image, en plus de devenir transparente et de "s'agrandir", passe aussi en noir et blanc. L'opacité finale est modifiable dans le css, sinon l'opacité par défaut est de 40%. Pour le texte, la barre de défilement est située à gauche.


    Les Codes



    HTML avec CSS :
    Code:
    <link href="http://www.aht.li/2840022/Fiche_Basique.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
    <div class="title" style="width:500px;"><div class="block-title-on" style="width: 500px;  height: 208px;"><a href="LIEN VERS LA PREMIÈRE PAGE DU RP"><img src="LIEN IMAGE EN 500*208" style="width:500px; height:208px;"/></a><div class="block-title-under" style="vertical-align:middle; text-align:center; font-variant:small-caps; padding-top:30px;"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp" style="letter-spacing : 15px;">
    <img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
    <div class="rp" style="width:540px;margin-top:5px;"><div class="rp-txt" style="height:700px;  color:black;  border-bottom:8px solid black;  border-left:1px solid black; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); background-color:#306B17; "><div class="rp-scroll">
    --------------------------------> CONTENU DE VOTRE RP <-----------------------------
    </div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>
    Vous pouvez donc modifier :
    - La taille du bloc contenant l'image-titre ("title" et "block-title-on")
    - Les dimensions de la première image ("LIEN IMAGE EN 500*208" style="width:500px; height:208px;"), veillez cependant à ce que les dimensions soient les mêmes que celle du bloc.
    - Le format de ce qui apparaît au survol de l'image-titre ("block-title-under")
    - Le format du texte du titre (tout ce qui est dans le style du span)
    - L'espace entre les deux images en 100*100 ("letter-spacing : 15px;")
    - La taille de ces images (directement dans le width et le height des images)
    - La largeur du bloc de texte ("rp")
    - La hauteur, la couleur de fond, la couleur d'écriture, les bordures et les ombres du bloc de texte ("rp-txt")


    HTML sans CSS :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
    <div class="title"><div class="block-title-on"><a href="LIEN VERS LA PREMI7RE PAGE DU RP"><img src="LIEN IMAGE EN 500*208"/></a><div class="block-title-under"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp">
    <img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
    <div class="rp" style="margin-top:5px;"><div class="rp-txt" style="color:black; background-color:#306B17;"><div class="rp-scroll">
    --------------------------------> CONTENU DE VOTRE RP <-----------------------------
    </div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>

    Code CSS :
    Code:
    .title {
      margin:auto; /*centrage du bloc titre et image*/
        width:500px; /*largeur du bloc titre et image*/
    }

    .block-title-on
    {
       -webkit-transition: all 1.5s ease; /*vitesse de transition*/
       transition: all 1.5s ease; /*vitesse de transition*/
       display: block;
       width: 500px; /*largeur du bloc titre et image*/
       height: 208px; /*hauteur du bloc titre et image*/
       position: relative;
      opacity: 1.0; /*opacité de base de l'image */
      filter: alpha(opacity=100);  /*opacité de base de l'image */
      filter: grayscale(0); /*opacité de base de l'image */
            -webkit-filter: grayscale(0); /*image en couleurs*/
    }

    .block-title-on:hover a img {
         display: block;
       -webkit-transition: all 1.5s ease; /*vitesse de transition*/
       transition: all 1.5s ease; /*vitesse de transition*/
       opacity: 0.4; /*opacité de l'image au survol*/
        filter: alpha(opacity=40);   /*opacité de l'image au survol*/
      width:500px; /*largeur de l'image au survol */
      height:208px;  /*hauteur de l'image au survol */
       filter: grayscale(1); /*passage de l'image en noir et blanc*/
       -webkit-filter: grayscale(1); /*passage de l'image en noir et blanc*/
    border-radius: 1px; /*diminution de l'arrondi au survol*/
    }

    .block-title-on a img {
         display: block;
         position: absolute;
        left: 0; right: 0;
      top: 0; bottom: 0;
      -webkit-transition: all 1.5s ease; /*vitesse de transition*/
      transition: all 1.5s ease;  /*vitesse de transition*/
       width:500px; /*largeur de base de l'image */
      height:208px; /*hauteur de base de l'image */
    border-radius: 50px; /* arrondi de base de l'image*/
    border-top-left-radius: 15px; /* arrondi de base de l'image haut gauche*/
    border-bottom-right-radius: 15px; /* arrondi de base de l'image bas droite*/
    }

    .block-title-under {
        vertical-align:middle; /*centrage vertical du texte*/
    text-align:center;  /*centrage du texte */
    font-variant:small-caps; /*passage en petites majuscules */
      padding-top:30px; /*écart avec le haut du bloc titre*/
     }

    .block-title-under img {
       width:100px; /*largeur des petites images */
      height:100p ; /* hauteur des petites imaages*/
    border-radius: 50px; /*arrondi des petites images */
    border-top-left-radius: 15px;/*arrondi des petites images haut gauche */
    border-bottom-right-radius: 15px;x;/*arrondi des petites images bas droite*/
    }

    .img-rp {
      letter-spacing : 15px;} /*espace entre les deux images */

    .rp {
      margin:auto; /*centrage du bloc rp*/
      width:540px; /*largeur du bloc rp*/
      padding-left:10px;
      margin-bottom:20px;
    }

    .rp-txt {
      height:700px; /*hauteur du bloc rp*/
      overflow:auto; /*barre de défilement automatique*/
    border-top-left-radius: 2px; /*arrondi haut gauche */
    border-top-right-radius: 20px; /*arrondi haut droite */
    border-bottom-right-radius: 100px;/*arrondi bas droite */
    border-bottom-left-radius: 2px; /*arrondi bas gauche */
      padding:10px 25px 15px 10px;
      border-bottom:8px solid black; /*bordure bas */
      border-left:1px solid black; /*bordure gauche*/
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); /*ombre du bloc texte*/
      direction:rtl; /*NE PAS MODIFIER*/
      text-align:justify; /*NE PAS MODIFIER*/
    }

    .rp-scroll {
      direction:ltr; /*NE PAS MODIFIER*/
        text-align:justify; /*NE PAS MODIFIER*/
    }

    .rp-txt::-webkit-scrollbar {
        width: 3px; /*largeur de la barre de défilement*/
    }
     
    .rp-txt::-webkit-scrollbar-track {
              box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
      background-color:black; /*couleur de la barre de défilement*/
    }
     
    .rp-txt::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
      background-color:#DDDDDD; /*couleur du rectangle dans la barre de défilement*/
    }
    J'ai fait le code CSS le plus clair possible pour rendre la personnalisation simple. La couleur de fond et la couleur du texte restent modifiables directement dans le html, tout comme le format du titre (police, taille, ombre, etc). Si vous ne voulez vraiment rien modifier d'autre, il vous suffit de coller ce code au début de votre fiche pour que la mise en page se fasse d'elle-même :
    Code:
    <link href="http://www.aht.li/2840035/Fiche_Complete.css" rel="stylesheet" type="text/css" />
    Bon, et si vous n'avez pas d'image à la bonne taille pour le titre du rp et que vous avez la flemme de chercher ou d'en faire une, je vous offre des cactus :
    Code:
    http://i.imgur.com/J3kEMuF.png

    C'est ma première contribution, j'espère donc que c'est assez clair. N'hésitez pas à poser des questions si j'ai mal explicité certains points.
    Il faut poster à la suite pour voir les codes ~


    Dernière édition par JodieCravery le Dim 6 Mar 2016 - 13:52, édité 4 fois
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 6 Mar 2016 - 12:04

    Hello! ^^
    Tout d'abord: merci de ton partage! ^w^ Cependant il y a quelques soucis avec ton code ^^

    Tout d'abord, tu ouvre une table avec une seule ligne et une seule cellule pour mettre une div dedans. ça me semble un peu superflu de créer toute une table non?

    Ensuite, il y a un moment ou tu fais ceci:
    Code:
    <a href="LIEN VERS LA PREMIÈRE PAGE DU RP"/>
    En gros, tu fais comme si la balise a était unique (bien qu'il y ait la balise fermante après lîmage) ce qui risque de faire des bug. De même, une fois tu oublie les guillemets fermants (dans la prochaine table, qui est aussi superflue) ce qui peut tout faire bugger. Tu ne fermes aussi pas une balise image, car tu as mit le "/" au mauvais endroit:
    Code:
    <img src="LIEN IMAGE 100*100 DROITE"/ width="100px" height="100px"> devrait être <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px" />

    Aussi, je crois que la première balise div que tu ouvres n'est jamais fermée, et il manque le lien vers Never Utopia (juste le texte ne suffit pas ^^)

    Je te laisse faire les modifications ^w^



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 23 Juil 2016 - 23:03

    Salut!

    Désolée du délai >< Bref, un dernier petit truc et je pense que ce sera bon. Je sais que Google Font donne ses balises link sans les refermer, mais c'est comme les balises img, il faut actuellement les refermer pour que cela soit correct. Alors il faudrait les modifier pour que cela donne quelque chose comme ça :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />

    Aussi, tu sais que les filters existent juste en filter et -webkit-filter? -o-filter et -moz-filter n'existent pas. Quant aux border-radius, tu n'as plus besoin de préfixes. Pour les transitions, tu as juste besoin de transition et -webkit-transition, pas les autres préfixes.

    Tu peux utiliser ceci si tu veux, cela aide à savoir les préfixes à utiliser Wink
    http://caniuse.com/

    Edit 2016-10-01 : J'ai fait les corrections moi-même finalement. Du coup, je valide.



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 2:23