Fondatrice & Conteuse poivre et sel Age : 31 Messages : 582 Expérience : 405 Personnages joués : Severus Snape | Pelagia Ollivander | Mai Lan Turner | | Mar 3 Nov - 12:20 | Bonjour à toi <3
Ce code date de 2015 ; il reste sans doute des petites imprécisions dans le codage, mais il est fonctionnel et devrait pouvoir vous servir. Le CSS est entre balises style avant le HTML. Il peut être déporté dans une feuille de style si tel est votre souhait.
Le code est sous hide ci-après. Bonne utilisation à vous. Merci de laisser le crédit. Premier message Premier message au survol Bloc de liens Blocs de liens au survol Bloc de liens au survol d'un lien BLOC DE PRÉSENTATION DU PERSONNAGE - Code:
-
<link href='http://fonts.googleapis.com/css?family=Amatic+SC|Old+Standard+TT|Great+Vibes&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style>.finame {font-family: 'Great Vibes', cursive; font-size: 50px; margin-left: auto; margin-right: auto; width: 500px; text-align: center; text-shadow: 0px 0px 4px black; } .fifond {color: #F9F9F9; font-family: 'Old Standard TT', serif; width: 500px; height: 650px; margin: auto; border-top: 4px solid #000000; border-bottom: 4px solid #000000; box-shadow: 0px 0px 8px #000000; position: relative; overflow: hidden;} .fifond .fic {width: 500px; height: 650px; position: absolute; opacity: 0; transition: 1s; } .fifond:hover .fic {opacity: 1; transition: 1s; } #fidesc {width: 300px; height: 100px; background-color: rgba(39, 28, 6, 0.5); position: relative; top: 10px; left: 180px; overflow: auto; padding: 5px; text-align: justify; color: #F9F9F9; font-family: 'Old Standard TT', serif; font-size: 12px; border-left: 2px solid #131006;} #fidesc span {font-family: 'Amatic SC', cursive; font-size: 20px; } #filinks {position: relative; width: 150px; height: 100px; left: 10px; top: 250px;} #filinks a {font-family: 'Amatic SC', cursive; font-size: 18px; text-decoration: none!important; font-weight: bold; color: #131006; display: inline-block; transition: 1s; } #filinks a:hover {text-decoration: none!important; color: #F9F9F9; background: #131006; transition: 1s; } #filook {width: 300px; height: 100px; background-color: rgba(39, 28, 6, 0.5); position: relative; top: 320px; left: 180px; overflow: auto; padding: 5px; text-align: justify; color: #F9F9F9; font-family: 'Old Standard TT', serif; font-size: 12px; border-left: 2px solid #131006;} #filook span {font-family: 'Amatic SC', cursive; font-size: 20px; } #copy {position: relative; width: 110px; height: 20px; top: 300px; left: 10px; } #copy a {font-family: 'Amatic SC', cursive; font-size: 12px; text-decoration: none!important; color: #000000; display: inline-block; transition: 1s; } #copy a:hover {text-decoration: none!important; color: #F9F9F9; transition: 1s;}</style> <div class="finame">Prénom P. Nom</div><div class="fifond" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428113420150605.png) top center"><div class="fic"><div id="fidesc"><span>Je suis ☙</span> Blablabla</div><div id="filinks">☙ <a href="">Fiche personnage</a> ☙ <a href="">Fiche liens</a> ☙ <a href="">Fiche RP's</a> ☙ <a href="">Journal</a> ☙ <a href="">Correspondance</a></div><div id="filook"><span>Je cherche ☙</span> Blablabla</div><div id="copy"><a href="https://fortunasmess.tumblr.com/">Fortuna</a></div></div></div> BLOC DE LIENS - Code:
-
<link href='http://fonts.googleapis.com/css?family=Amatic+SC|Old+Standard+TT|Great+Vibes&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style>.finame {font-family: 'Great Vibes', cursive; font-size: 50px; margin-left: auto; margin-right: auto; width: 500px; text-align: center; text-shadow: 0px 0px 4px black; } .fifond {color: #F9F9F9; font-family: 'Old Standard TT', serif; width: 500px; height: 650px; margin: auto; border-top: 4px solid #000000; border-bottom: 4px solid #000000; box-shadow: 0px 0px 8px #000000; position: relative; overflow: hidden;} .fifond .fic {width: 500px; height: 650px; position: absolute; opacity: 0; transition: 1s; } .fifond:hover .fic {opacity: 1; transition: 1s; } #fiblabla {position: relative; width: 100px; min-height: 60px; left: 10px; top: -400px; text-align: justify; padding: 5px; color: #F9F9F9; transition: 1s;} #fiblabla:hover {background: #131006; transition: 1s;} #fiblabla span {font-family: 'Amatic SC', cursive; font-size: 20px; } #copy2 {position: relative; width: 90px; height: 20px; top: -40px; left: 10px; z-index: 999;} #copy2 a {font-family: 'Amatic SC', cursive; font-size: 12px; text-decoration: none!important; color: #000000; display: inline-block; transition: 1s; } #copy2 a:hover {text-decoration: none!important; color: #F9F9F9; transition: 1s;} .fiblocrelation {width: 310px; height: 110px; position: relative; border-left: 2px solid #131006; margin-bottom: 3px;} .fiblocrelation .firelation {width: 300px; height: 100px; background-color: rgba(39, 28, 6, 0.5); overflow: auto; padding: 5px; text-align: justify; color: #F9F9F9; font-family: 'Old Standard TT', serif; font-size: 12px; opacity: 0; transition: 1s;} .fiblocrelation:hover .firelation {opacity: 1; transition: 1s;} .firelation span {font-family: 'Amatic SC', cursive; font-size: 20px; }</style> <div class="finame">Catégorie Liens</div><div class="fifond" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428113411758981.png) top center"><div class="fic"><div style="width: 340px; height: 650px; position: relative; top: -0px; left: 160px; overflow: auto; "><div class="fiblocrelation" style="background: url(https://nsa37.casimages.com/img/2015/04/28/150428101358461441.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428101357262575.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa37.casimages.com/img/2015/04/28/150428101358461441.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428101357262575.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa37.casimages.com/img/2015/04/28/150428101358461441.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428101357262575.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa37.casimages.com/img/2015/04/28/150428101358461441.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div><div class="fiblocrelation" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428101357262575.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div></div><div id="copy2"><a href="https://fortunasmess.tumblr.com/">Fortuna</a></div><div id="fiblabla"><span>These are...☙</span> descriptif rapide des liens!</div></div></div> [/hide] Ajouter une nouvelle ligne de liens [hide] - Code:
-
<div class="fiblocrelation" style="background: url(https://nsa38.casimages.com/img/2015/04/28/150428101357262575.png)"><div class="firelation"><span>Nom ☙</span> Blablabla</div></div> RESSOURCES IMAGES (textures)Voici les textures appliquées sur les images de fond et de lien pour un résultat optimal : - image de fond (500 x 650 pixels) - image de fond de liens (310 x 110 pixels) Avec photofiltre, appliquez les en mode maximum ; si vous avez un autre logiciel, n'hésitez pas à bidouiller ou à faire un masque, le tout est que les zones noires soient remplacées par les images de vos personnages. |
|
Accueil 
