Cours de Coco • Codage

Sujet: Cours de Coco • Codage Ven 16 Oct 2015 - 19:28

Salut Coco !

Je vais aujourd'hui t'apprendre...
Cours de Coco • Codage 465541043

À coder !

Je te propose d'apprendre les bases des bases pour l'instant (c'est très clair) : changer la police de caractère, changer de couleur, de taille, mettre des ombres, mettre du texte sur une image (comme pour l'entête du message avec le Salut Coco). Tu veux qu'on commence par quoi ?

Sujet: Re: Cours de Coco • Codage Sam 17 Oct 2015 - 9:08

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:03

Désolé j'avais pas vu >//< Je commencerai bien par faire l'image avec le texte comme tu as fais :3

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:28

Alors on va commencer par analyser ce code :

Code:: [center]:viii: [/center]
[center]<link href='https://fonts.googleapis.com/css?family=Qwigley' rel='stylesheet' type='text/css'><div style ="font-family: 'Qwigley'; font-size: 35px; margin-top: -40px;">Vive Wiss !</div>[/center]

Ce qui donne (ne fait pas attention à la police de caractère) :

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:29

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:31

Alors... déjà pour un code, tu l'as vu, il faut utiliser "<.div style ="blabla.> <./div.>". "font-family: 'Qwigley';" c'est la police de caractère, font-size: 35px c'est la taille. Et margin-top, c'est quoi alors ? C'est tout simplement pour modifier l'emplacement d'un texte ! Alors du coup essaie de modifier un peu le code en changeant le texte et la hauteur de ce dernier (tu peux baisser au augmenter le -40)

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:37

Voilà le résultat chère prof :3

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 15:46

Parfait ! T'as a peu près compris comment faire, maintenant essaie de me faire un autre code complètement différent en utilisant le margin-top (autre smiley, autre hauteur etc).

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 17:18

Voilà mon résultat!

(J'ai joué aussi sur la taille et la couleur :3)

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 18:02

Ok, c'est parfait et c'est maîtrisé !

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 18:03

Tu peux me montrer les ombres stp?

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 18:13

Ok, alors on va faire simple : on va reprendre le code que tu as fait.

Voilà mon résultat!

Code:: [center]:pas content: [/center]
[center]<link href='https://fonts.googleapis.com/css?family=Qwigley' rel='stylesheet' type='text/css'><div style ="font-family: 'Qwigley'; font-size: 50px; margin-top: -7px;color:#0066ff; text-shadow: 1px 3px 5px;">Voilà mon résultat!</div>[/center]

Le premier "px" c'est pour dédoubler le texte à l'horizontale :

Texte

Plus le chiffre est haut, plus il sera éloigné du texte.

Le deuxième c'est pour le dédoubler à la verticale :

Texte

Plus le chiffre est haut, plus il sera éloigné du texte.

Et le troisième pour le flouter :

Texte

Plus le chiffre est haut, plus l'ombre sera floue.

Si tu as compris, je te propose de me mettre plusieurs ombres différentes sur cette citation :

La vie est telle une flamme,un jour elle finit par s'éteindre.

Sujet: Re: Cours de Coco • Codage Dim 18 Oct 2015 - 18:26

Cours de Coco • Codage Leroux-gonssard-chauffagiste-fontainebleau

La vie est une flamme, un jour elle finit par s'éteindre.

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 14:43

On continue?

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 14:49

Okey, magnifique ! Tu veux faire quoi ensuite ? ;3

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 14:56

Changer la police! :3 Enfaite j'arrive à mettre celle comme Impact et Times New Roman qui sont déjà dans l'éditeur de texte, mais après j'arrive pas à mettre celles de google font.

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 14:59

C'est tout simple ! Déjà va trouver une police qui te plaît sur google font et donne moi le nom.

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 15:20

Ok: Pacifico

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 15:25

Okey. On va sur la page de cette police (le "Quick use" de Pacifico).
On descends un peu, on prends ce code :

Code:: <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Tu le met n'importe ou sur ton message et ensuite tu fais ça sans les points : <.div style="font-family: 'Pacifico'".>Ceci est un essai<./div.>

Et voilàààà

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 15:29

Comme ça?

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 15:39

Okey, alors poru commencer tu me choisis 5 polices. Tu rempalces "Pacifico" (dans ce code :

Code:: <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

par les polices). Ensuite tu réutilises la petite citation qu'on a vue plus haut et tu utilises les polices ^^

PS : Pour une police en plusieurs mots (du genre "Poiret One", on ne mettra pas un espace entre les deux mtos ni rien mais un plus :

Code:: <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

Sujet: Re: Cours de Coco • Codage Ven 23 Oct 2015 - 18:52

La vie est une flamme, un jour elle finie par s'éteindre.

Après m'être rendu compte que j'ai mis " à la place de ' et que j'avais fais ça:

Code:: <div style="font-family: 'Shadows+Into+Light'">La vie est une flamme, un jour elle finie par s'éteindre.</div>

à la place de ça:

Code:: <div style="font-family: 'Shadows Into Light'">La vie est une flamme, un jour elle finie par s'éteindre.</div>

,
j'ai enfin terminé!

Sujet: Re: Cours de Coco • Codage Jeu 29 Oct 2015 - 22:11

Sujet: Re: Cours de Coco • Codage Ven 30 Oct 2015 - 10:31

Oui, pardon ;-; Du coup tu veux apprendre à faire quoi ? Je vois pas trop ce que je pourrai t'apprendre, donc bon x)

Sujet: Re: Cours de Coco • Codage Ven 30 Oct 2015 - 11:05

Euh… A faire une fiche de rp par exemple?

» Les Cours de Codage de Wiss èwé • OUVERT !
» Anniversaire de coco
» Cours d'Etoile du Silence
» L.D.D. Codage de Wiss || ONLY FOR LCDL
» Cours d'écriture de Colibris