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 :
Manga Chainsaw Man : où acheter le Tome 17 édition Collector de ...
19.99 €
Voir le deal

    Une jolie fiche de liens avec effets

    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Jeu 18 Sep 2014 - 18:16

    Bonjour! Merci au codeur qui prendra cette commande :hug:
    Cette fiche n'est vraiment pas pressée, prenez tout votre temps <3

    Fiche de liens



    Re-bonjour! (Vu que je l'ai déjà dis mais osef). J'aimerai beaucoup une fiche de liens dont j'avais élaboré le schéma il y a quelques temps. Elle comporte des effets alors voilà. Je suis plutôt ouverte malgré le fait que vous allez peut être le trouver un peu exigeante :/. Cette fiche a des ronds. Voilà (je me suis sentie obligée de préciser xD)

    Schéma(s) et Eléments
    Schémas : Celui qui se moque je lui... Offre des bonbons. Oui c'est moche, c'est fait avec YouDoodle BREFOUILLE!
    Spoiler:
    Tailles des éléments : J'ai mis les tailles des images dans le schéma. Pour la fiche je sais pas trop les tailles du coup... Normal?
    Effets voulus : Quand on passe la souris sur ce que j'ai montré, j'aimerai qu'il y ait du texte (euh hover c'est ça?)


    Ressources
    Aucune désolée >.<

    Autres précisions ?
    Merci à celui où celle qui fait ce code. Je vous aime posez moi toutes vos belles questions si vous en avez :love: . Ah si! J'aimerai beaucoup dans les couleurs froides (un peu comme le thème de Narja sur N.U Razz ). Et pour les typos des titres, je suis plutôt libre mais au choix, un peu comme ça:
    :hug:


    Merci bowcou! Si cette commande est de trop, effacez là!
    Elle peut être mise dans le libre service à tout moment!
    Goudeuhbaille!


    Dernière édition par Hollyx le Dim 21 Sep 2014 - 14:10, édité 1 fois
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 15:21

    Bonjour,

    Juste à titre indicatif (histoire que je puisse réfléchir à si oui ou non j'ai les capacités de faire cette fiche ^^') que veux-tu dire par 'du texte qui roule'?

    Et pour le nom et la citation, ce que tu veux c'est le nom au dessus de la citation, le tout apparaissant lorsque l'on passe la souris sur l'image?

    Sinon je pense que je pourrai éventuellement (tu remarqueras que je suis pas très sure ^^) essayer de te proposer une fiche. Je vais tenter et je te ferais mon rapport.
    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Sam 20 Sep 2014 - 16:51

    Ah je suis désolée pour "texte qui roule".
    Parce que j'oublie toujours le nom quand tu peux faire un long texte et avec ta souris tu fais descendre (sans faire un rond plus long)
    Tu as compris pour le nom et la citation. Quand on passe sur l'image (éventuellement un gif à voir) ça pourrait montrer le texte.
    Owiiiii merci! Je suis patiente (Mais marchiiiii quand mêmeuh)
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 17:11

    Ö

    Une barre de défilement donc! Ok, je me demandais ce que ça pouvait bien vouloir dire ^^'
    Du coup, j'ai fait la première partie (le profil) avec des couleurs atroces et des fonts au hasards (eh! prototype, hein!). Par contre j'ai du mal avec les liens...Théoriquement je sais le faire mais pour une raison qui m'échappe rien ne marche...-_-

    En tout cas, je te montre la première partie, histoire que tu me dises si la structure te va. Pour ce qui est de la décoration, ça m'aiderait que tu élabores sur 'l'ambiance' que tu recherches.

    Hmm...Et c'est tout...Je te met la prévisualisation du profil:
    Prévisualisation du prototype:

    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Sam 20 Sep 2014 - 17:16

    Oh merci! C'est mignon!
    La fiche est toute jolie alors j'en profite pour t'embêter (MOUAHAHAHAHAHAHAHAHAHAHA)
    Je ne sais pas si ça t'embête mais pourrais tu mettre les coins de la fiche en rond? Enfin les coins arrondis. Oh et sur la graaaaaaaaaande photo aussi.
    Merci boucou!
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 17:31

    Pas de problème ^^

    J'en profite pour te donner les résultats de la partie lien qui ne sont malheureusement pas brillant. Le problème est que pour que l'on puisse utiliser la barre de défilement, il faut que l'image 'disparaisse' (j'allais la faire 'slider' sur le côté). Malheureusement, je ne sais pas faire cet effet en css interne. Ce que je peux faire, c'est réduire l'opacité de l'image comme sur la grande image du profil. Sauf que la barre de défilement ne sera pas utilisable.

    Donc; en résumé, soit tu as accès à la feuille de css du forum où tu vas l'utiliser et je te fais le slide. Soit il faut impérativement du css interne et il va falloir se contenter de réduire l'opacité (auquel la description du lien va être limitée).

    A toi de voir. Après, il y a peut-être des codeurs qui savent le faire, je ne sais pas...
    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Sam 20 Sep 2014 - 17:38

    Okey!
    Étant donné que je vais utiliser le code un peu partout, je ne serais pas admin tout le temps.
    Du coup, je vais laisser ouvert le sujet au cas où. Mais, je suis quand même un peu admin (quand même hein!) alors si tu pouvais le donner les petits liens en css, ce serait tout de même superbeuh.
    Merci énormément en tout cas ^^
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 17:47

    D'accord, je vais te faire le code avec css externe ^^

    Du coup, j'ai modifié le profil, en rajoutant des effets de style et les coins arrondis. Voici que ça donne:

    Prévisualisation:

    Si ça te convient, voici le code:
    Code:

    <link href='http://fonts.googleapis.com/css?family=Calligraffitti|Berkshire+Swash' rel='stylesheet' type='text/css'><style type="text/css">.hollyx-img:hover {opacity: 0; -moz-opacity: 0; -ms-opacity: 0; transition: 1s; -moz- transition: 1s; -ms- transition: 1s;}</style>
    <div style="background-color: #8dc3ee; width: 500px; padding: 30px; border-radius: 30px; border-left: 4px solid midnightblue; border-right: 4px solid midnightblue; margin: auto;"><div style="background-color: white; border-radius: 20px; font-family: 'berkshire Swash'; color: black; text-align: center; width: 460px; height: 190px; overflow: auto; position: relative; z-index: 1; margin-left: auto; margin-right: auto; padding: 20px; font-size: 40px; line-height: 40px;">Nom Prénom<br><div style="font-family: 'Calligraffitti'; font-size: 30px;">La zoulie citation, super trop magnifique</div></div><div class="hollyx-img" style="width: 500px; height: 230px; overflow: hidden; transition: 1s; -moz- transition: 1s; -ms- transition: 1s; margin-top: -230px; position: relative; z-index: 3; border-radius: 20px; box-shadow: 0px 0px 6px white;"><img src="http://img15.hostingpics.net/pics/252546hollyxmain.jpg"/></div>

    <div style="height: 100px; width: 100px; border-radius: 50px; overflow: hidden; display: inline-block; margin-right: 20px; margin-left: 20px; box-shadow: 0px 0px 6px white;"><img src="http://img15.hostingpics.net/pics/627941hollyxlink.jpg"/></div><div style="width: 300px; height: 80px; padding: 10px; color: black; background-color: white; border: 2px midnightblue solid; overflow: auto; display: inline-block; text-align: justify;">Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.<br></div><br>


    <div style="width: 300px; height: 80px; padding: 10px; color: black; background-color: white; border: 2px midnightblue solid; overflow: auto; display: inline-block; text-align: justify; margin-right: 20px; margin-left: 20px;">Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.<br></div><div style="height: 100px; width: 100px; border-radius: 50px; overflow: hidden; display: inline-block; box-shadow: 0px 0px 6px white;"><img src="http://img15.hostingpics.net/pics/627941hollyxlink.jpg"/></div><br>
    </div>

    N'hésite pas à me demander d'autres modifications, surtout ^^
    Surtout au niveau du nom et de la citation, je n'ai vraiment rien fait. Si tu as des polices ou des couleurs que tu voudrais que j'ajoute, je te le fais sans problèmes.

    Sur ce, je passe aux liens!
    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Sam 20 Sep 2014 - 18:01

    Merci beaucoup! Non j'aime comme ça c'est vraiment super sympa <3

    J'attends avec impatience les petits liens!
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 20 Sep 2014 - 18:29

    Coucou,

    Je fais une petite intervention rapide pour signaler à Frosty que dorénavant les demandes en codages (qui sont donc appelé demandes et non commandes) doivent théoriquement être fourni en LS, pour cause que beaucoup trop de personnes partaient sans même prendre le boulot qui était réalisé, et/ou sans même mettre de remerciement ou de crédit (cela dit, ça c'est pareil partout) du coup ce sont devenu des LS à fournir et non de simple commande propre à chaque personne Wink

    Pour t'aider un peu niveau codage, à défaut de faire en sorte que l'image disparaisse et laisse voir le texte pourquoi ne pas faire l'inverse ? Que le bloc du texte soit au dessus de l'image avec une opacité 0 et au survol il devient en opacité 1. L'effet sera la même mais il y aura l'avantage de pouvoir utiliser une scrollbar sans soucis Wink



    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 18:33

    Ö

    Désolé, je ne savais pas ^^'
    Je dois dire que je ne m'intéresse pas souvent aux demandes...Bien compris en tout cas.

    Sinon, c'est une très bonne idée Alzufen! Je vais essayer ça. Merci de ton aide ^^
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 20 Sep 2014 - 18:40

    C'est marqué dans les règles de la section mais il est vrai que pour ceux qui ne s'y intéressent pas on n'est pas au courant, imagine que c'est encore pire pour les anciens qui étaient habitué aux commandes et qui se retrouvent d'un coup à revenir avec ça Razz

    Après théoriquement, je pense qu'il y a moyen de faire la même chose avec certains LS disponible côté fiche, mais vu que tu as commencé j'allais pas chercher voire si on pouvait pas personnaliser un peu un code pour qu'elle obtienne ce qu'elle veut Wink Donc continue, si tu ne postes pas en LS ça ne sera pas la mort, mais ça peut être bien pour éviter aux gens qui désirent un effet similaire de passer demande ou de chercher pendant à avoir un code identique ou qu'ils peuvent personnaliser pour faire un tel rendu ^^

    Sur ce, bon courage :3 Je rappelle car ce n'est pas marqué dans les règles mais une fois la demande finie pense à mettre le crochet vert pour l'archivage Wink



    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 19:06

    Je pense que je vais finir par aller jeter un oeil aux LS parce que là je n'en peux plus...Je ne sais pas si c'est moi qui ait un problème ou mon ordi mais pas moyen de faire marcher l'opacité! :wall:
    Enfin bref, je retenterai au calme, demain -_-

    En tout cas, c'est noté pour le crochet vert et j'irai poster en LS dès que j'aurais réglé la deuxième partie (si j'y arrive).
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 20 Sep 2014 - 19:14

    C'était pour Hollyx le crochet vu que c'est son topic ^^ :3

    Pense à changer le z-index de l'image et du textes, à défaut de les déplacer Wink Je vois pas ce qui peut poser problème pour l'opacité en fait ^^'

    (Pas bien, j'aide en section demande XD Ma gentillesse me perdra huhu)



    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Sam 20 Sep 2014 - 19:18

    Coucouw!
    Surtout prend tout ton petit Time je suis pas pressée (Parce que me connaissant, si j'avais été pressée, j'aurai gagné des arachides et acheté le symbole coupe-file xD)
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 19:32

    Le problème c'est que moi non plus je ne voit pas ce qui peut poser problèmes avec l'opacité -_-
    Ça en devient déprimant à vrai dire...
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 20 Sep 2014 - 20:25

    Je crois avoir compris le soucis de ton code Wink

    Déjà, tu utilises les préfixes Moz et MS pour Opacity et Transition, opacity ça fait longtemps qu'il est reconnu par tous les navigateurs, donc les préfixes ne sont plus utiles (Juste Opacity suffit) ensuite, pour transition, seul Wekbit peut être utile pour les quelques versions qui ne le prenne pas encore en compte sans ^^

    Je rajouterais que le soucis de ton opacité au survol du lien, c'est que tu fais ça en CSS interne et le hover en externe. Le CSS interne est toujours prioritaire sur le CSS externe dans la feuille de style, à moins d'utiliser un "!important" il y a donc trois solutions, dans l'ordre que je les recommandes :

    Soit, tout faire via une Iframe, comme ça, si cette fiche doit être posté ailleurs mais sous la même apparence avec le même texte et tout, ce sera plus facile, surtout pour tout modifier d'un coup.
    Soit, tout faire en CSS externe dans la balise < style > (On ne sait cependant pas les soucis que ça pourrait créer à l'avenir)

    Soit, mettre des !important à ce qui est en css externe pour que ça prime sur le css interne au survol Wink Je ne le recommande pas, c'est une solution de facilité et pas forcément idéal mais si tu n'arrives pas autrement ou si Hollyx ne veut pas faire autrement, c'est sans doute le plus simple ^^ (A défaut de tout faire en CSS externe, tu peux juste faire la div du texte via une class et c'est tout ^^)



    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Dim 21 Sep 2014 - 8:55

    Très sincèrement (et comme je ne suis pas difficile) je laisse faire Frosty.
    Oui parce que la nullitude que je suis ne peux comprendre le codage xD même avec des années d'apprentissage. Alors si certaines choses arrangent plus Frosty, je laisse mon codage entre ses mains. Voilà~
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Dim 21 Sep 2014 - 10:32

    Je vois...Merci de ton aide Alzufen, je ne sais pas ce que je ferais sans toi! //PAN//

    Du coup je vais essayer tes solutions ^^
    Je ne vais pas tenter le i-frame par contre. J'ai une dent contre cette méthode. -_-
    En fait, je n'aime pas le fait que ça te déforme certains caractères. Les accents notamment.

    Bref, je travaille dessus plus tard et je vous tiens au courant ^^
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Dim 21 Sep 2014 - 12:47

    Ca déforme les caractères car l'encodage n'est pas défini, et celui de base n'accepte pas les caractères spéciaux, c'est pareil partout, si tu fais un site web, ou quoi que ce soit du genre où tu pars de zéro ce sera exactement pareil, il faut définir l'encodage... En général on utilise, à mettre tout en haut (ou entre balise "head") :

    Code:
    <meta charset="utf-8" />
    ou
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    J'ai tendance à plus voir le second mais bon les deux marche Razz



    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Dim 21 Sep 2014 - 13:59

    Je vois, je vois... *prend en note*
    Décidément, tu as les réponses à tout! Je vais finir par construire un temple pour te vénérer *.*

    ...Oui je suis lèche-botte -_-

    Plus sérieusement, j'ai fini de batailler avec mes compétences abyssales pour sortir quelque chose d'à peu près correct qui se trouve désormais ici: https://www.never-utopia.com/t51213-ls-fiche-de-lien-winter-day#767992 .

    J'ai rajouté un titre avant les liens parce que ça faisait un peu abrupt sans...^^'
    J'espère que ça te conviendra Hollyx!
    Hollyx
    Hollyx
    FémininAge : 32Messages : 76

    Dim 21 Sep 2014 - 14:10

    Merci c'est super sympa! C'est parfait!
    Je clos donc la commande <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 23:28