Cré'Actif Space ♥
Hello hello !

Soit le ou la bienvenue sur Cré'Actif Space, ton forum de graphisme et de codage !

N'hésite pas à rejoindre la communauté si tu es comme nous un fan de cookies !



AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Classe de Mystigri

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Classe de Mystigri   Jeu 12 Nov - 10:10

Hellooooo! Je serai ta prof de codage!

Alors, que veux tu apprendre? **

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Jeu 26 Nov - 18:00

On peut commencer par le codage qui se fait dans le panneau d'administration ? ^^

Je voudrais savoir comment on réduit ou augmente la largeur du forum, si possible.

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Sam 28 Nov - 9:42

Après le but d'une classe n'est pas que je te "donne" les codes dont tu as besoin Mystigri.. Le but est que tu apprennes des choses..

Pour changer la largeur d'un forum, perso ici ça s'est fait en fonction de la largeur de la bannière..

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Sam 28 Nov - 14:07

Eh bien, tu ne me donne pas des codes et j'apprends des choses ! x)

Et si tu ne me donne pas des codes, comment veux-tu que j'apprenne quelque chose ? ^^ (imaginons que je te demande comment changer les bordures, c'est mieux de montrer le code avec.)

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 29 Nov - 20:26

Je te dis, ça se change en fonction de la largeur de ta bannière ^^

Dis-moi plutôt ce que tu veux apprendre, un truc un peu plus large x)

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Mar 1 Déc - 18:37

Oui oui, j'avais compris. x) En fait, je ne sais pas faire des codes mais les modifier. Déjà, comment on fait pour simplement avoir un cadre sans bordures arrondies (ça, je sais faire). Une boîte comme tu dis. ^^

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 3 Jan - 20:02

Mince, j'avais complètement oublié ta classe, UP-moi quand c'est comme ça Mystigri! Se cache

Du coup tu veux qu'on voit les codes de bases sur une boite? Genre les arrondis, les types d'encadrements, les fonds, les ombres, les dispositions dans la boite etc..

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 13:42

Ce que j'aimerais très précisément, c'est une boite un peu arrondie (les bordures, je sais faire) avec un titre et de l'ombre. Je voudrais aussi qu'il y ait des image rondes en bas qui tournent sous le passage de la souris (comme les topsites de la PA) . C'est correct comme demande ? Se cache

Enfin bon ! faisons étapes par étapes.

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 13:55

Ca me va très bien!
On va voir les codes indépendamment les uns des autres et on les assembles après!

Tout d'abord on va voir la boite (Ensuite on verra le titre, puis les images en rond "qui tourne" :3)

Voici une boite tout simple:



Et voici le code:
Code:
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border: 1px solid black; cursor: crosshair" >
</div></center>

Tu peux déjà apporter des modifications à ta boite grâce à ces attributs:
- width: largeur de ta boite
- height: hauteur de ta boite
- background url: c'est l'url de mon image de fond
- border: 1px: épaisseur du contour
- border: solid: style de contour (solide, pointillé, tirait, double,...)
- border: black: couleur de ton contour

Apporte les modifications que tu veux!
Jusque là tu me suis encore? Lèche

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 14:37

Oui ! Les bordures, c'est ce que je sais l mieux faire !Maintenant, je mets les arrondis, vu que je sais comment faire. border-radius: 10px (par exemple) Je sais que le background-url peut être remplacé par background-color aussi.

Par contre... Je ne savais pas qu'on pouvait modifier la forme de la souris sous son passage sur la boite. C'est : cursor: crosshair  je suppose ?




Code:
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" >
</div></center>

Ensuite, on fait le titre ?

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 14:49

Parfait, tu t'es super bien débrouillée! *_____*

Du coup on laisse le code de la boite de coté!

Pour le titre, on va créer une div pour mettre toute les caractéristiques du titre dedans!

Le joli titre ici



J'ai mis des couleurs dégeu uniquement pour te monter :3
Dans ce code tu as encore plusieurs attributs que tu peux modifier à ta guise:
color: couleur du texte
text-shadow red: couleur de ton ombre
font-size: taille du texte
font-family: police
font-style: italique, gras, souligné,..

Code:
<div style="color:black;text-shadow: 0px 0px 7px red;font-size:50px;font-family:times new roman;font-style:italic;">Le joli titre ici</div>

Codes déjà réalisés:
 

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 15:22

Oki. Juste, c'est quoi la différence entre div et span ? Bon, j'ai pas d'idées de titre hein. Comme je ne sais pas mettre "gras" j'ai écrit
Code:
<b></b>

Je n'ai trop modifié, mais ça va.

Miaou


Code:
<center><div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div></center>

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 15:27

C'est la même chose, à notre niveau, c'est la même chose.
En gros, div crée un bloc, ce qui fait que deux div à la suite sont automatiquement sur deux lignes différentes alors que deux span restent sur la même ligne. Après on peut, grâce au CSS, mettre deux div sur la même ligne, donc en soit, il n'y a pas vraiment de différence (a)

C'est tout bien ce que tu as fais, c'est vrai que t'as pas changé grand chose x)
Du coup on va déjà assembler la boite avec le titre non? Tu sais le faire?

Codes déjà réalisés:
 

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 15:52

Merci pour cette petite explication Alicia. Attention... Magie !


Miaou



Code:
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" >
<div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
</div></center>

On peut rajouter un petit autre texte en dessous aussi. Par contre, j'ai utilisé des blockquote et non de la marge. J'ai grossi la hauteur pour qu'il y ai de la place pour les trois images rondes à mettre.

Spoiler:
 

Ou alors mettre le texte dans un nouveau cadre.

Spoiler:
 

Ça commence ressembler à quelque chose tout ça !

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 16:14

Mais c'est parfait tout ça, tu te débrouilles super bien! <3

Pour les images rondes, déjà le but c'est de mettre une image en 100x100 et qu'elle se mette toute seule en rond, non? Eh oui, on est comme ça, nous sommes des faignasses qui ne veulent pas ouvrir leur Photoshop!
Tu voulais le même que sur la PA, alors on va reprendre ce code que je vais décortiquer pour toi (a)

Code:
<a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://img15.hostingpics.net/pics/667564281.jpg" style="border-radius: 126px;width:50px;" /></a>
Comme d'habitude, le width détermine la largeur de l'image, que j'ai réduite pour une meilleure visibilité! Ensuite, c'est tout simple, on se sert des border-radius pour que l'image soit ronde! Donc maintenant que tu mettes n'importe quelle image carrée dans le code, elle sera remise à 50px et arrondie  Owaiiiii

Ensuite il faut que ça tourne quand on passe la souris dessus, sinon c'est pas drôle!
Le code qui permet de modifier un affichage quand on "passe dessus", est le hover.

Le code qu'on est train de faire, c'est une signature pour un forum?

Code déjà réalisé:
 

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 16:49

j'en ai fait deux versions. ^^ J'aime bien les deux. Mais on va rester sur la première.

Première:
 

Autre:
 

Oui, je pensais faire un code pour RP, puis je me suis rappelé que je voulais mettre des images et je me suis dis qu'en signa ce serait super !

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 17:13

J'aime bien les deux! **

Le soucis c'est que le code permettant de faire tourner l'image est un CSS qui s'appelle hover, je sais comment l'introduire pour une PA, un QEEL ou même des catégorie parce que j'ai une feuille CSS pour le forum, mais l'introduire dans un code directement HTML, je ne sais pas du tout :(

Je ferai des recherches sur ça demain, et si je trouve je te le redis!

Du coup tu voulais voir autre chose?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 18:53

Montres-moi le CSS quand même, je sais comment faire, enfin, à peu près.

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 19:06

Dans ce cas dis-moi comment tu veux faire et j'essaye ^^

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Dim 17 Jan - 20:47

Alors en fait, je pensais créer une page HTML (ce qui est déjà fait d'ailleurs) pour pouvoir mettre le CSS. Mets-le en enlevant le /*-Ici, on écrit le texte de CSS-*/ et on mettra un div class j'ai vu ça pour les PA's

http://forumtestdegoutti.forumactif.fr/h2-signa-minouche

Code:
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Signa by Mystigri - Cré'actif Space</title>
<style type="text/css">
 /*====SIGNA - MYSTIGRI - CRE'ACTIF SPACE====*/
  /*-Ici, on écrit le texte de CSS-*/
</style><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/></head><body><center><div style="width: 500px; height: 250px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" >
<div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>

<blockquote><div style="color: #FF6600;font-size:15px;font-family:Arial; text-align:left;">Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</div></blockquote>
<a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/qbno.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a>  <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/9jp9.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a>  <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/1e0h.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a>
</div></center>
</body></html>

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Lun 18 Jan - 8:36

Je te laisse essayer pour voir si ça marche alors, voici le code:

Code:
.NOMDETADIVCLASS:hover{
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-border-radius: 126px;
  -moz-border-radius: 126px;
  border-radius: 126px;
  margin-left: 5px;
  margin-top: 3px;
}

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Lun 18 Jan - 19:30

Arf, après beaucoup d'observation sur comment faisaient les PA's, plein de tests, j'ai finis par réussir ! Par contre, j'ai pris un autre code de rotation que celui que tu m'as donné, mais du moment que ça tourne. ^^ Par contre, le cadre se décale quand on fait tourner les images, je ne suis pas une pro non plus. x)


---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Mar 19 Jan - 6:39

Ca le fait aussi sur la PA, je sais pas vraiment pourquoi, ça doit être à cause des padding ://

Du coup c'est parfait! **

Tu veux voir autre chose? <3

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Mystigri   Sam 23 Jan - 17:14

Des nouvelles?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Mystigri

avatar

CAS's Points : 143
Messages : 99
Date d'arrivée : 25/10/2015

MessageSujet: Re: Classe de Mystigri   Lun 8 Fév - 20:51

Je voulais savoir un truc mais j'ai oublié... *pasdouée* Je poste un message dès que je me suis rappelé ce que c'était.

---------------------------------------------------------


Mystigri  « Chat-Chat-Chat ! »



(c) Codage by Deutsch'   (c) Graphisme by Alicia.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mondeminicreature.forumactif.org
Contenu sponsorisé




MessageSujet: Re: Classe de Mystigri   

Revenir en haut Aller en bas
 

Classe de Mystigri

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

+

 Sujets similaires

-
» [LIEN] microsd 8 GO classe 6 à prix gratos
» video helico classe 450! sans casse!!!!!
» Le vade-mecum de 1ère classe
» Les cabines de 2ème classe
» Croiseur classe D'Assas .Scratch 1/700éme

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cré'Actif Space ♥ :: Archives du forum :: Archives-