Forum d'entraide de graphisme & de codage
 
AccueilAccueil  CalendrierCalendrier  Guide du Swirlien  FAQFAQ  RechercherRechercher  MembresMembres  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Cours de Absolute et Orphère ♥

Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Cours de Absolute et Orphère ♥   Sam 27 Fév - 14:59


Cours de Abso' et Orph' ♥

*a fait le code en 5 minutes pour avoir un truc de potable a présenter*
Coucou les filles ! Alors j'ai un peu farfouillé le fofo et j'ai cru comprendre que vous aviez toutes les deux vos bases en HTML/CSS (Abso avec sa signa en onglet et Orph' avec sa fiche pour sa partie de cours en Graph') alors j'aimerais savoir en détails vos compétences ainsi ce que vous aimeriez que je vous enseigne c:

J'espère que vous allez vous amuser ♥

D'ailleurs, je vous ai prise toute les deux en même temps parce que c'est un peu plus simple pour moi, étant donné que je suis une fille tout le temps occupée xD J'espère que cela ne vous dérangera pas c:

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Sam 27 Fév - 15:21

*s'assoit à côté d'Orphère et lui dessine un coeur sur son cahier*
Coucou ! Merci de m'avoir acceptée comme élève ^^
Pour ma part j'ai eu un professeur qui m'a appris à utiliser div, table, span et autres techniques pour faire des fiches (notamment de présentation et de pub) puis j'ai plus ou moins appris en autodidact le codage des pages d'accueil (simples) et récemment grâce à SS, les onglets même si je me contente de copier coller le javascript des onglets x) Cela reste cependant basique je pense ^^ Voici 2 pages html codées par me pour te montrer ce que je sais déjà faire ^^
Présentation donc comme tu peux le voir je sais me servir du hover ^^

DN et je peux même faire apparaître un texte sur une image ^^

Et les onglets aussi ^^

Mon rêve c'est de coder l'apparence des forums et notamment les catés ^^

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Sam 27 Fév - 16:11

challenge accepted

Alors on va bosser un peu plus les base pour créer de superbes harmonie 8D
J'ai remarqué que sur tes hover, il y avait des transitions au départ mais pas au retrait de la souris. C'est voulu ?

Ensuite, je vais donné à Orphère et toi un plan d'une fiche et un plan d'une PA pour voir comment vous vous en sortez au niveau de la structure c:

• • • • • • • • • •

Revenir en haut Aller en bas
Orphère
Animateur
avatar

Image par défaut
Rang Messages : 2092
Date d'inscription : 26/07/2014
Age : 23
Localisation : Sur Chimera.*^*

MessageSujet: Re: Cours de Absolute et Orphère ♥   Sam 27 Fév - 16:26

*saute de joie de voir qu'elle est prise comme élève et en plus, avec abso* ♥️
*donne un bisou à Abso' et un gros câlin à Sakura*

Aloors, merci 8D Merci beaucoup beaucoup ♥️

Eeeeeeet puis j'ai honte. Ce que tu as vu ce sont des LS.

Je suis désolée de dire que je n'ai que des bases en HTML, et j'ai débuté en CSS mais par manque de motivation j'ai laissé tomber (pas douée pour progresser en autodidacte) et dooonc je ne sais qu'utiliser le div style machin chose mais je n'ai pas d'exemple (désolée >w<)

Et dooonc ... :c

• • • • • • • • • •


Merci ma Abso chérie ♥️
Si t'es un petit peu curieux c::
 

EX administratrice, n'hésitez pas à poser vos questions  

Absente jusqu'à la fin du mois
Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Sam 27 Fév - 16:53

D'accord maîtresse Cool /PAN
Non ce n'est pas voulu, je ne sais pas comment on fait pour le retrait de la souris

Oki ^^

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Sam 27 Fév - 19:11

Orph' : Dans ce cas, on va reprendre un peu les bases c:
Je te fais ça demain, j'ai plus mon pc avant demain XD

Abso' : Bah y'a plus qu'à apprendre alors !
J'ai une manière assez spéciale de faire mes hover mais c'est un peu à chacun sa manière sur ce domaine là c:
Je te ferais un topo sur les hover avant de commencer la pratique demain en même temps qu'Orph' c;

• • • • • • • • • •

Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 28 Fév - 15:04


Topo sur le hover 8D

*ont commence par ça parce que c'est le moins long /PAN/*

Coucou Abso', donc je vais de te donner quelques méthodes avec les explications pour le hover c:

Pour commencer, un bref rappel (ça va te servir Orph', alors lit aussi 8D). Le hover, c'est le fait de créer des transition entre un point A et un point B au passage de la souris. En claire, tu passe ta souris, POUF il se passe un truc.

Exemple :



Code:
.rondnoir {
margin:auto; /*pour centrer*/
transition: all 0.4s ease; /*La transition de fin*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}

.rondnoir:hover { /*Au survol*/
transition: all 0.4s ease;/*la transition de début*/
background:indigo;/*la couleur de fond*/
}
Code:
<div class="rondnoir"></div>

Donc vous l'aurez remarqué, je n'utilise pas la manière classique du :

Code:
.durée {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}

.rondnoir {
margin:auto; /*pour centrer*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}

.rondnoir:hover { /*Au survol*/
background:indigo;/*la couleur de fond*/
}
Code:
<div class="durée rondnoir"></div>

Je sais qu'il y a plein de trucs comme ça, mais je ne préfère pas m'aventurer plus loin, c'est déjà bien assez compliqué comme ça.

Pour revenir à cette propriété :

transition: all 0.4s ease;

Le 0.4s correspond au temps, le reste, on s'en fout (#laprofquinesaitrien).

Généralement, on ne met pas les même valeurs pour l'allée et le retour parce que c'est plus stylé  

Après, on recherche généralement plus d'effet soi-même sur internet, parce qu'on est jamais contente de ce qu'on veut.

Donc je vais donner deux trois manière de faire un hover sympa c:
Déjà, commençons par une manière que j'aime beaucoup utiliser (elle est présente sur la PA Baby Metal que j'ai laisser en LS ici ^-^

Donc on fait un rond :



Code:
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
*/
}
Code:
<div class="premierrond"></div>

Puis un deuxième rond :




Code:
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
}
Code:
<div class="premierrond"></div>
<div class="deuxiemerond"></div>

On utiliser un margin pour remonter le rond vert de sorte à ce qu'il se superpose sur le rond rose clair.





Code:
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}

Et maintenant vient la transition ! On va mettre le deuxieme rond a opacité 1 et au hover, le placer à opacité 0 de sorte à ce qu'il laisse le rond rose visible c:





Code:
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}

.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}

Je sais ce que vous allez dire. C'est plus long et moins simple que la méthode qui est exposé au tout début du cours certes. En fait, cette méthode est plus utilisé pour l'apparition, disparition de textes/images. On met le premier rond avec une image ou une couleur, et au survol apparaît une autre couleur (dans le cas d'une image) ou un texte. Pour que le texte soit bien positionné en dessous du rond vert, on rajoute un z-index aux deux ronds. C'est ce qui permet une bonne superposition. Par exemple, un z-index de 999 sera toujours position au dessus d'un z-index 998
Comme ceci :

Lala



Code:
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
position:relative;
z-index:1;
}

.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
position:relative;
z-index:2;
}

.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}

Je pense que je posterais à la suite d'autre méthode pour le hover. Mais ici, j'ai expliqué le plus simple, j'espère que j'ai été assez compréhensible >w<
Je commence ton cours demain Orph', désolé j'ai un léger contre-temps aujourd'hui qui fait que je n'aurais pas mon ordi à dispo et sur portable, c'est un peu galère.

C'était les hover

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 28 Fév - 15:20

Je pense avoir compris *^*

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 28 Fév - 15:36

Bah c'est super ça 8D

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 28 Fév - 15:41

Tu veux que j'applique ta technique ou bien... ? :)

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 28 Fév - 18:47

Est-ce que tu peux me faire un mini truc pour me montrer que tu as compris en me mettant le code sous hide s'il te plait ? Un truc vraiment simple, type une fiche >w<

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Lun 29 Fév - 13:21

Je te fais ça dans la semaine ^^

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Lun 29 Fév - 15:42

Okay c:
Désolé, la partie de Orph' est en cours sur word, j'essaie de poster ça au plus vite >w<

• • • • • • • • • •

Revenir en haut Aller en bas
Orphère
Animateur
avatar

Image par défaut
Rang Messages : 2092
Date d'inscription : 26/07/2014
Age : 23
Localisation : Sur Chimera.*^*

MessageSujet: Re: Cours de Absolute et Orphère ♥   Lun 29 Fév - 18:00

T'inquiète pas prend ton temps ! Je suis beaucoup moins présente qu'Absolute >w<

• • • • • • • • • •


Merci ma Abso chérie ♥️
Si t'es un petit peu curieux c::
 

EX administratrice, n'hésitez pas à poser vos questions  

Absente jusqu'à la fin du mois
Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 11:09



Here click !

Dis dis dis Saku' j'ai tenté de le faire par moi-même mais impossible d'y arriver, comment je fais pour qu'en passant ma souris sur une image un petit truc s'affiche comme ceci :


• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 12:14

AAAAAH LA FAUTE DANS LE CODOUNET /PLANCHE/

Huhummm.... Alors, j'ai regardé un peu ton code et en fait, pour qu'un Z-Index soit actif sur une div, il faut lui attribuer une position ! Sinon, le z-index n'est pas actif /!\
Il faut que tu rajoute la position:relative dans les partie de ton code comportant le z-index comme ceci :

Code:
.corps {
 height:80px;
 width:300px;
 margin-left:15px;
 margin-top:15px;
 font-family:arial;
 color:#000000;
 font-size:10px;
 background:#ffded6;
 padding:3px;
 }
 
 .titre {
 margin-left:80px;
 border-radius:15px;
 height:25px;
 width:200px;
 background:#841f2c;
 font-family:monotype corsiva;
 font-style:italic;
 font-size:20px;
 text-align:center;
 color:#ffffff;
 z-index:1;
position:relative; /*POSITION POWAAAAAAAAAAAAAAAAA*/
 }
 
 .titre2 {
 margin-left:80px;
 border-radius:15px;
 margin-top:-25px;
 height:25px;
 width:200px;
 font-family:monotype corsiva;
 font-style:italic;
 font-size:20px;
 text-align:center;
 color:#ffffff;
 background:#ce2942;
 transition: all 2s ease;
 z-index:2;
 opacity:1;
position:relative; /*POSITION POWAAAAAAAAAAAAAAAAA*/
 }
 
 .titre2:hover {
 opacity:0;
 transition: all 2s ease;
 }

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 12:40

La position n'affecte pas le placement de la div, simplement le z-index ? Je ne comprends pas très bien le principe de la balise position, de ce que je sais il y a absolute/relative et je crois qu'il y en a un troisième, qui permet de positionner un objet sur la page mais je ne suis pas sûre d'avoir tout compris x) En tout cas je retiens, z-index ET position:relative *note et va modifier son code*

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 13:44

Hey ♥ Alors la position, j'ai moi-même un peu de mal avec, la seule que j'utilise est la relative. Avec elle, on peut bouger ses éléments avec les propriétés "Top: XXpx;" idem avec Bottom, Right et Left.

N'hésite pas à faire des test avec c:

Ensuite, le z-index qui n'est actif qu'avec la position. Qu'importe ce que tu feras, sans positions, le z-index marche pas. Mais tu peux sans problème ajouter une position sans pour autant bouger ton élément c:

Vuallaaaa

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 15:19

Okiiiiiiiiiiiiiiii ! Et du coup quand tu auras le temps et si tu sais le faire tu pourras m'expliquer pour ça s'il te plait :

@Absolute a écrit:
Dis dis dis Saku' j'ai tenté de le faire par moi-même mais impossible d'y arriver, comment je fais pour qu'en passant ma souris sur une image un petit truc s'affiche comme ceci :



• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 15:23

Les info-bulle ?
Bah tu vas rire, j'ai demandé à Keykey de m'apprendre parce que moi-même j'ai pas encore appris xD

• • • • • • • • • •

Revenir en haut Aller en bas
Absolute
Noteur
avatar

Image par défaut
Rang Messages : 2216
Date d'inscription : 06/08/2015
Age : 21
Localisation : France

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 15:31

Je vais aller suivre ton cours alors /PAN

• • • • • • • • • •

Envie de me lancer un défi ? Click 8D


Merci Invité:
 


Merci ♥:
 
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 2 Mar - 15:36

XD
Non, mais si j'ai le temps, je m'avancerais sur ces cours et je ferais des recherches de mon coté c:

• • • • • • • • • •

Revenir en haut Aller en bas
Orphère
Animateur
avatar

Image par défaut
Rang Messages : 2092
Date d'inscription : 26/07/2014
Age : 23
Localisation : Sur Chimera.*^*

MessageSujet: Re: Cours de Absolute et Orphère ♥   Jeu 3 Mar - 18:06

Coucou !

Petite prof, je vais essayer de regrouper toutes mes connaissances en CSS itou, et te faire une petite fiche, comme ça tu sauras exactement ce qui ne va pas itou, et tu m'apprendras ! *v*

• • • • • • • • • •


Merci ma Abso chérie ♥️
Si t'es un petit peu curieux c::
 

EX administratrice, n'hésitez pas à poser vos questions  

Absente jusqu'à la fin du mois
Revenir en haut Aller en bas
Sakura
Equipe Violette
avatar

Image par défaut
Rang Messages : 328
Date d'inscription : 18/12/2015
Age : 17

MessageSujet: Re: Cours de Absolute et Orphère ♥   Dim 6 Mar - 11:26

Owai !
Utilise le maximum de propriété que tu connais, ça me donneras un apperçu !
Comme ça, je saurais par où commencer ton cours *^* (Je t'avoue que j'ai un peu du mal xD)

• • • • • • • • • •

Revenir en haut Aller en bas
Orphère
Animateur
avatar

Image par défaut
Rang Messages : 2092
Date d'inscription : 26/07/2014
Age : 23
Localisation : Sur Chimera.*^*

MessageSujet: Re: Cours de Absolute et Orphère ♥   Mer 23 Mar - 19:21

Peux-tu me donner ton email s'il te plaît ? C'est des pages web >w< (désolée pour le retard Orz)

• • • • • • • • • •


Merci ma Abso chérie ♥️
Si t'es un petit peu curieux c::
 

EX administratrice, n'hésitez pas à poser vos questions  

Absente jusqu'à la fin du mois
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Cours de Absolute et Orphère ♥   

Revenir en haut Aller en bas
 
Cours de Absolute et Orphère ♥
Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» L'affichage de la carte disparaît en cours de navigation
» Ouvrir un fichier dans Mapsource sans effacer les données en cours?
» Problème sur l'arret en cours
» Cours ImageReady
» Cours par ChatBox - Samedi 19 Janvier 2013

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sweet Swirl :: Archives :: BIG ARCHIVES :: Atelier de cuisine :: The Cherry Class-
Sauter vers: