Partagez | 
 

 Libre service code | RenA•Chisaki

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Féminin Messages : 14
Points : 25
Date d'inscription : 08/02/2017

Feuille de personnage
Pouvoir: Floraison
Items:
Statut: Célibataire
avatar
Chisaki Ito
MessageSujet: Libre service code | RenA•Chisaki   Mar 28 Fév - 12:33

• Bonjour/Bonsoir tout le monde ! •

Déjà merci d'être venu voir ma galerie, ça me fait très plaisir ! Nous commençons tout de suite l'explication du code, sans trop vous faire attendre. Vous devriez bien lire les explications avant de vous lancer pour les débutants.
Ce code est de niveau intermédiaire.
Vous pouvez le modifier intégralement, à part le copyright qui ne doit être ni changé ni supprimé.

Déjà comme vous pouvez le voir, le code est scindé en deux parties : une dans la balise style et l'autre en dehors de la partie style, tout simplement. Dans la partie style se trouve tout ce qui concerne l'apparence, ce que vous pouvez modifier en somme. Le reste, évitez, vous avez pas besoin de toute façon (sauf pour les images des avatars).
Je vous laisserais explorer un peu le code, c'est comme ça qu'on apprend le mieux de toute façons.

Pour ceux qui veulent l'utiliser dans leurs RP :
• Le titre du RP va là où y'a écrit "Titre du RP" (no shit Sherlock)
• Les images des avatars vont à la place de : "https://i.skyrock.net/6391/85626391/pics/3134909366_0_22_BgqymVNj.jpg"
• Vous pouvez inscrire le nom de votre personnage et de votre partenaire RP à la place de Nom Prénom (ne pas toucher à la balise br)
• Pour les textes, il n'y a pas d'overflow c'est à dire qu'il n'y a pas de barre de scroll. C'est intentionnel. Vous pouvez loger par petit cadre un paragraphe de 100 mots environ. Quand vous n'avez plus de places, vous avez juste à rajouter les div texteRP1 et texteRP2 en les alternants.
• Si vous avez des questions ou des idées de design, n'hésitez pas à me MP.






Titre du RP

ft.
Nom Prenom
ft.
Nom Prenom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  




Code:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans+Condensed:300" rel="stylesheet">
<style>#conteneurRenA1{ width: 600px; height: auto; margin: auto; border: 1px solid black; border-radius: 10px; background-image: url('https://s-media-cache-ak0.pinimg.com/564x/27/11/0b/27110b49bec4a256df34393daccb7ce4.jpg'); box-shadow: 4px 4px 6px black;} #conteneurRenA1 .titreRP{ width: 400px; height: auto; margin: auto; text-align: center; font-size: 28px; color: black; font-family: 'Fjalla One', sans-serif; text-shadow: 1px 1px 4px black; transition: all 200ms ease-in;} #conteneurRenA1 .titreRP:hover{transition: all 200ms ease-in; letter-spacing: 2px;} #conteneurRenA1 .cavatar{height: 100px; width: 210px; margin: auto; display: table;} #conteneurRenA1 .avatar1{ width: 100px; height: 100px; border-radius: 100px; border: 1px solid black; float: left;} #conteneurRenA1 .avatar1 img{border-radius: 100px;  -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; position: relative;} #conteneurRenA1 .avatar1:hover img{ -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-filter: grayscale(70%); filter: grayscale(70%);} #conteneurRenA1 .avatar1:hover .nom{ opacity: 1;} #conteneurRenA1 .avatar2{width: 100px; height: 100px; border-radius: 100px; border: 1px solid black;float: right;} #conteneurRenA1 .avatar2 img{border-radius: 100px; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; position: relative;} #conteneurRenA1 .avatar2:hover img{ -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-filter: grayscale(70%); filter: grayscale(70%);} #conteneurRenA1 .avatar2:hover .nom{ opacity: 1;} #conteneurRenA1 .nom{position: relative; left: 0; text-align: center; width: 100%; top:-70px; opacity: 0; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;} #conteneurRenA1 .texteRP1{height: 170px; width: 300px; margin-left: 30px; background-color: black; border-radius: 10px; border: 2px solid white; box-shadow: 2px 2px 4px black; text-align: justify; color: #acacac; padding: 6px; font-family: 'Open Sans Condensed', sans-serif; opacity: 0.9; transition: all 200ms ease-in; transform: scale(1);} #conteneurRenA1 .texteRP1:hover{transition: all 200ms ease-in; transform: scale(1.2);} #conteneurRenA1 .texteRP2{ height: 170px; width: 300px; margin-left: 255px; background-color: black; border-radius: 10px; border: 2px solid white; box-shadow: 2px 2px 4px black; text-align: justify; color: #acacac; padding: 6px; font-family: 'Open Sans Condensed', sans-serif; opacity: 0.9; transition: all 200ms ease-in; transform: scale(1);} #conteneurRenA1 .texteRP2:hover{transition: all 200ms ease-in; transform: scale(1.2);} #conteneurRenA1 .copyright{ font-size: 10px; color: black; width: 600px; text-align: right; margin-right: 5px;}</style>


