AccueilFAQRechercherMembresGroupesS'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.


    Mission#5 - Application cursus deuxième du nom [apprenti]

    Partagez
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mer 2 Juil 2014 - 22:49

    Rappel du premier message :

    Mission#5 - Application cursus deuxième du nom [apprenti]


    Bonjour à tous !
    Pour la cinquième mission de la guilde des architectes, je vous propose de réaliser une en-tête de rp (et non pas un contenu de rp).

    Cependant, pour corser un peu le tout, je vais vous imposer quelques contraintes, la première sera de n'avoir strictement aucune image. La seconde sera de n'utiliser qu'une seule couleur, mais il est néanmoins possible de la décliner en toutes les nuances qui existent. Ce n'est pas très clair dit comme ça mais si vous prenez du bleu, vous n'être pas cantonné au bleu, vous pouvez utiliser également le bleu foncé, le clair, le turquoise etc. La troisième et dernière contrainte sera d'intégrer au moins deux polices différentes. Pour trouver votre bonheur je vous conseille de jeter un coup d'oeil sur ce site pour pouvoir les intégrer correctement.


    Pour réaliser cette mission, vous pouvez très largement consulter (d'ailleurs je vous le conseille) ce TP ainsi que de cette étape.


    Vous posterez vos résultats à la suite ainsi que le code correspondant entre les balises
    Code:
    [code][/code]
    .

    Sur ce ne soyez pas timide, aucune création n'est mal faite ou fausse, tout est juste du moment que vous proposez quelque chose !

    PS : Ne mettez pas votre création sous "hide", sinon vous ne pourrez pas avoir l'avis des autres membres. C'est dommage de passez à côté d'avis et/ou de conseil (: (Le code en revanche peut/doit être mis sous "hide").

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !


    Dernière édition par A-Lice le Dim 1 Fév 2015 - 11:07, édité 4 fois

    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Sam 12 Juil 2014 - 17:24

    Au départ, je ne comptais pas participer et puis, je voulais appliquer le z-index avec lequel j'ai du mal, alors je me suis dis pourquoi pas ici ?

    Donc voici ma maigre contribution.


    En-tête de RP !
    Citation, parce que je le vaux bien !





    Je vous promet que ce n'est pas du marron mais du vert u_u Olive certes, mais c'est une teinte verte !
    Et je vous le conçois.... c'est beaucoup de code pour pas grand chose ><

    avatar
    Asmareth
    FémininAge : 30Messages : 123

    le Ven 25 Juil 2014 - 18:50

    Bon, mon code est absolument dégueulasse et je m'en excuse d'avance, mais j'ai pas arrêté de changer d'avis sur le positionnement des éléments. Il va falloir que je le reprenne, mais je vous soumets déjà le résultat :


    T
    itre du sujet


    Ft.
    Personnage Machin et Personnage Truc



    Code:
    <link href='http://fonts.googleapis.com/css?family=Alex+Brush|Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
    <div style="margin-left: 120px;"><div style="height: 100px; width: 100px; background-color: #800080; box-shadow: 1px 1px 12px #555; display:inline-block; text-align: center; vertical-align: 350%;"><span style="vertical-align: -450%; font-family: 'Alex Brush', cursive; font-size: 100px; color: #c47bc4; text-shadow: 1px 1px 12px #555;">T</span></div><span style="font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 35px; color:#c47bc4; padding: 0 0 0 10px;">itre du sujet</span></div>
    <div style="position: relative; left: 70px; top: -45px;"><div style="height: 70px; width: 70px; background-color: #800080; box-shadow: 1px 1px 12px #555; display:inline-block; text-align: center; vertical-align: 350%; transform:rotate(45deg); -webkit-transform:rotate(45deg);"></div>
    <div style="position : relative; top: -40px; left: 10px; display:inline-block; font-family: 'Alex Brush', cursive; font-size: 50px; color: #c47bc4; text-shadow: 1px 1px 12px #555;">Ft.</div><span style="font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; font-style : italic; color:#c47bc4; padding: 0 0 0 10px; position: relative; top: -40px; left: 20px;">Personnage Machin et Personnage Truc</span></div>
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Lun 28 Juil 2014 - 19:38

    Hey !
    Merci beaucoup de ta participation tout d'abord. Ensuite, que tu trouves ton code dégueulasse ou non il respecte parfaitement les consignes qui ont été données. Donc t'es dans le thème et c'est le principal !
    Et je n'ai rien d'autre à ajouter si ce n'est que le rendu est joli comme tout. C'est bien le genre d'en-tête que j'utiliserais Razz

    avatar
    Ozymandias
    MasculinAge : 19Messages : 41

    le Lun 11 Aoû 2014 - 11:33

    Je post un petit essai, c'est mon première tête de Rp .... Donc je ne sais pas trop ce que ça vas donner ...

    Kimimaro the damned



    C'est mon premier titre donc tous commentaire sera le bien venu. Il est pas génial,pas beau, pas complexe mais il m'a permit d'utiliser les bornes
    Code:
    <sub> et </sub>
    pour les "sous titres " à la place d'utiliser la méthode évoquée par Narja dans le tutoriel.


    Et voici le code
    Code:
     <span style="font-family: impact; color: #A669D5; font-size: 30px; text-shadow: 3px 2px 0.5px ; padding-bottom: -6px; display: block; text-align: center; "><sub><span style="color: #9001FE; font-family:vivaldi; font-size: 80px; font-style: italic">K</span></sub><span style="color: #A669D5; font-family:vivaldi; font-size: 30px;border-bottom: 1px dotted #9001FE; font-style: inherit">imimaro</span><sub><span style="color: #A669D5; font-family:vivaldi; font-size: 20px;font-style: inherit"> the damned</sub></span>


    Dernière édition par Ozymandias le Mar 19 Aoû 2014 - 20:42, édité 1 fois
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 15 Aoû 2014 - 1:09

    Et bien, pour avoir un avis sur ton en-tête il faudrait que tu fournisses le code.

    avatar
    Lisou
    FémininAge : 17Messages : 299

    le Dim 17 Aoû 2014 - 13:05

    Titre du Rp Designed by twist


    Code:
    <center><span style= "font-family: Impact; color: #58A9A4; font-size: 35px; letter-spacing: 5px; word-spacing: 10px; text-shadow: 1px 1px 0px #000000; border-bottom: 3px dotted #64B5AA; padding-bottom: -18px; display: block;" ><span style= "color: #64B5AA; font-family: Wolf in the City Light; font-style: italic; font-size: 75px;"> T</span>itre du Rp </span><span style= "font-family: wendy; font-size: 12px; color: #64B5AA; text-align: right;"> Designed by twist</span></center>

    Titreun petit sous-titre?designed by twist

    Code:
     <center><img src="http://image.noelshack.com/fichiers/2014/32/1407329618-bwa1.png" />  <img src="http://image.noelshack.com/fichiers/2014/32/1407329622-bwa2.png" /></center><span style="font-family: optimusprinceps; font-size: 36px; font-weight: bolder; text-shadow: 1px 1px 0px #2A5126; color: #2A5126; display: block; text-align: center; border-bottom: 1px dotted #42803B; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #42803B; text-shadow: 0px 0px 1px #42803B; font-family: optimusprinceps; font-size: 50px">T</span>itre</span><span style="display: block; text-align: center; font-size: 16px; color: #42803B; font-family: arial; font-style: italic; ">un petit sous-titre?</span><span style="display: block; text-align: center; font-size: 11px; color: #42803B; font-family: wendy; font-style: normal; margin-left: 45px; padding: -15px">designed by twist</span>
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Dim 17 Aoû 2014 - 13:16

    Bonjour Lisou. Tout d'abord merci de ta participation, néanmoins tu ne respectes pas les consignes données plus haut Wink

    la première sera de n'avoir strictement aucune image. La seconde sera de n'utiliser qu'une seule couleur, mais il est néanmoins possible de la décliner en toutes les nuances qui existent. Ce n'est pas très clair dit comme ça mais si vous prenez du bleu, vous n'être pas cantonné au bleu, vous pouvez utiliser également le bleu foncé, le clair, le turquoise etc. La troisième et dernière contrainte sera d'intégrer au moins deux polices différentes.


    Pour ton premier essai tu utilises 2 couleurs le bleu et le noir (oui le text-shadow est en noir Wink ). Et pour ton second essai tu utilises des images. Ensuite, les polices sont les mêmes. Certes dans ton code tu en mets plusieurs néanmoins on ne les voit pas vu qu'elle ne sont pas installées sur le forum. C'est pour ça que je conseillais d'utiliser le site de google fonts !

    N'hésites pas à refaire un essai pour corriger tout ça (:

    avatar
    Ozymandias
    MasculinAge : 19Messages : 41

    le Mar 19 Aoû 2014 - 20:43

    Je viens juste de modifier mon message en mettant le code A-lice.
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mar 19 Aoû 2014 - 21:59

    Merci de ta participation d'abord (:
    Ensuite avec le code je vois que tu as respecté les 3 contraintes néanmoins, tes deux polices ne sont pas différentiables :/ Je fais donc la même remarque que pour Lisou. Si tu utilises des polices qui sont enregistrées dans ton pc mais pas sur le forum, même les plus banales personne ne les verra. Alors que si tu utilises google fonts tout le monde pourra les distinguer (:

    En tout cas même si ce n'est pas adapté pour ça, l'astuce du sub est bien trouvée mais c'est très personnel ça Razz

    avatar
    Lisou
    FémininAge : 17Messages : 299

    le Mer 20 Aoû 2014 - 16:02

    A-Lice, j'arrive pas a utiliser Google Font c'est pour ça que je l'ai pas utilisé D:
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mer 20 Aoû 2014 - 16:21

    Oh. Bah ce n'est pas très grave en soit x)
    Merci d'avoir participé (:

    avatar
    Asaëlle
    FémininAge : 25Messages : 124

    le Mer 27 Aoû 2014 - 11:32

    Voilà pour moi, bon pas vraiment contente de ce que j'ai fait, va falloir que je bosse mieux les tuto ! Mais je vais m'améliorer *auto-persuasion ON* :wall:



    Titre du RP
    ft. partenaire
    Et une citation sympa !


    Code:
    <link href='http://fonts.googleapis.com/css?family=Sofia|Yanone+Kaffeesatz|Rancho' rel='stylesheet' type='text/css'>
    <center><span style="color: #8715C0; font-family: Sofia; font-size: 35px; font-weight: bold;  text-shadow: 1px 1px 0px #56445E"><span style="color: #66337F; font-family: Rancho; text-shadow: 1px 1px 0px #56445E; font-size: 60px;">T</span><i>itre du RP</i></span><br /><span style="color: #B763E2; font-family: Yanone Kaffeesatz; font-size: 12px; letter-spacing: 2px;">ft. partenaire</span><br><span style="color: #A927E9; font-family: Sofia; font-size: 15px;">Et une citation sympa !</span></br></center>
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mer 27 Aoû 2014 - 16:56

    Tu peux dire ce que tu veux tu respectes les consignes qui ont été données ! Et ta participation est plus que correcte (: Après il y a toujours des choses que tu peux améliorer dans ton code, mais ton rendu est impec' ! Et puis tu t'es déjà améliorée vu que tu as posté Wink

    Dans tous les cas, merci de ta participation \o/

    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Sam 6 Sep 2014 - 15:18

    J'ai tester un truc!





    Une journée à Bikino-Bottom


    "La mer, qu'on voit dancer, le long des golfs clairs !!"


    Code:

    <link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <center><div style="height:150px; width: 650px; background-color: #ffc600;-moz-box-shadow: 0px 0px 3px #e68e09;-webkit-box-shadow: 0px 0px 3px #e68e09;box-shadow: 0px 0px 3px #e68e09;display:inline-block; text-align: center; ">
    <span style="font-family: Lobster; font-size: 50px; letter-spacing: 2px; text-shadow:3px 3px 0px #ff9000;color: #ffc600;"><center>
        <span style="font-family: Lobster; font-size: 85px; letter-spacing: 2px; text-shadow:5px 5px 0px #ff7e00;color: #ffc600;">U</span>ne journée à Bikino-Bottom</center></span>
     
     <span style="font-family: Playfair Display; font-size: 12px; letter-spacing: 2px; text-shadow:1px 1px 0px #ff7e00;color: #ff7e00;"><center>"La mer, qu'on voit dancer, le long des golfs clairs !!"</center></span></div></center>

    C'est vraiment un test x)


    Dernière édition par Chione le Dim 7 Sep 2014 - 15:27, édité 1 fois




    FEZ!FEZ!
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Sam 6 Sep 2014 - 15:23

    Merci de ta participation Kiki néanmoins tu ne respectes pas une des consignes qui dit que tu n'as le droit d'utiliser qu'une couleur Razz Là tu as du noir et du orange.

    Je te laisse méditer sur la source de ton problème Wink

    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Sam 6 Sep 2014 - 15:46

    C'est un bug de Never Utopia, sur mon test c'était jaune et jaune!




    FEZ!FEZ!
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Sam 6 Sep 2014 - 15:51

    Non ce n'est pas un bug de N-U puisque sur mon forum j'ai le même rendu qu'ici. Et je sais d'où vient le problème, je te laisse juste réfléchir pour le trouver toi-même Wink

    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Sam 6 Sep 2014 - 16:04

    Ben je vois vraiment pas où peut se cacher le problème...




    FEZ!FEZ!
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Sam 6 Sep 2014 - 21:40

    Mmhh... Allez, un petit indice :

    Si je mets ça :
    Code:
    <span style="padding: 10px; background: darkred; color: white;">Test!</span>

    Cela me donne cela : Test!


    Mais si, par erreur je mets ça :
    Code:
    <span style="padding: 10px; background: darkred;
    color: white;">Test!</span>

    Cela me donne cela : Test!


    En regardant cela, est-ce que cela t'aide un peu plus à trouver le problème?
    avatar
    benficagirl
    FémininAge : 31Messages : 335

    le Dim 7 Sep 2014 - 5:18

    Bonsoir :/

    Bon c'est mon premier essaie :/ j'espère que j'ai tout fait comme vous le voulez :)



    Help me!


    Or die trying.


    Code:
    <link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
    <center><span style="font-family: 'Pinyon Script', cursive; font-size:60px; font-weight: bold; letter-spacing: -4px; color : #990000; text-decoration: none;">
            Help me!</span>

    <span style="Arial, cursive; font-size:30px; color: #cc0000; text-decoration: underline; ">Or die trying. </span></center>
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Dim 7 Sep 2014 - 13:36

    Hey (: Merci de ta participation !

    Oui, toutes les consignes sont respectées ne t'en fais pas Wink

    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Dim 7 Sep 2014 - 15:27

    J'ai édité mon message, merci Onyx :3




    FEZ!FEZ!
    avatar
    Makuro
    FémininAge : 25Messages : 75

    le Mar 23 Sep 2014 - 17:43

    Si autant je mets toujours ou presque un cadre à mes rp, je dois avouer que je ne m'occupais pas du titre. Cette mission m'a donné la motivation de tenter un pitit quelque chose, et de bidouiller pas mal de trucs. Mouais, c'beaucoup du bidouillage toutes ces marges, j'avoue pas avoir bien réfléchit à ce que je devais mettre, je faisais au hasard puis je testais ^^"
    En tout cas, si on veut mettre de longs titres avec ce code là, mieux vaudra réduire la police >.<



    Feat
    Titre du Rp
    Courte Citation


    Code:
    <center><link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two|Allan&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <div style="width:500px;height:200px;overflow:hidden;"><div style="font-family:Allan;font-size:30px;color:#9DB3B7;float:left;margin-top:20px;text-align:right;width:250px;letter-spacing:-2px;border-top:1px #AAC3C8 solid;padding-right:50px;">Feat</div><div style="width:540px;height:75px;border-top:#AAC3C8 5px solid;border-bottom:#AAC3C8 5px solid;font-family: 'Shadows Into Light Two', cursive;font-size:50px;color:#9DB3B7;transform:rotate(-20deg);margin-top:40px;text-align:center;margin-left:-25px;line-height:75px;font-variant:small-caps;">Titre du Rp</div><div style="font-family:Allan;font-size:30px;color:#9DB3B7;float:right;margin-top:30px;width:350px;text-align:left;letter-spacing:-2px;border-bottom:1px #AAC3C8 solid;padding-left:40px;">Courte Citation</div></div></center>
    avatar
    Lihuén
    FémininAge : 28Messages : 544

    le Lun 29 Sep 2014 - 23:05

    Voilà je me suis amusée à faire un petit truc, c'est pas le top mais ça respecte les règles sauf erreur (:



    Titre du RP
    Et son petit sous-titre



    Code:
    <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    <div style="height: 100px; width: 260px; margin: auto;"><div style="background-color: #803300; border-radius: 50px; height: 100px; width: 100px; z-index: 2; display: inline-block; position: relative;"></div><div style="background-color: #9a3d00; border-radius: 50px; height: 100px; width: 100px; z-index: 1; margin-left: -20px; display: inline-block; position: relative;"></div><div style="background-color: #b34700; border-radius: 50px; height: 100px; width: 100px; z-index: 0; margin-left: -20px; display: inline-block; position: relative;"></div><div style="height: 70px; z-index: 3; margin-left: -230px; margin-top: 35px; display: inline-block; position: absolute;"><span style="font-family: courgette; font-size: 60px; color: #ff6500;">T</span><span style="font-family: courgette; font-size: 30px; color: #ff934d; letter-spacing: 3px;">itre du RP</span><br /><span style="color: #ffc19a; font-family: arial; font-size: 11px; margin-left: 80px;">Et son petit sous-titre</span></div></div>







    avatar
    Ayfoth
    MasculinAge : 27Messages : 1229

    le Mar 30 Sep 2014 - 1:31

    Voici ma petite participation :





    Titre Rpg
    Deuxième texte





    Code:
    <link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
    <div style="height: 100px;">
    <span style="display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span><span style="position: relative; left:20px; top: -3px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(-50deg)"></span><span style="position: relative;left:30px;top: -50px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span><span style="position: relative; left: 40px; top: -50px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(-50deg)"></span><span style="position: relative; left: 50px; top:-60px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span>
    <span style="border-bottom: 2px #91871b solid;border-top: 1px #91871b dashed; color: #ede054; text-shadow: 1px 1px 1px #91871b; font-family: 'Special Elite', cursive; font-size: 20px; text-transform: uppercase; font-weight: bold; position: relative; top: -120px; left: 80px;">Titre Rpg</span>
    <span style=" color: #f8f1a4; text-shadow: 1px 1px 1px #91871b; font-family: 'Coming Soon', cursive; font-size: 18px; font-weight: bold; position: relative; top: -115px; left: 60px;">Deuxième texte</span>
    <span style="position: relative; left: 200px; top:-140px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span><span style="position: relative; left: 210px; top: -175px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(-50deg)"></span><span style="position: relative;left:230px;top: -200px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span><span style="position: relative; left:210px; top: -203px;display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(-50deg)"></span><span style="position: relative; left: 230px; top: -220px; display: block;width:20px;height: 20px;background-color: #eddb0e; box-shadow: 1px 1px 1px #91871b; transform: rotate(50deg)"></span>

    </div>



    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 0:03