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

    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
    ClaryF
    FémininAge : 27Messages : 135

    le Ven 4 Juil 2014 - 19:21

    Bon ... je me lance alors.

    Voilà mon résultat ::

    Un Petit Titre Sympa !
    " Une petite citation pour faire jolie. ">


    Code:
    <center><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'><span style="font-family: Dancing Script ; color: #F99811; font-size: 40px; text-shadow: 2px 2px 0px #FFC36F;">U</span><span style="font-family: Times new Roman ; color: #FFC36F; font-size: 30px; letter-spacing : 2px; font-variant: small-caps">n Petit Titre Sympa !</span><br><span style="font-family : Open Sans Condensed; font-size: 11px; color: #D3C4AF; letter-spacing: 1px; text-transform: uppercase;border-bottom: 1px dotted #D3C4AF; padding-bottom: 1px">" Une petite citation pour faire jolie. "></div></center>


    Dernière édition par Nihil Scar Winspeare le Sam 23 Juil 2016 - 19:51, édité 2 fois (Raison : Suppression d'une div en trop qui faisait bugger la suite des messages)
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 4 Juil 2014 - 22:58

    Et bien c'est pas mal du tout ! Toutes les contraintes ont été respecté et c'est parfaitement dans le thème. En plus c'est assorti à la saison Wink
    Si je peux me permettre un petit conseil au niveau de ton code pour l'alléger, c'est de ne mettre qu'un seul link pour les deux polices et de séparer les noms par ceci "|". Mais ton code n'est pas faux ainsi.

    Merci de ta participation !

    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Sam 5 Juil 2014 - 12:31

    C'est juste triste que la participation soit sous hide... =/



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

    le Sam 5 Juil 2014 - 12:38

    Ah effectivement je n'avais pas vu. Je vais spécifier ça dans le premier post.
    Merci Nyo.

    avatar
    ClaryF
    FémininAge : 27Messages : 135

    le Sam 5 Juil 2014 - 16:04

    Merci ! ~

    & j'ai retirer le "hide" ! (:
    avatar
    Invité

    le Ven 11 Juil 2014 - 13:15

    Hello !

    Bon alors voici mon essai, plutôt petit et pourri :



    Hansel & Gretel
    do not have brains ~
    No they don't !


    J'ai un peu galéré pour le faire ( pour réduire les écarts entre les lignes en fait >.< ), j'espère que les polices utilisées iront x)




    Dernière édition par Dakota le Ven 11 Juil 2014 - 17:30, édité 2 fois
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 11 Juil 2014 - 14:29

    Hé mais c'est tout à fait bien ! Les contraintes ont été respectées c'est nikel. Et puis aucun essai n'est pourri Wink En plus le vert c'est chouette \o/

    Néanmoins, j'y vois un couac avec les polices. Dans le code on voit bien qu'il y en a plusieurs. Cependant, dans le rendu que tu postes, on n'en voit qu'une seule. Cette police est d'ailleurs celle de base de N-U. Si tu as pris tes polices sur google font alors tu as oublié une partie du code (mah je te rassure c'est pas inné de savoir ça x)). Si tu as pris des polices que tu as sur ton ordi alors toi tu les vois vu qu'elles sont installées sur ton pc mais nous non. (Je te ferai un imprim' écran si ce que je dis ce n'est pas clair :hum: .)

    Ensuite, tu dis que tu as eu des problèmes avec tes écarts entre tes lignes ? Pour te donner un indice sur la solution, la balise span et une balise "en ligne" donc à la fermeture de celle-ci tu vas directement à la ligne. Tu vois ce qui t'as posé problème maintenant ?

    avatar
    Invité

    le Ven 11 Juil 2014 - 14:52

    Merci =D

    Je me doutais que pour les polices ça n'allait pas fonctionner. Normalement ça donne ça :

    J'avais oublié que les polices installées sur les pc ne fonctionnaient pas partout x) Du coup, pour les remplacer avec des polices venant de google fonts, il suffit juste que je mette le nom de la police pour que ça fonctionne ou bien il y a des morceaux de codes en plus à ajouter ? ( ce que j'ai cru voir dans le code de Claryf ).

    Je vois pour les lignes, merci :)
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 11 Juil 2014 - 15:24

    Et bien pour mettre des polices qui viennent de google fonts, tu dois passer par le site chercher tes polices dessus et ensuite le site te donne les codes que tu as à insérer Wink (Je ne peux pas te dire comment ça fonctionne avec Dafont parce que je ne sais pas .-.)
    Mais oui il y a des morceaux de code à ajouter, exactement ce qu'a fait Claryf.

    Je te confirme qu'en voyant ce que donne les polices, tu te sous-estimes ! C'est beau comme tout Very Happy

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 16:10

    J'ai fait un petit essai, et pour ajouter de la déco j'ai fait des ronds en CSS, ce qui donne un looooooooong code Razz Voilà, j'espère que c'était l'exo demandé !



    Titre de RP
    La phrase qui va bien !





    Dernière édition par Sauney le Ven 11 Juil 2014 - 17:05, édité 1 fois



    avatar
    Invité

    le Ven 11 Juil 2014 - 16:44

    Voilà, j'ai édité mon premier message pour rectifier le tir au niveau des polices. Bon ce ne sont pas tout à fait les mêmes, mais j'avais un peu la flemme de chercher sur tout google font Razz Mais j'ai saisi comment faire maintenant =D

    Par contre, avec un peu de recul le H est peut-être un peu éloigné du reste :hum:

    Chouette essai Sau' :)
    avatar
    Noob's
    MasculinAge : 23Messages : 129

    le Ven 11 Juil 2014 - 17:16



    Bon bah je me lance aussi o/

    King Atlas
    "La naissance d'un roi"
    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 17:17

    Très joli vos essais ! Et merci Dakota :) Je me permets de répondre à ta question, effectivement le H est un peu éloigné. Peut-être que dans le span du H tu peux mettre margin-right: -5px; ?



    avatar
    Invité

    le Ven 11 Juil 2014 - 17:31

    Ah oui, en effet ça fonctionne et maintenant le placement du H est nickel, merci pour la petite astuce Sau' :)

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

    le Ven 11 Juil 2014 - 17:47

    Oula ! Je ne m'attendais pas à autant de participations ! Je suis émue :')

    Dakota -> Pour les polices c'est nikel ! (Je préférais celles que tu avais pris en premier mais google fonts ne nous offre pas autant de police que dafont, tant pis x)) Tout est correct, je n'ai rien à ajouter, si ce n'est peut-être qu'il y a toujours les br mais ça ne gène pas puisque le rendu est ordonné.

    Sauney -> Ouah ! Tu as du en prendre un peu plus de temps pour faire tout ça x) Mais c'est superbe et tu es parfaitement dans le thème. Les contraintes sont respectées et c'est très joli ! Si je peux me permettre un conseil, les préfixes ne sont plus obligatoires pour les border-radius Wink Ça allégera un peu ton code.

    Noob's -> Ce serait bien que tu postes ton code également entre les balises "code" et "hide".

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 18:11

    Voici un autre essai Very Happy Oui je m'éclate, j'avoue xD

    Titre de RP

    Et une phrase qui déchire !







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

    le Ven 11 Juil 2014 - 19:37

    Je vois ça que tu t'éclates ! Mais c'est cowl parce que tu varies de style et tu ne te contentes pas de modifier la police et la couleur. Je trouve l'utilisation du dégradé fort adapté. Personnellement je rechigne à l'utiliser mais là je pense qu'il a parfaitement sa place.
    Et encore une fois tu es dans le thème :)

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 19:43

    Merci Very Happy Allez, j'envoie la troisième et j'arrête !

    Avec fond :






    Titre de RP

    Citation, description, ce que tu veux !






    Sans fond :






    Titre de RP

    Citation, description, ce que tu veux !






    Dernière édition par Sauney le Ven 11 Juil 2014 - 20:39, édité 1 fois



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

    le Ven 11 Juil 2014 - 20:29

    C'est très bien aussi ! J'ai une préférence pour la version sans fond, qui fait plus fluide avec un texte à la suite.
    Cependant, ici tu ne respectes pas les contraintes... Tu n'utilises qu'une seule et unique police. (En fait je pense que tu as oublié ta deuxième phrase parce qu'on voit bien que tu lies deux polices, mais bon ça reste hors sujet pour l'instant Razz)

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 20:40

    J'ai modifié, j'avoue avoir oublié les consignes à force xD



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

    le Ven 11 Juil 2014 - 20:44

    Là c'est parfait \o/
    Et ça conforte ce que je disais plus haut, celui sans fond est mieux (:

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 20:46

    C'est ce que je me disais, j'ai posté les deux parce que j'avais du mal à me décider :/ Celle avec fond fait trop chargée en fait !



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

    le Ven 11 Juil 2014 - 21:02

    C'est pas forcément trop chargé, c'est que ça contraste trop avec le reste. T'as une coupure sèche avec ce qui suit.

    Autant ton deuxième essai (le rouge) s'incruste mieux parce que le titre dépasse du fond, alors que pour le troisième (le bleu) t'as une coupure stricte et la citation qui est un peu mise à l'écart. Enfin ce n'est que mon ressenti xD

    Mais merci de ta participation :)

    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Ven 11 Juil 2014 - 21:12

    Je comprends ton point de vue et j'y adhère Wink Merci d'avoir proposé cette mission Very Happy



    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 4:28