<div id="conteneurRenA1">
<div class="titreRP">Titre du RP</div>
<div class="cavatar"><div class="avatar1"><img src="https://i.skyrock.net/6391/85626391/pics/3134909366_0_22_BgqymVNj.jpg"><div class="nom">ft. </br>Nom Prenom</div></div><div class="avatar2"><img src="https://i.skyrock.net/6391/85626391/pics/3134909366_0_22_BgqymVNj.jpg"><div class="nom">ft. </br>Nom Prenom</div></div></div>
<div class="texteRP1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  </div>
<div class="texteRP2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  </div>
<div class="texteRP1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  </div>
<div class="copyright">© RenA</div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Féminin Messages : 14
Points : 25
Date d'inscription : 08/02/2017

Feuille de personnage
Pouvoir: Floraison
Items:
Statut: Célibataire
avatar
Chisaki Ito
MessageSujet: Re: Libre service code | RenA•Chisaki   Jeu 2 Mar - 20:56

• こんにちは !! •

Nous voilà encore aujourd'hui pour un nouveau code ! Déjà je tiens à remercier un ami que vous ne connaissez pas mais qui m'a pas mal aidé à debug... Donc voilà, on est partit pour le code ! n_n
Comme d'habitude, ne pas modifier ni supprimer le copyright, sinon vous aurez affaire à moi ♥

Il est un peu plus simple que le précédent, le niveau est donc débutant. Comme le précédent, vous n'avez pas à toucher ni le nom des class (les trucs du style .conteneur etc), mais vous pouvez modifier le code à vos risques et périls.
Aussi y'a un problème avec la zone d'écriture de FA qui interprète mal les espaces et fout en l'air le code... Tout marche bien tant que vous n'éditez pas votre message.

Voilà donc le rendu du code :






• "Magical Academy" •

ft.
Nom Prenom

ft.
Nom Prenom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur. Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.




Code:
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Lobster" rel="stylesheet">

<style> .conteneurRenA2{width: 600px;height: auto;margin: auto;background: url('https://blog.recipc.com/recipc-polygon-white-background/assets/media/sites/3/2015/06/recipc-polygon-white-background-1024x576.jpg');box-shadow: 4px 4px 8px;border: 2px solid black;} .conteneurRenA2 .titreRP{width: 400px;height: auto;margin: auto;font-family: 'Lobster', cursive;font-size: 24px;color: black;text-shadow: 1px 1px 4px black;text-align: center;transition: all 200ms ease-in;transform: scale(1);} .conteneurRenA2 .titreRP:hover {transition: all 200ms ease-in;letter-spacing: 2px;transform: scale(1.2);} .conteneurRenA2 .texteRP{width: 450px;height: auto;margin: auto;font-family: 'Crimson Text', serif;text-align: justify;font-size: 14px;color: black;} .conteneurRenA2 .avatar1 {width: 100px;height: 100px;border-radius: 100px;border: 2px solid black;float: left;margin-left: -50px;} .conteneurRenA2 .avatar1 img{border-radius: 100px;transition: all .8s ease-in-out;}  .conteneurRenA2 .avatar1:hover img{transform: rotate(360deg);filter: grayscale(70%);} .conteneurRenA2 .avatar1:hover .nom{ opacity: 1;} .conteneurRenA2 .avatar2 {width: 100px;height: 100px;border-radius: 100px;border: 2px solid black;float: left;margin-left: -100px;margin-top: 105px;} .conteneurRenA2 .avatar2 img{border-radius: 100px;transition: all .8s ease-in-out;}  .conteneurRenA2 .avatar2:hover img{transform: rotate(360deg);filter: grayscale(70%);} .conteneurRenA2 .avatar2:hover .nom{ opacity: 1;} .conteneurRenA2 .nom{position: relative;left: 0;text-align: center;width: 100%;top:-70px;opacity: 0;-webkit-transition: all .8s ease-in-out;transition: all .8s ease-in-out;} .conteneurRenA2 .copyright{width: 550px;height: auto;font-size: 8px;color: black;text-align: right;}</style>

<div class="conteneurRenA2">
<div class="titreRP">• "Magical Academy" •</div>
<div class="avatar1"><img src= "http://img4.hostingpics.net/pics/379771IconeChi1.jpg"/><div class="nom">ft. </br>Nom Prenom</div></div>
<div class="avatar2"><img src= "http://img4.hostingpics.net/pics/379771IconeChi1.jpg"/><div class="nom">ft. </br>Nom Prenom</div></div>
<div class="texteRP">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et placerat sapien. Praesent eget dapibus magna. Duis vitae orci vel mi consectetur tristique ut in tellus. Ut placerat dictum felis et ornare. Mauris sed ipsum gravida, consectetur ligula vel, consequat diam. Mauris convallis pulvinar ligula et sollicitudin. Vivamus porttitor risus at purus finibus, id iaculis lectus dapibus. Vivamus dapibus porttitor elit ac efficitur.  Donec feugiat posuere elit eget euismod. Nullam at sapien imperdiet, cursus erat vitae, aliquam purus. Sed blandit enim id rutrum rhoncus. Morbi nec ante imperdiet, consectetur metus ut, cursus odio. Proin est felis, bibendum vitae tincidunt a, efficitur nec erat. Pellentesque a mauris sem.  </div>
<div class="copyright">© RenA</div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

Libre service code | RenA•Chisaki

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Codes en libre service ✖ aka J'ai que ça à faire [FERMÉ]
» Syracoti Sign' en libre service.
» CODE LIBRE SERVICE DE FICHE DE LIENS
» (suggestion) Partie libre-service avatars et signatures CSS pour les membres
» Libre Service de Fiche

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Magical academy  :: Zone Hors-RPG :: Flood ! :: Galerie des artistes-