AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  



 :: Hors-jeu :: Cimetière :: Autres Voir le sujet précédent Voir le sujet suivant Aller en bas

Galerie de code RenA

avatar





Invité
Invité
Sam 17 Déc - 19:46
A l'occasion de Noël, j'ai offert un cadeau à ma petite fille la plus sage *tousse*, à savoir Akasuki ! Pour cet événement, j'ai décidé d'ouvrir ma petite galerie.
Son cadeau a donc été un code très basique que je me permet d'exposer ici, mais dont je ne partagerai pas le code, exceptionnellement.

Aperçu:
 

Bon y'a des chances que je fasse d'autre code et que je les expose ici en libre service. Je vous demanderais juste de ne pas retirer le copyright.

Si jamais vous avez des commandes, je les prends sans soucis, je m'en sors beaucoup mieux en codage qu'en graphisme (haha). Cependant, veillez à me joindre par MP ou à la suite de ce post un schéma basique de design avec une petite explication de ce que vous voulez.

J'essaierai d'y répondre le plus vite possible, mais faut comprendre que si c'est difficile, je prendrais un peu plus de temps. Après tout je suis pas payée moi ! Haha !
Revenir en haut Aller en bas
avatar





Invité
Invité
Dim 18 Déc - 11:42
Merry christmas everyone !

Voilà suite à l'annonce du bal de noël j'me suis dis, pourquoi pas faire un code sur le thème de noël ? Alors ok, il est pas top comme code, mais je me suis penché dessus quand même. Pis c'est totalement gratuit, donc voilà, servez-vous ! Le code peut être modifié, que ce soit au niveau des couleurs que de l'image. Seul le copyright ne doit pas être enlevé ou modifié. Et donc, je me lance dans les explications !

Voilà le bébé:
 

Code:
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Merienda+One" rel="stylesheet"><div style= "height: 510px; width: 500px; margin: auto; display: table; "><div style="height: 500px; width: 40px; float: left; background-image: url('http://www.wallpapersforu.com/wp-content/uploads/2016/11/Beautiful-Christmas-Background-2.jpg'); box-shadow: -2px 2px 4px black; border-radius: 5px 5px 5px 5px;"></div><div style=" width: 455px; height: 50px; margin-top: 20px; float:right; font-family: 'Merienda One', cursive;; text-align: center; font-size: 40px; text-shadow: 2px 2px 4px black; color: #A51D1F; ">Titre</div><div style= "width: 445px; height: 420px; float: right; padding: 5px; background-color: #A51D1F; border-left: solid 2px #000000; border-radius: 5px 5px 5px 5px; box-shadow: 2px 2px 4px black; color: black; font-family: 'Cormorant Garamond', serif; font-size: 18px; text-align: justify; text-shadow: 0px 0px 2px black; overflow:hidden;"><div style= "width: 102%; height: 100%; overflow-y:scroll; padding-right: 10%; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum mattis placerat. Pellentesque auctor leo sem, in blandit lectus commodo nec. Aenean viverra urna sed erat tempus ultricies. Morbi sit amet sapien eget odio congue fringilla ultrices in arcu. Integer sagittis enim felis, sit amet tempor tellus tincidunt in. Nunc luctus, orci id ultricies placerat, nibh est euismod tortor, sit amet mattis eros mauris in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo dui ac felis ornare venenatis. Duis lobortis felis in nisl ullamcorper, ut pulvinar est euismod. Morbi vel dolor luctus, suscipit nisl ac, scelerisque justo.

Nunc volutpat, nisl eget molestie iaculis, sem felis rutrum libero, vitae finibus dui neque eu nisi. Aliquam a purus turpis. Quisque aliquet sagittis sem aliquam rhoncus. In non lectus ultrices, varius nisi pharetra, semper dui. Vivamus nec purus ut augue fermentum mollis. Quisque tempor, urna id efficitur tincidunt, metus felis aliquam dui, non egestas nunc quam a massa. Duis ac fringilla orci. Aliquam sit amet orci lorem. Vestibulum placerat, urna at feugiat varius, orci ante malesuada erat, in gravida nulla leo vel ligula. Donec quam dui, rutrum et pharetra ut, facilisis vitae ligula. Nulla faucibus velit lacus, fermentum dignissim purus congue eu.

