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.

-9%
Le deal à ne pas rater :
SSD interne Crucial SSD P3 1To NVME
49.99 € 54.99 €
Voir le deal

    Fiche de lien - The Colour for Us

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

    Dim 26 Juin 2016 - 17:27



    Bonjour,

    Me revoici avec un nouveau LS de fiche de lien, qui est cette fois-ci un peu expérimentale.



    Les couleurs du dégradé sont modifiables (si vous arrivez à vous  y retrouver dans ce capharnaüm) tout comme le reste. Le crédit quant à lui est indélébile.

    Code:
    <div class="color-topbox">
    <div class="center-box"><div class="color-code"><div class="cube1"></div><div class="desc"><b>Lover</b> - Love is when the other person's happiness is more important than your own. <i>H. Jackson Brown, Jr.</i></div></div><div class="color-code"><div class="cube2"></div><div class="desc"><b>Good Friend</b> - A real friend is one who walks in when the rest of the world walks out. <i>Walter Winchell</i></div></div><div class="color-code"><div class="cube3"></div><div class="desc"><b>Friend</b> - One loyal friend is worth ten thousand relatives. <i>Euripide</i></div></div><div class="color-code"><div class="cube4"></div><div class="desc"><b>Acquaintance</b> - The beginning of an acquaintance whether with persons or things is to get a definite outline of our ignorance. <i>George Eliot</i></div></div><div class="color-code"><div class="cube5"></div><div class="desc"><b>Indifferent</b> - At the bottom of enmity between strangers lies indifference. <i>Soren Kierkegaard</i></div></div><div class="color-code"><div class="cube6"></div><div class="desc"><b>Rival</b> - I embrace my rival, but only to strangle him. <i>Jean Racine</i></div></div><div class="color-code"><div class="cube7"></div><div class="desc"><b>Frenemy</b> - An enemy to whom you show kindness becomes your friend, excepting lust, the indulgence of which increases its enmity. <i>Saadi</i></div></div><div class="color-code"><div class="cube8"></div><div class="desc"><b>Enemy</b> - You have enemies? Good. That means you've stood up for something, sometime in your life. <i>Winston Churchill</i></div></div><div class="color-code"><div class="cube9"></div><div class="desc"><b>Mortal Enemy</b> -  Know thy self, know thy enemy. A thousand battles, a thousand victories. <i>Sun Tzu</i></div></div></div>
    <div class="color-name">Nom Prénom</div></div>

    <div class="color-body">
    <div class="color-linkbox" style="background-color: #f93974;"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Rival</div></div>
    <div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

    <div class="color-linkbox" style="background-color: #6b39f9"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Mortal Enemy</div></div>
    <div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

    <div class="color-linkbox" style="background-color: #05f598"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Lover</div></div>
    <div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

    <div class="frost">Code de <a href="http://www.never-utopia.com/">Frosty Blue</a></div></div><style type="text/css">.color-topbox {width: 500px; margin: auto; position: relative;} .color-code {height: 20px; width: 20px; display: inline-block; vertical-align: top; margin-right: 15px; opacity: 0.5; transition: 1s; -webkit-transition: 1s;} .desc {background: black; color: lightgrey; text-align: justify; position: absolute; z-index: 2; opacity: 0; transition: 1s; -webkit-transition: 1s; width: 0px; box-sizing:border-box; padding: 10px; height: 50px; overflow: auto; position: absolute; left: 0px; top: 45px;} .cube1:hover {-webkit-transition: 1s; transition: 1s; box-shadow: 0px 0px 3px lightgrey;} .color-code:hover {opacity: 1; transition: 1s; -webkit-transition: 1s;} .color-code:hover .desc {width: 500px; opacity: 1; -webkit-transition: 1s; transition: 1s;} .cube1 {height: 20px; width: 20px; background: #05f598; position: relative; -webkit-transition: 1s; transition: 1s;} .cube2 {height: 20px; width: 20px; background: #81f939; position: relative; transition: 1s; -webkit-transition: 1s;} .cube3 {height: 20px; width: 20px; background: #f9f639; position: relative; transition: 1s; -webkit-transition: 1s;} .cube4 {height: 20px; width: 20px; background: #f99c39; position: relative; transition: 1s; -webkit-transition: 1s;} .cube5 {height: 20px; width: 20px; background: #f93939; position: relative; -webkit-transition: 1s; transition: 1s;} .cube6 {height: 20px; width: 20px; background: #f93974; position: relative; transition: 1s; -webkit-transition: 1s;} .cube7 {height: 20px; width: 20px; background: #ed39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .cube8 {height: 20px; width: 20px; background: #b63bf7; position: relative; transition: 1s; -webkit-transition: 1s;} .cube9 {height: 20px; width: 20px; background: #6b39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .color-name {font-size: 30px; position: relative; z-index: 1; color: black; text-align: center; letter-spacing: 15px; text-transform: uppercase; font-family:'Cantarell'; font-weight: bold; line-height: 30px;} .color-body {width: 500px; margin: auto;} .color-linkbox {width: 500px; margin: auto; text-align: center; font-family: 'Cantarell'; text-transform: uppercase; letter-spacing: 5px; color: black; font-size: 18px; padding: 7px; box-sizing: border-box; height: 30px;} .color-linkname {position: relative; transition: 1s; -webkit-transition: 1s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} .color-linkbox:hover .color-linkname {-webkit-filter: blur(25px); filter: blur(25px); opacity: 0; transition: 1s; -webkit-transition: 1s;} .color-reminder {opacity: 0; transition: 1s; -webkit-transition: 1s; position: relative; top: -18px; color: white;} .color-linkbox:hover .color-reminder {opacity: 1; transition-delay: 1s; -webkit-transition-delay: 1s; -webkit-transition: 1s; transition: 1s;} .color-descbox {width: 500px; height: 70px; margin: auto; box-sizing: border-box; padding: 10px; background: black;} .linkdesc {box-sizing: border-box; padding: 10px; height: 50px; width: 300px; float: left; overflow: auto; background: lightgrey; color: black; font-family: 'Cantarell'; text-align: justify; position: relative; z-index: 1;} .color-descbox img {height: 50px; width: 50px; background: white; overflow: hidden; margin-left: 8px;} .frost {opacity: 0.5; color: lightgrey; font-size: 10px; text-align: center;} .center-box {margin: auto; text-align: center;}

    </style><link href='https://fonts.googleapis.com/css?family=Cantarell:400,700' rel='stylesheet' type='text/css' />


    Dernière édition par Frosty Blue le Mer 27 Juil 2016 - 13:10, édité 3 fois
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 24 Juil 2016 - 5:00

    Hellow !

    Alors, quelques petites correction à faire et ce sera bon ^^

    Et j'adore le principe des couleurs, c'est juste génial !

    Edit 2016-10-02 : Les modifications ont été apportées, désolée du délai, je valide le tout !



    Froufy
    Froufy
    FémininAge : 24Messages : 59

    Lun 10 Oct 2016 - 20:13

    Hey! Je te remercie pour ce code qui est super sympa!



    1+1= 4
          2
    3
    Anonymous
    Invité

    Mar 11 Oct 2016 - 15:41

    Merci pour le partage !
    Morwen
    Morwen
    FémininAge : 28Messages : 67

    Dim 30 Oct 2016 - 13:49

    Je comprends pas bien comment ça marche mais j'ai envie d'essayer ! Merci beaucoup. <3
    Ryok'art
    Ryok'art
    FémininAge : 29Messages : 27

    Jeu 4 Avr 2019 - 17:03

    Merci pour le partage :)



    Fiche de lien - The Colour for Us Tenten11
    Lalia
    Lalia
    FémininAge : 24Messages : 45

    Lun 22 Avr 2019 - 13:16

    Merci beaucoup! x3
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 12:20