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.


    (SHOKI) Fiche article de journal

    Matena
    Matena
    FémininAge : 28Messages : 93

    Dim 24 Jan 2016 - 19:24

    Ma demande



       Bonjour bonjour ! Alors, je reviens avec une petite demande de fiche journal. Je m'explique; c'est pour pouvoir créer des articles comme un vrai journal avec les informations du jours les potins etc etc o/  Merci d'avance pour les essaye :3

       Schéma(s) et Eléments
       Schémas : https://www.zupimages.net/up/16/03/6td4.png
       Tailles des éléments : Pas plus de 500 en largeur, pour la longueur, que le tout s'adapte au texte selon s'il est long ou non.
       Effets voulus : Pour l'image qu'elle passe en noir en blanc, comme un vrai article de journal


       Ressources
       J'avoue que j'hésite grandement entre un simple fond gris même si ce serait un peu trop basique. Et un vrai fond de journal en papier

       Autres précisions ?
       Les couleurs d'écritures restent en noir et si possible pour le "gros titre" une écriture assez compact qu'on peu retrouver sur des articles.
       


    Dernière édition par Matena le Sam 30 Jan 2016 - 18:10, édité 1 fois
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Lun 25 Jan 2016 - 7:14

    Hello !
    Je veux bien tenter quelque chose sur ta demande, mais malheureusement je pourrai pas te faire ça de suite >< Je te fait tout ça dès que possible Wink

    EDIT : tu veux un cadre pour le texte de l'article ? x)
    Matena
    Matena
    FémininAge : 28Messages : 93

    Mar 26 Jan 2016 - 14:24

    Coucou ! Merci d'essayer ^^
    Possible d'avoir les deux ? Avec et sans cadre, j'ai un peu de mal à imaginée la différence x')
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Mer 27 Jan 2016 - 19:30

    D'accord !
    J'ai donc commencé à faire la fiche, et j'ai pas bien compris le truc de l'image : y'a-t-il un effet particulier à mettre ? ><
    En cliquant ici, tu aura ce que ça donne à peut près avec ou sans cadre (pense à passer ta souris sur le texte Wink), mais bien évidemment je peux arrondir les bords, modifier l'opacité, etc Wink
    A partir de là je peux même tenter de te faire un petit effet sympa pour la bloc du texte (genre le texte, normalement invisible, devient visible quand on passe sa souris dessus Wink Mais avant faut que je fasse des test pour voir si j'y arrive :hum:) Razz
    Matena
    Matena
    FémininAge : 28Messages : 93

    Mer 27 Jan 2016 - 20:26

    Alors, c'est très bien comme ça ! :3
    Pour ce qui est de l'image en fait c'est qu'une fois qu'elle ait mise elle passe automatiquement en noir et blanc, même si c'est une image en couleur. Tu vois ce que je veux dire ? xD Un effet noir et blanc
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Mer 27 Jan 2016 - 20:38

    Je vois je vois x) Je sais pas si c'est possible de faire ce que tu as dit, du moins à mon niveau >< Mais ce que je peux tenter de faire, c'est faire un effet au survol qui fait qu'elle devient noire et blanche au survol de la souris o:
    Sinon je laisse tel quel, en apportant quelques modifications ? :)




    (SHOKI) Fiche article de journal 5qox
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 27 Jan 2016 - 20:53

    Coucou Shoki!
    Pour la rendre en noir et blanc y'a un filtre en CSS piur ça! Le voici:

    Code:
    img:hover {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      transition: all linear 0.5s;
    }

    Le transition c'est pour que ce soit plus zoli! <3



    Matena
    Matena
    FémininAge : 28Messages : 93

    Mer 27 Jan 2016 - 21:02

    Merci Nyo !
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Jeu 28 Jan 2016 - 7:38

    *note d'aller voir le tuto sur les filtres en CSS*
    Merci Nyo ! Mais malheureusement ça ne fonctionne pas sous Firefox, même en changeant le préfixe >< Je crois que ça ne marche que sur Chrome x: Mais ça ne m'a pas empêchée de le rajouter à mon code :p
    Du coup, Matena, voilà ce que ça peut donner une fois fini : http://myamv.forumactif.org/t24-apercu-commande-matena#43
    Y'a-t-il des détails à modifier ? :)




    (SHOKI) Fiche article de journal 5qox
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 28 Jan 2016 - 8:41

    J'ai firefox et ça marche très bien... ^^" Ton navigateur est peut-être pas à jour? ^^



    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Jeu 28 Jan 2016 - 12:49

    ... En fait je viens de voir que c'était au hover xD J'y avais pas fait attention #JeSuisBête :'D Et oui mon Firefox est parfaitement à jour :)




    (SHOKI) Fiche article de journal 5qox
    Matena
    Matena
    FémininAge : 28Messages : 93

    Jeu 28 Jan 2016 - 13:39

    Donc, euh... je suis pas sûr d'avoir tout compris, il y est cet effet du coup, ou pas du tout ? xD
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Jeu 28 Jan 2016 - 17:12

    Oui oui il y est, passe ta souris sur l'image tu verra qu'il y est x')
    Si tout te convient je te donnerai les codes ^^




    (SHOKI) Fiche article de journal 5qox
    Matena
    Matena
    FémininAge : 28Messages : 93

    Jeu 28 Jan 2016 - 21:27

    J'ai l'impression d'être casse pied désoler >.>
    L'effet gris devait être inverser XD Qu'il passe en couleur quand la souris est dessus et non en gris
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 30 Jan 2016 - 11:47

    Désolée de ma réponse un peu tardive, mais voilà ce que ça donne en inversant :
    http://myamv.forumactif.org/t24-apercu-commande-matena#43
    N'hésite pas à me signaler des détails qui ne te vont pas ^^




    (SHOKI) Fiche article de journal 5qox
    Matena
    Matena
    FémininAge : 28Messages : 93

    Sam 30 Jan 2016 - 11:50

    Non, non, c'est parfait o/
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 30 Jan 2016 - 12:33

    Dans ce cas, c'est avec grand plaisir que je t'offre les codes sur un plateau d'argent c: /out
    Le CSS à mettre dans la feuille de style :


    Le HTML :


    Si tu rencontre le moindre soucis n'hésite pas Wink
    Matena
    Matena
    FémininAge : 28Messages : 93

    Sam 30 Jan 2016 - 12:41

    D'accord merci mais... euh... je fais quoi avec la partie CSS ? je la place où ? Parce que perso j'ai jamais compris comment ça marche ^^"
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 30 Jan 2016 - 15:09

    Alors il faut que tu fasse panneau d'administration > affichage > couleurs > feuille de style CSS. Une fois dedans tu as juste à copier/coller le CSS ^^




    (SHOKI) Fiche article de journal 5qox
    Matena
    Matena
    FémininAge : 28Messages : 93

    Sam 30 Jan 2016 - 15:24

    Ah, mais... j'ai pas les droits. Je suis pas fonda/admin..
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 30 Jan 2016 - 17:53

    Pourquoi j'y ai pas pensé plus tôt :facepalm:
    Bon heureusement que j'ai le code original sous les yeux :
    Code:
    <style>.fond_journal {width: 490px; margin: auto; background-color: silver; padding: 5px;} .date_nom_journal {display: block; text-align: right; font-size: 14px;} .gros_titre {display: block; text-align: center; font-size: 30pt; font-family: 'Impact', fantasy;} .citation {display: block; text-align: center; font-size: 10pt;} .bloc_img_art {width: 450px; height: 150px; margin: auto; background-color: grey; border-radius: 15px; overflow: hidden;} .bloc_article_journ {width: 470px; margin: auto; text-align: justify; background: rgba(240,240,240,0); padding: 10px; border-radius: 15px; transition: all 1s ease; -webkit-transition: all 1s ease;} .bloc_article_journ:hover {background: rgba(240,240,240,1);} .img {-webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all linear 0.5s;} .img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%); transition: all linear 0.5s;}</style>

    <div class="fond_journal">
    <span class="date_nom_journal" style="margin-top: -20px;">Date/jour/mois</span>
    <span class="date_nom_journal" style="margin-top: -15px;">Nom du journal</span>

    <span class="gros_titre">Titre de l'article</span>
    <span class="citation">Citation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi.</span>
    <div class="bloc_img_art"><img src="http://zupimages.net/up/16/04/oayj.png" class="img" /></div>
    <div class="bloc_article_journ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus, lacus a tristique ultrices, eros tellus accumsan purus, pellentesque ornare nulla massa id urna. Morbi arcu mauris, rutrum et justo sit amet, imperdiet finibus augue. Praesent tristique nibh non sapien varius, ac ullamcorper purus rhoncus. Curabitur eget dignissim tortor. Nulla facilisi. Quisque id accumsan purus, in sollicitudin tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus massa quis pulvinar viverra. Etiam egestas ligula sit amet odio porttitor cursus. Integer purus arcu, vestibulum ac faucibus in, pellentesque nec urna. Aenean euismod, purus sed vestibulum tincidunt, nisl velit sollicitudin lorem, eget bibendum lacus lectus id ex. Pellentesque varius magna eu pharetra consectetur.

    Nulla diam risus, feugiat eget purus in, commodo ultricies mauris. Curabitur ipsum sem, vestibulum vitae posuere vel, aliquet id lorem. Aliquam a maximus turpis. Nunc fringilla lectus a posuere tempor. Maecenas posuere nisl odio, non mattis diam ullamcorper eget. Proin eleifend erat eros, at lacinia ante eleifend sit amet. Aliquam erat volutpat. In rutrum tellus lorem, ac volutpat orci rutrum a. Pellentesque ut scelerisque lectus, quis ultricies ligula. Suspendisse vulputate nisl orci, ac laoreet enim vehicula sit amet. Donec auctor eros quis volutpat viverra. Mauris vel dapibus lorem. Duis non tellus quis magna iaculis auctor eu et massa. Donec ligula velit, tincidunt et turpis non, lobortis luctus est. Morbi consectetur aliquet magna, tincidunt ultrices eros eleifend ac.</div>
    <span style="display: block; font-size: 10px; color: grey; text-align: center;">Code par MV/Shoki sur Never Utopia</span></div>

    Là tu n'aura pas besoin d'avoir accès à quoi que ce soit Wink
    Matena
    Matena
    FémininAge : 28Messages : 93

    Sam 30 Jan 2016 - 18:09

    Merci, c'est parfait !
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2024 - 15:59