Fusce tempor iaculis ipsum id venenatis. Nulla id maximus erat. Aenean laoreet sit amet diam non venenatis. Mauris id nunc et magna interdum vehicula. Cras sit amet magna at erat viverra sollicitudin quis eu orci. Aliquam tristique nisi eros, ut pharetra elit pharetra sit amet. Curabitur dolor dui, auctor ac varius sed, porttitor et metus. Morbi porta turpis dictum neque varius auctor. Nam nec sollicitudin libero, eget luctus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque facilisis convallis purus ut ultricies. Nunc facilisis felis ut ullamcorper pharetra. Mauris nec leo mollis, euismod libero at, ullamcorper ante. Praesent fringilla placerat tortor nec accumsan.

Sed pretium tellus nec tortor pulvinar mollis. Maecenas viverra cursus velit. Nullam laoreet nunc sit amet tempus suscipit. Sed pulvinar, urna sit amet varius lobortis, risus justo volutpat eros, sed viverra lectus urna at justo. Nulla ornare, nunc eget dapibus viverra, risus lectus auctor augue, tempus pharetra enim nibh ac urna. Cras iaculis odio eget nibh tempus tristique. Pellentesque non nunc eu felis varius fermentum vitae quis libero. Vivamus justo est, mollis id eros eget, pellentesque aliquam massa. Etiam eget erat ante. Aliquam semper, risus sed laoreet aliquet, erat urna auctor elit, quis commodo leo diam sed leo. Etiam condimentum erat sed mauris sagittis, et fringilla urna molestie. Etiam pretium, justo a viverra pretium, quam justo lobortis velit, quis pulvinar est libero vitae purus. Nullam pellentesque nisl libero, ac maximus risus auctor pulvinar. Ut sagittis ornare quam vitae aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div></div></div>

Alors oui, en voyant le code vous pouvez paniquer. Moi aussi je me suis massé les tempes en me relisant xD. Bref, donc la couleur principale est rouuuge, no shit sherlock.

