2 résultats trouvés pour auteur_Aeden

Hello, je viens aujourd'hui vous expliquer les animations au survol.
Cela vous permettra de créer les votres et non de copier-coller l'animation qui vous plait au cas par cas.
Pour cela vous aurez besoin de deux choses : un forum, et l'accès à sa partie administration.
Prêt ?




I : Créer une class :

La class est un code que l'on peut mettre sur une div, un span ou tout autre balise html comme ceci :

Code:

<div class="utopia">    code texte ou image        </div>
<span class="utopia">    code texte ou image        </span>
<img class="utopia" src="   url de l'image    "/>


Ici, j'ai nommé la class "utopia", mais sachez que vous pourrez toujours mettre le nom que vous souhaitez.

II : La feuille CSS :

En partie administration à présent, vous avez accès à une feuille CSS. Celle-ci se trouve dans :

Administration > Affichage > Couleur > Feuille CSS

Cette feuille css vous sert à créer tous les changements graphiques généraux de votre forum : les templates servant quant à eux à changer la disposition des éléments graphiques. Mais bon, concentrons nous sur cette feuille.
Ici, vous pouvez marquer ce que vous voulez ! Si c'est la première fois, ne soyez pas timide et pour les plus rodés, faites un peu de place sur cette feuille pour ajouter le code qui va suivre.

A : comment lier le code auquel j'ai donné un nom sur cette feuille ?
Sur cette dite feuille, marquez ceci :

Code:

.utopia{ }
.utopia:hover{}

B : A quoi sert tout ça ?

► Le point déjà :
Le petit point mit juste avant le nom de votre class sert à rappeler que justement, vous parler d'une class. Si on avait parlé d'une id (id="machin"), on aurait mit alors un # avant le nom "utopia" et non un "." .

► Le utopia ensuite :
utopia étant le nom qu'on a donné à notre class, on le marque évidement pour rappeler qu'on parle bien de cette class là.
!!! Attention : les majuscules comptent : étant donné que nous n'en avions pas mise dans notre post en marquant "", n'en mettez pas ~

►Les { et } à présent :
La première ouvre les infos qu'il y aura dans le codage et la dernière clos tout ça. Vérifiez donc toujours d'avoir bien une { et une } à chaque codage fait sur la feuille css.

► la fonction :hover :
cette fonction indique qu'au survol (:hover) de la class (le point) utopia (balise nommée), il devra s'y passer ce qui est marqué entre les balise { et }.

Plus concrètement, voici un exemple pour une div :
Sur votre post, vous aurez donc :

Code:

<div class="utopia">Never Utopia</div>

et sur votre feuille CSS :

Code:

.utopia{
  width:200px;
  height: 100px;
  text-align:center;
  background-color:cyan;
  color:black;
  opacity:0.1;
  transition: 1s;
  transform: all;
}

.utopia:hover{
  width:170px;
  height:50px;
  background-color:black;
  text-align:50% 50%;
  font-family:impact;
  color:white;
  text-shadow: 0px 0px 5px cyan ;
  opacity:1;
  font-size:24px;
  border-radius:50px;
  box-shadow: 0px 0px 10px darkcyan;
  transition: 1s;
  transform: all;
}


Faites un essai en copiant-collant tout cela sur votre forum pour voir ce que cela fait une fois que vous survolerez ce code.
A noter que vous pouvez utiliser cette astuce dans vos post mais aussi pour le graphisme de la page d'accueil, pour vos liens, vos titres... tout ~


III : Quelques fonctions :

Comme vous l'avez constaté, on a utilisé plusieurs fonctionnalité dans la feuille css, dans les balises d'utopia. Ici, je vais vous en expliquer quelques unes.
notez cependant que si une fonction ne doit pas changer au survol, il est possible tout simplement de ne pas la noter dans le :hover pour qu'elle ne soit pas prise en compte. Dans le :hover pour vous simplifier la vie donc, ne notez QUE ce qui doit changer. (les transitions et le temps de transition sont à remettre si vous voulez une animation allant du :hover vers la div normal (quand votre souris quitte l'animation en gros)).

width : la taille en px ;
height : la hauteur en px ;
background : peut recenser toute les infos ci-dessous ;
background-color : #couleurpipette ou codecouleur ;
background-image : url('lien de l'image allant sous le texte');
background-position: largeur puis hauteur en px ou en % pour positionner l'image de fond;
background-repeat : répéter --> no-repeat (pas de répétition du background) repeat-x (répéter sur les cotés) repeat-y (répéter en haut et en bas)

color : couleur du texte;
text-shadow : ombre du texte;
box-shadow : ombre du cadre de la div;
border : bordure du cadre de la div;
border-radius : bord-haut-gauche(en PX) bord-haut-droite(en PX) bord-bas-gauche(en PX) bord-bas-droite(en PX) ((dans cet ordre et pas dans un autre) OU XXpx (en ce cas les quatres bord auront le même radius).
transform : détermine ce qui changera du :hover à la balise en état normal; all signifie tout.
transition : détermine le temps de la transition (animation);
opacity : détermine la transparence;

margin : détermine l'espace extérieur entre la div et ce qui est autour;
padding : détermine l'espace entre les objets inclus dans la div et les bords intérieurs;

Voilà voilà ^^

Bonjour à vous les gens : ici donc on va parler des ombres. Pour se faire... il va falloir réviser les maths car celles-ci opèrent avec ce qu'on appelait au lycée voir au collège : les abscisses et les ordonnées.



Leçon 1 : Définition :

• A----Les abscisses (x) : La ligne horizontale. Les valeurs à gauche du zéro sont négatives et à sa droite : positive. (Ex : -10, -5, 0, 5, 10).
  
• B-----Les ordonnées (y) : La ligne verticale. Les valeurs positives sont initialement en haut tandis que celles du bas sont négatives.
  
• C-----Image : Pour vous projeter, regardez une image tirée de wikipédia : Ici.
  
  

  Spoiler:

Marre de la théorie ? Je vous comprend... Bon passons à la pratique en commençant par les ombres dans un texte.

Leçon 2 : Ombres Typographiques :

• A-----Le style :
  Peu importe que vous employez "div" "span" ou "p", l'astuce restera la même. Pour définir le détail de ces balises on emploi à un moment ou à un autre "style".
  Ce qui peut donner :

  Code:

  <div style="">Votre texte ici</div>

  
  Ou encore :

  Code:

  <span style="">Votre texte ici</span>

  
  Ou sinon :

  Code:

  <p style="">Votre texte ici</p>

  
  Quoi choisir ? J'en sais rien, et ce n'est certainement pas ici que vous l'apprendrez.
  
  
• B-----Nom de l'ombre :
  
  Il s'agit donc de nommer l'ombre du texte et en anglais on dit donc tout bêtement à notre stupide ordinateur "text-shadow". Vous devriez donc à cette partie-ci de l'exercice obtenir ceci :

  Code:

  <p style="text-shadow: x y w couleur;"> Votre texte, ici.</P>

  
  Note : Evidement les "x y w" Vont être les données à appliquer pour personnaliser l'ombre.
  
  
• C-----Application :
  Prêt à y appliquer la théorie vu plus haut ?
  
  Si on prend l'exemple noté ci-dessus, X désigne donc les abscisses, Y : les ordonnées. Pour le W enfin c'est nouveau : ce sera la largeur, diamètre, l'épaisseur de l'ombre, appelez ça comme vous le voulez.
  
  ce qui donne ceci :
  Exemple type d'une ombre dans une boite.

  Code:

  <p style="text-shadow:2px 2px 3px black;"> Exemple type d'une ombre pour un paragraphe.</p> 

  
  
  

  Spoiler:

Voilà pour la typo d'un texte. On peut cependant aussi ombrer les boites... Et sur les boites j'oserai dire qu'il y a encore plus à dire. une fois que vous aurez bien assimilé la façon de procéder pour diriger une ombre (cf : Application des ombres typographiques), vous aurez alors de quoi vous amusez avec ce qui suit :

Leçon 3 : Ombres appliquées aux boites :

• A-----Ombre unique :
  
  *** Pour obtenir ceci :
  
  On utilise ceci :
  

  Code:

   Box-shadow: 0px 0px 5px black;

  
  
  
  
  

  Ombre
  sur
  Boite
  
  
  
• B-----Ombres multiples
  
  Eh oui ça existe ! Exemple avec notre cher carré qui détient ici deux ombres : une jaune et une bleue :
  
  
  
  
  *** Pour cela on utilise une simple virgule, puis on rajoute la donnée de la seconde ombre. Attention : La seconde donnée va sous la première et les couleurs se fusionnent donc mieux vaut mettre l'ombre la plus petite en première.
  *** En toute logique vous pouvez ainsi rajouter plus de deux ombres ^^
  
  Ce qui donne :

  Code:

  Box-shadow: 0px 0px 15px yellow,0px 0px 20px blue;

  
  
  
• C-----Ombre interne :
  
  Dernière astuce... x_x
  L'ombre interne est une ombre applicable aussi aisément qu'une ombre supplémentaire.
  Exemple avec une ombre rouge (la bordure noire est mise pour montrer sur l'ombre est bien interne) :
  
  
  
  
  Pour cela in faudra juste ajouter inset à l'ombre que vous souhaitez mettre en intérieur, ce qui donne :

  Code:

  box-shadow: inset 0px 0px 10px RED ;

  Mise avec les autres cela donnerai ceci :

  Code:

  Box-shadow: 0px 0px 15px yellow , 0px 0px 25px blue , inset 0px 0px 10px RED ;

Astuce des ombres terminées, j'espère que ça servira à quelques uns d'entre vous o/