• Ombre : J'ai mis beaucoup d'ombre au niveau des textes et box qui peuvent être retirer. Il suffit d'enlever les passages où vous trouver "text-shadow: 2px 2px 4px black;" ou "box-shadow: 2px 2px 4px black;". Si vous ne l'aviez pas compris, le box-shadow c'est pour les boites, text-shadow pour les textes. Vous pouvez modifier la couleur de l'ombre en changeant le paramètre "black". Les couleurs hexadécimal (#123456) fonctionnent également logiquement.

• Le scroll : Comme vous pouvez le voir, vous pouvez scroll sans que la fameuse scrollbar apparaisse. J'ai utilisé une petite astuce trouvé grâce à Google. Cependant, elle reste plutôt instable c'est pour ça que je vous déconseille fortement de toucher à une div entière :
Code:
<div style= "width: 102%; height: 100%; overflow-y:scroll; padding-right: 10%; "></div>
Ainsi que le paramètre "overflow: hidden;" de la div au dessus. Vous pouvez, mais à vos risques et périls. Et je viendrais pas réparer, c'est trop pénible.

• Couleur : Pas besoin de beaucoup d'explications, tout le monde connaît je pense. Au cas où, pour la couleur des divs, il suffit de changer le paramètre background-color : #123456; pour le texte, c'est color: black;. Encore une fois, les couleurs hexadécimales fonctionnent aussi sur la couleur du texte.

• Image : Idem que la couleur, il suffit de changer la div au début où vous voyez le lien de l'image. Elle sera automatique redimensionné en 40*500.
Revenir en haut Aller en bas
avatar





Invité
Invité
Lun 19 Déc - 13:42
OH ! OH ! OH ! Merry Christmas !

Cette fois, c'est suite à l'idée de Miharu que j'ai fais ce code. Tout d'abord je tiens à remercier des gens que vous ne connaissez pas, Ichizu et Hiroto, de m'avoir bien aidé sur discord à des moments où j'ai galéré sur des bugs. Donc voilà le second post RP sur le thème de Noël que je met en livre service ! Comme d'habitude, ce code peut être modifier, mise à part le copyright qui ne doit ni être changé ni supprimé.

Voilà la boule !:
 

Code:
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Trirong" rel="stylesheet"><div style=" width: 500px; height: 600px; margin: auto;display: table;"><div style =" height: auto; width: 190px; margin: auto; margin-top: 80px; margin-left: 130px;transform: rotate(-90deg); font-family: 'Trirong', serif; font-size: 16px; text-align: justify; float: left; ">Titre </div><div style="height: 200px; width: 0px; margin: auto; border-left: solid 3px #98BCB7; box-shadow: 2px 2px 4px black;"></div><div style="height: auto; width: 190px; margin: auto; margin-top: -80px; margin-right: 130px;transform: rotate(90deg); font-family: 'Trirong', serif; font-size: 16px; text-align: justify; float: right;">Ft. Lady DK</div><div style=" width: 300px; height: 300px; margin: auto; background-image: url('http://www.anawalls.com/images/textures/snowflake-background-light-bright-surface.jpg'); border-radius: 500px; font-family: 'Josefin Slab', serif; color: black; padding: 70px; box-shadow: 2px 2px 4px black; overflow: hidden; text-align: justify;"><div style=" width: 108%; height: 100%; overflow-y: scroll; padding-right: 25%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet ipsum arcu, et elementum dolor dapibus at. Vestibulum eget nulla mattis, aliquam neque id, laoreet velit. Nunc nec dignissim eros. Mauris eu venenatis lacus, ut pharetra est. Phasellus congue, enim quis ornare pharetra, neque metus condimentum arcu, vehicula ullamcorper libero diam eu augue. Donec sagittis luctus vehicula. Duis congue consectetur porta. Maecenas convallis dolor dictum leo dapibus, eu dapibus sem venenatis. Suspendisse sed tortor quam.

Fusce porta velit nec velit fringilla, vulputate volutpat purus accumsan. Aenean in nisl ac ex ullamcorper dignissim. Curabitur eget rutrum ante. Nullam vitae luctus lectus, nec facilisis urna. Cras ornare placerat elit nec commodo. Donec vitae lorem in nibh blandit congue at laoreet leo. Mauris eget felis vitae sem dapibus scelerisque eu sit amet turpis. In nec mi lobortis, auctor elit et, tristique sem. Pellentesque consectetur ullamcorper est. Vivamus tristique tristique felis, non dapibus metus ornare eu. Morbi tempus, nunc ut sagittis aliquet, purus felis dignissim nisi, nec fringilla sem tellus ac nisl. Quisque elementum, arcu sed lacinia condimentum, ipsum sem ultrices quam, quis pretium odio ipsum sit amet massa.

Phasellus feugiat non ligula nec convallis. Duis mi nulla, sollicitudin ac pellentesque eget, vehicula at mi. Suspendisse turpis tortor, cursus id fringilla quis, viverra nec massa. Nulla rutrum neque felis, vel interdum magna euismod eu. Cras eget mi non leo luctus vulputate euismod ut sapien. Fusce condimentum congue metus et efficitur. Suspendisse dictum nibh a neque ornare bibendum.</div> </div><div style="text-align: right; font-size: 8px; color: black;">© RenA</div></div>

Et on est partit pour les explications !

Pour ce qui est des couleurs, de l'ombre ou du changements d'images, c'est la même chose que le code précédent, donc referez vous à ces notes-ci.

Les deux remarques porteront sur le titre et sur le featuring.

• Titre : Je vous déconseille de mettre le titre trop long, mais c'est faisable. Ca rendra mieux avec un titre court.

• Featuring : Pareil que pour le titre, si vous faite des RPs à plusieurs préférez les initiales ou autres astuces pour éviter de faire trop long.
Revenir en haut Aller en bas
avatar





Invité
Invité
Mar 20 Déc - 18:56
OHAYOOOO !

Nous revoilà pour un quatrième code déjà ! *oooooh* Bon j'ai opté pour un style neutre qui va avec tout type de RP. Avec une petite image de mon frère adoré en bonus. Comme d'habitude vous pouvez tout modifier à l'acception du copyright qui ne doit être ni modifié ni supprimé. Pour ce code pas besoin d'explication puisqu'il est relativement simple.

Voilà la bête:
 

Code:
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Trirong" rel="stylesheet">
<div style =" width: 500px; height: auto; margin:auto; background-color: white; box-shadow: 4px 4px 8px black; border: solid 1px black; padding: 5px;"><div style=" width: 100px; height: 100px; border-radius: 100px; background-image: url('https://yt3.ggpht.com/-2u-2odaR1eA/AAAAAAAAAAI/AAAAAAAAAAA/RjATq0Sg7JA/s100-c-k-no-mo-rj-c0xffffff/photo.jpg'); border: solid 1px black; margin-left: -50px;"></div><div style="margin: auto; width: 400px; height: auto; font-size: 28px; color: black; font-family: 'Trirong', serif; text-align: center; margin-top: -85px;">Titre </div><div style="background-image: url('http://image.noelshack.com/fichiers/2016/51/1482254562-arabesque.jpg'); margin: auto; height: 70px; width: 298px;"></div><div style="width: 450px; height; auto; margin: auto; font-family: 'Josefin Slab', serif; color: black; text-align: justify; font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales nibh vel tellus consequat convallis. Donec blandit cursus molestie. Sed convallis semper ipsum, quis mattis felis euismod sed. Vestibulum pellentesque turpis eget commodo mollis. Nulla dapibus, ligula ac mattis convallis, lacus tellus tempor magna, sit amet porttitor massa tellus a elit. Morbi convallis nulla quis porttitor suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam porttitor sem purus, a vehicula enim elementum a. Curabitur nec accumsan risus.

Quisque dictum augue vel dui ornare rutrum. Duis lectus dolor, consequat in rhoncus et, posuere ut libero. Vestibulum tempor ipsum scelerisque vehicula euismod. Curabitur a nisi ac sapien molestie accumsan. In commodo consectetur ipsum sit amet euismod. Suspendisse id blandit purus, a vulputate libero. Nullam molestie orci nec velit commodo hendrerit facilisis vestibulum nulla. Phasellus ac velit eu lectus gravida pulvinar. Nunc massa nisi, blandit tempus ipsum non, congue ullamcorper neque. Nulla risus enim, hendrerit non metus in, efficitur hendrerit purus. Sed odio eros, gravida id nibh vitae, vestibulum iaculis lectus. Phasellus neque lacus, congue quis dolor a, varius elementum arcu. Nulla facilisi. Maecenas pulvinar ante quis mi tempor euismod.

Donec tincidunt nunc bibendum posuere facilisis. Sed eu dolor id nibh mattis semper. Integer vestibulum laoreet tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam non ligula sed sapien feugiat bibendum sit amet a odio. Nunc fermentum aliquet nisl, vel sollicitudin ex cursus eu. Integer finibus dui in nunc mattis, et commodo diam egestas. Nulla facilisi. Proin dapibus bibendum orci, ac semper risus porta a. Aliquam hendrerit, nibh ut eleifend tincidunt, nisi tortor cursus leo, at bibendum lorem libero porta odio.</div><div style= "text-align: right; font-size: 8px; color:black;">© RenA</div></div>
Revenir en haut Aller en bas
avatar





Invité
Invité
Ven 30 Déc - 21:37
HELLOOOO EVERYOOOONE ♪

Donc voilà à la base je devais pas faire de code pour l'event, mais finalement j'en ai bricolé un rapide. Encore plus simple que les précédents, MAAAAIS BON. Je le met de côté, pour ceux qui le veulent. Comme d'habitude, vous pouvez tout modifier sauf le copyright qui ne doit être ni modifié ni supprimé.

Voilà le monstre:
 

Code:
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Dosis" rel="stylesheet">
<div style="width: 500px; height: auto; margin: auto; text-align: center; font-family: 'Arima Madurai', cursive; font-size: 24px;"> Le valet, premier du nom. </div>

<div style="width: 400px; height: auto; margin: auto; text-align: justify; font-family: 'Dosis', sans-serif; font-size: 14px; border-left: solid 1px black; padding: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu varius tellus. Maecenas tempor risus eu ligula convallis, ut blandit tortor malesuada. Proin posuere tempor mauris venenatis congue. Donec nibh quam, volutpat eu mauris a, blandit porta ligula. Proin id accumsan est. Nullam eget risus et nisl ultrices elementum. Vivamus quis leo felis. Etiam rutrum diam leo, id fringilla turpis pellentesque sed. Phasellus fringilla diam id sodales consectetur.

Maecenas ac luctus neque. Nulla et porttitor turpis. Nullam egestas aliquet vestibulum. Fusce at massa id lorem venenatis pellentesque. Fusce sollicitudin imperdiet tristique. Donec faucibus turpis nec elit feugiat faucibus. Vivamus sagittis, metus at dapibus ullamcorper, erat enim semper sem, et condimentum diam dolor quis lectus.

Donec fermentum pharetra consectetur. Integer in tempus magna. Fusce orci tellus, molestie ut tincidunt ut, porttitor vel justo. Quisque laoreet rhoncus justo in iaculis. Aliquam ultricies turpis id tempor tincidunt. Ut purus lorem, semper a lacinia sit amet, finibus quis odio. Integer tristique sit amet velit vitae cursus. Sed tincidunt elementum rhoncus. Quisque elementum justo tellus, ut consequat dui ornare at. Quisque nec diam ipsum. Fusce scelerisque maximus lorem, et aliquet leo vestibulum a. Fusce lobortis erat eget tortor lacinia, at euismod libero varius. Maecenas in leo et libero dictum elementum sodales eu mi.

Donec congue convallis lacus. Cras ultrices orci arcu, sit amet tincidunt est ornare sit amet. Vestibulum id mi aliquam eros gravida rhoncus. Etiam tempus lectus eu elit sollicitudin pulvinar. Etiam ac mauris mattis, consequat arcu sit amet, tempor risus. Proin suscipit interdum ipsum lobortis sollicitudin. Ut bibendum eleifend lacus, et viverra nunc imperdiet tristique. Integer in nunc dolor. Pellentesque tristique in velit non ultrices.

Aenean sapien sem, tristique rhoncus mi et, sagittis suscipit nulla. Morbi quis aliquam sem. Nunc a venenatis dolor. Nullam vel neque mauris. Suspendisse vel est luctus, euismod tellus vel, semper ante. Fusce sit amet lorem hendrerit, maximus est sollicitudin, aliquam odio. Donec eu pulvinar magna. Praesent gravida consectetur ipsum, vitae hendrerit tellus auctor vitae. Maecenas interdum erat vitae dui congue placerat. Integer eros tortor, scelerisque id lacinia ut, aliquet quis quam. Nulla molestie nulla ornare ipsum bibendum sagittis. Nulla bibendum, nulla ut tincidunt accumsan, dui leo imperdiet magna, quis facilisis tellus velit volutpat mi. Pellentesque eu tristique justo, at posuere augue.
</div><div style="width: 400px; height: auto; margin: auto;"><div style="text-align: right; color: black; font-size: 8px;">© RenA</div></div>
Revenir en haut Aller en bas
Voir le sujet précédent Voir le sujet suivant Revenir en haut Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Nara-shi :: Hors-jeu :: Cimetière :: Autres-
Sauter vers: