Kanala ✵ Tutos Codages

Ci-dessous vous trouverez quelques tutos codages, que je viendrais au fur et à mesure enrichir.
Du coup, ne postez pas à la suite, pour que le sujet reste propre  
Si vous avez des envies particulières, hésitez pas à me les demander par mp ! Je verrais alors ce que je peux faire pour vous  

Légende
Très très facile
Très facile
Facile
 Moyen
Difficile


Tuto 1 : Effet sur une image : redimensionner ✵ Lien ici          
Tuto 2 : Effet sur une image au survol, avec transition ✵ Lien ici        
Tuto 3 : Effet sur une image : formes ✵ Lien ici          
Tuto 4 : Effet sur une image : bordures ✵ Lien ici      
Tuto 5  : Effet sur une image : Ombres ✵ A venir
Tuto 6 :  Effet sur une image : arrondis ✵ A venir
Tuto 7 :  Effet sur une image : changer de couleur ✵ A venir
Tuto 8 : Effet sur une image : Flottement ✵A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir
Tuto  : Titre ✵ A venir

Niveau : très très facile    

Bonjour à tous

Je vais vous partager ici des petites astuces et "bouts" de codes pour faire quelques effets sur vos images. Vous allez voir, c'est vraiment très facile et abordable par tous ! Pas besoin d'être un pro pour comprendre ou pour les appliquer ! Allez go go go  

Pour illustrer, je me baserai sur cet avatar là, mais cela marche sur tout type d'image !

Spoiler:

Vous devez travailler en code HTML et non en BBCODE. (mais qu'est-ce qu'elle raconte celle là?  :hibou: ) En gros, vous ne codez pas comme ça

Code:

[img]URL DE l'IMAGE ICI[/img]

(Ci-dessus, du BBCode)

Mais comme ça,

Code:

<img src="URL DE L IMAGE ICI" />

(Ci-dessus du HTML)

J'attire votre attention sur quatre points !

En Html, ce qui "ferme" la balise img c'est le "/" qui se trouve dans les crochets. Alors oui, il n'est pas obligatoire et on peut s'en passer. Mais prenez l'habitude de le mettre quand même. C'est plus "propre" et correct.
L'URL de l'image doit se placer entre double guillemet sans aucun espace. On colle bien le lien, c'est très important.
 Dans la balise image, comme vous le verrez dans les différents tuto, on peut rajouter une class, un style, une taille etc. Si vous avez accès au Panneau d'admin et que vous pouvez mettre les codes en CSS, c'est le top du top, pour alléger votre code. Ainsi on fera appelle à une "class", fonction qui, pour le dire grossièrement, va appeler un code qui est insérer sur le site, et non à un "style", fonction qui, pour le dire grossièrement sera défini à un seul emplacement. L'avantage de la fonction class est que, si vous faites une modification dans le CSS du forum, cette modif s'appliquera sur l'ensemble des éléments qui appelle la dite class. Mais on s'écarte du sujet  :dent:
Pour les personnes ayant accès au panneau, pour la suite de ce tuto, nous appliquerons une class que je vais appeler... EffetImg sur l'image. Le code de l'image sera donc le suivant :

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Et dans votre feuille css, vous devez donc insérer

Code:

.EffetImg{
}

Entre les accolades, nous mettrons les paramètres des codes

C'est l'un des éléments de base de travail sur une image. Beaucoup d'entre vous savent comment faire mais certains absolument pas, alors on va reprendre tout depuis le début.

Vous avez trois moyens de redimensionner une image (enfin non, il y en a plus, mais ici, je vous en détaillerai que trois, c'est déjà bien

Prenons donc notre image de base, sans class ni style :

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" />

Je voudrais que mon avatar ne fasse plus 200*320px, mais qu'il fasse en largeur... hmm disons 100px.

METHODE 1 : J'applique directement, comme une brute - parce que je suis comme ça moi ! - un width. Et bim ! Heu c'est quoi ce truc? "width" c'est la fonction en gros, qui défini la largeur. son équivalent pour la hauteur c'est "height". Retenez bien ces deux fonctions car vous le verrez partout en html/css  Pour l'appeler "brutalement", vous devez la taper, mettre un =, des doubles guillemets et mettre la taille entre les doubles guillemets

Code:

width="100px;"

Ce qui nous donne donc un code FINAL pour l'image

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" width="100px;" />

et un rendu :


Je n'ai, ici, pas paramétrer la hauteur, qui, elle va s'ajuster automatique vis à vis de la largeur (c'est beau !).

METHODE 2 : J'ai décidé de faire ça moins brutalement, et surtout, vu que je vais appliquer d'autres styles/effets sur mon image, autant tout bien mettre au même endroit. Donc, je vais faire appel à une class ou un style
Le principe est quasiment le même. C'est le même nom pour la largeur et la hauteur, width / height eux, ne changent pas. C'est la manière de les appeler qui va changer.

Pour ceux n'ayant pas accès au panneau, on va donc appliquer un style à l'image dans lequel nous allons définir la largeur. On prend bien garde aux doubles guillemets ET au point-virgule qui "termine" la ligne de code. En gros, entre les doubles guillemets, vous allez insérer tous les effets que vous voulez sur l'image.

Code:

style="width:100px;"

Ce qui nous donne donc un code FINAL pour l'image

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" style="width:100px;" />

et un rendu :


Pour ceux ayant accès au panneau, on va donc ajouter dans notre code css les paramètres de taille

Code:

width:100px;

Ce qui nous donne donc un code FINAL pour le css

Code:

.EffetImg{
width:100px;}

METHODE 3 : Mon image se trouve dans une div !

 Pour ceux ayant accès au panneau redimensionner une image se trouvant déjà dans une div ayant une class, qu'on a déjà paramétrer. Autant alléger le code brut et rendre le tout plus ergonomique.
Le code de notre image ne change pas

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" />

mais cette image se trouve dans une balise div ! (ici ce serait "Presa" son petit nom

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Dans le css, nous laissons la class de base tranquille. Votre .Presa ne change pas. Nous allons faire appel à ou aux images qui se trouvent dans cette div via img

Code:

.Presa img {
}

Je dis bien à ou aux images car s'il y a plusieurs images ans cette div, la modification va s'appliquer sur TOUTES les images présentes. Cela est utile si, par exemple pour une présentation, vous voulez que toutes les images, peu importe leur taille de base, fasse100px de hauteur par exemple. Mon code sera donc :

Code:

.Presa img {
height:100px;}

Pour un rendu :


Exemple avec plusieurs images :

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

 je n'ai pas accès au Panneau
Le code de notre image ne change pas

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" />

mais cette image se trouve dans une balise div ! (ici ce serait "Presa" son petit nom

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Code, auquel on rajoute un style qui va faire office de css, dont tous les paramètres doivent se suivre

Code:

<style>.Presa img{Vos paramètres ici en langage CSS MAIS sans aucun saut de lignes pour aérer. Tout doit être sur une même ligne, effets séparés par des points virgules}</style>

Ce qui nous donnera un code final

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>
<style>.Presa img{height:100px;}</style>

Vous pouvez très bien :
Redimensionner votre image via la hauteur et non la largeur. Pour cela, vous remplacez tous les "width" par des "height".
Redimensionner votre image via la hauteur et la largeur (et donc déformer votre image). Pour cela vous devez utiliser ET width, ET height

Code:

width="100px;" height="100px;"

Code:

style="width:100px;height:100px;"

Code:

.EffetImg{
width:100px;
height:100px;}

Code:

.Presa img {
width:100px;
height:100px;}

Je finirai par vous donner un conseil : surtout essayez, même si vous devez vous planter. C'est comme ça qu'on apprend    Sur ces belles paroles, je vous laisse et je m'en vais vous préparer un autre tuto sur les effets que vous pouvez faire sur des images. Kiss sur vous  

Et bien sur, si vous avez des questions / remarques / suggestions, n'hésitez pas !  :string:

Niveau : très facile    

Bonjour à tous

Je vais vous partager ici des petites astuces et "bouts" de codes pour faire quelques effets sur vos images. Vous allez voir, c'est vraiment très facile et abordable par tous ! Pas besoin d'être un pro pour comprendre ou pour les appliquer ! Allez go go go  

Pour illustrer, je me baserai sur cet avatar là, mais cela marche sur tout type d'image !

Spoiler:

Vous devez travailler en code HTML et non en BBCODE. (mais qu'est-ce qu'elle raconte celle là?  :hibou: ) En gros, vous ne codez pas comme ça

Code:

[img]URL DE l'IMAGE ICI[/img]

(Ci-dessus, du BBCode)

Mais comme ça,

Code:

<img src="URL DE L IMAGE ICI" />

(Ci-dessus du HTML)

J'attire votre attention sur quatre points !

En Html, ce qui "ferme" la balise img c'est le "/" qui se trouve dans les crochets. Alors oui, il n'est pas obligatoire et on peut s'en passer. Mais prenez l'habitude de le mettre quand même. C'est plus "propre" et correct.
L'URL de l'image doit se placer entre double guillemet sans aucun espace. On colle bien le lien, c'est très important.
 Dans la balise image, comme vous le verrez dans les différents tuto, on peut rajouter une class, un style, une taille etc. Si vous avez accès au Panneau d'admin et que vous pouvez mettre les codes en CSS, c'est le top du top, pour alléger votre code. Ainsi on fera appelle à une "class", fonction qui, pour le dire grossièrement, va appeler un code qui est insérer sur le site, et non à un "style", fonction qui, pour le dire grossièrement sera défini à un seul emplacement. L'avantage de la fonction class est que, si vous faites une modification dans le CSS du forum, cette modif s'appliquera sur l'ensemble des éléments qui appelle la dite class. Mais on s'écarte du sujet  :dent:
Pour les personnes ayant accès au panneau, pour la suite de ce tuto, nous appliquerons une class que je vais appeler... EffetImg sur l'image. Le code de l'image sera donc le suivant :

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Et dans votre feuille css, vous devez donc insérer

Code:

.EffetImg{
}

Entre les accolades, nous mettrons les paramètres des codes

Vous avez tous pus constater, parfois, lorsqu'on survole une image, un effet se produit. Ici, je ne vais pas vous parler des effets qui peuvent arriver sur une image mais comment vous pouvez coder ses effets. C'est vraiment ici la base basique, nous allons dire ça comme ça en bon français... sors

Prenons donc notre image de base, sans class ni style :

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" />

Je voudrais donc rajouter un effet quand je passe ma souris/pointeur dessus. Pour ce tuto, on va prendre comme effet, une diminution de sa taille (en nous basant sur le tuto 1 ).

Deux méthodes pour cela :

METHODE 1 :

Etape 1 : J'apprends le code lié au survol. Car oui, sans ce bout de code, vous n'arriverez à rien. Il s'agit ici du "hover". A noter qu'il ne peut pas se mettre directement dans un champ style (sinon ce serait trop facile). Nous devons pour cela nous baser sur une class. Ici je reprendrais celle défini ci-dessus. Ne vous en faites pas, si vous n'avez pas accès au panneau, il existe un moyen de l'appliquer quand même, que nous allons voir ci-dessous

Pour ceux n'ayant pas accès au panneau, nous allons donc avoir besoin d'une class à définir sur l'image, ici, elle s'appellera "EffetImg"

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Avec le lien de l'image, cela donne donc :

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>

Code, auquel on rajoute un style qui va faire office de css, dont tous les paramètres doivent se suivre

Code:

<style>.EffetImg{Vos paramètres ici en langage CSS MAIS sans aucun saut de lignes pour aérer. Tout doit être sur une même ligne, effets séparés par des points virgules}</style>

Par exemple si j'ai décidé, comme dans le tuto 1 de redimensionner mon avatar, j'aurais donc en code final

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>
<style>.EffetImg{width:150px;}</style>

Pour un rendu :



Revenons donc à notre survol et le fameux "hover". Nous devons l'appliquer comme ci-suit :

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>
<style>.EffetImg{width:150px;} .EffetImg:hover{ICI on va mettre les codes qui s'appliqueront au survol}</style>

Vous devez donc reprendre le nom de la class appliqué sur l'image, et ajouter le code ":hover". Vous paramétrez comme une nouvelle class... Enfin un class qui va dépendre de la première quoi qu'il arrive

Allez, on fait un essai. Au survol, je veux que l'image passe de 150px de large à 100px !

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>
<style>.EffetImg{width:150px;} .EffetImg:hover{width:100px;}</style>

Pour un rendu



Pouah, ok, ok, ça change mais c'est brutal comme changement... Et c'est là qu'interviennent les fameuses transitions. Je ne vais pas rentrer dans les détails les gars, simplement vous parler de celle qui va "timer" le passage du avant/après le survol de la souris. Pour avoir un peu plus de douceur -donc - dans ce monde de bruts, nous allons utiliser... Tout simplement "transition"

Code:

transition: XyZs;

Nous allons remplacer XyZ par une valeur numérique. On peut faire sans problème des décimales pour augmenter ou diminuer la durée de la transition. ATTENTION cependant, ce sera avec un "X.Y" et non pas une virgule "X,Y". Et on garde bien le s final ! Plus le chiffre sera grand et plus la transition mettra du temps à se faire. Par exemple

Code:

transition: 1.2s;

Ce code se passe dans la class de "base". Donc pas celle sur laquelle on a le hover.

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>
<style>.EffetImg{width:150px;transition: 1.2s;} .EffetImg:hover{width:100px;}</style>

Pour un rendu :



C'est quand même bien plus sympas vous ne trouvez pas?   Bien sur, il existe d'autres codes de transition, mais là, comme dit plus haut, je ne rentre pas du tout dans les détails et on fait au plus simple ^^ Allez, des petits exemples avec des transitions de différentes vitesses, du plus rapide, au plus lent. :héhé2:



En code de transition nous avons donc dans cet ordre : 0.5s;  / 1.0s; / 2.0s;  :aha:

Pour ceux ayant accès au panneau, ce sera exactement les mêmes codes, seulement vous, vous n'avez pas besoin de mettre du style dans votre code, puisque cela sera fait dans votre CSS  :héhé2:
Le code dans le sujet sera donc

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>

Et celui de votre Css

Code:

.EffetImg{
width:150px;
transition: 1.2s;}

.EffetImg:hover{
width:100px;}

METHODE 2 : Mes images sont dans une div

Comme dans le premier tuto, si vos images sont dans une div, vous pouvez faire appel à cette div pour modifier votre image. Nous reprendrons le même nom que dans le tuto 1

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Si vous avez accès au panneau, les codes sont quasiments les mêmes que vu au dessus, seulement vous allez faire appel à l'image, donc

Code:

.Presa img {
Paramètres ici;}

auquel, on ajoute pour le survol :hover (vous l'avez compris )

Code:

.Presa img {
Paramètres ici;}

.Presa img :hover{
Paramètres ici;}

ATTENTION, comme indiqué dans le premier tuto, cela aura une incidence sur TOUTES les images présentes dans la div

Si vous n'avez pas accès au panneau, les codes sont quasiments les mêmes que vu au dessus, seulement vous allez faire appel à l'image, donc, votre code ressemblera à cela, avec un ajout dans le style (n'oubliez pas, ne faites pas de sauts de lignes, mais collez tout !)

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>
<style>.Presa img{Paramètres ici;} .Presa img:hover{Paramètres ici;}</style>

ATTENTION, comme indiqué dans le premier tuto, cela aura une incidence sur TOUTES les images présentes dans la div

Je finirai par vous donner un conseil : surtout essayez, même si vous devez vous planter. C'est comme ça qu'on apprend    Sur ces belles paroles, je vous laisse et je m'en vais vous préparer un autre tuto sur les effets que vous pouvez faire sur des images. Kiss sur vous  

Et bien sur, si vous avez des questions / remarques / suggestions, n'hésitez pas !  :string:

Niveau : très très facile    

Bonjour à tous

Je vais vous partager ici des petites astuces et "bouts" de codes pour faire quelques effets sur vos images. Vous allez voir, c'est vraiment très facile et abordable par tous ! Pas besoin d'être un pro pour comprendre ou pour les appliquer ! Allez go go go  

Pour illustrer, je me baserai sur cet avatar là, mais cela marche sur tout type d'image !

Spoiler:

Vous devez travailler en code HTML et non en BBCODE. (mais qu'est-ce qu'elle raconte celle là?  :hibou: ) En gros, vous ne codez pas comme ça

Code:

[img]URL DE l'IMAGE ICI[/img]

(Ci-dessus, du BBCode)

Mais comme ça,

Code:

<img src="URL DE L IMAGE ICI" />

(Ci-dessus du HTML)

J'attire votre attention sur quatre points !

En Html, ce qui "ferme" la balise img c'est le "/" qui se trouve dans les crochets. Alors oui, il n'est pas obligatoire et on peut s'en passer. Mais prenez l'habitude de le mettre quand même. C'est plus "propre" et correct.
L'URL de l'image doit se placer entre double guillemet sans aucun espace. On colle bien le lien, c'est très important.
 Dans la balise image, comme vous le verrez dans les différents tuto, on peut rajouter une class, un style, une taille etc. Si vous avez accès au Panneau d'admin et que vous pouvez mettre les codes en CSS, c'est le top du top, pour alléger votre code. Ainsi on fera appelle à une "class", fonction qui, pour le dire grossièrement, va appeler un code qui est insérer sur le site, et non à un "style", fonction qui, pour le dire grossièrement sera défini à un seul emplacement. L'avantage de la fonction class est que, si vous faites une modification dans le CSS du forum, cette modif s'appliquera sur l'ensemble des éléments qui appelle la dite class. Mais on s'écarte du sujet  :dent:
Pour les personnes ayant accès au panneau, pour la suite de ce tuto, nous appliquerons une class que je vais appeler... EffetImg sur l'image. Le code de l'image sera donc le suivant :

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Et dans votre feuille css, vous devez donc insérer

Code:

.EffetImg{
}

Entre les accolades, nous mettrons les paramètres des codes

Pour faire une forme sur une image, c'est extrêmement simple. Je vais vous filer une astuce que j'ai trouvé un peu par hasard... Un site qui vous génère directement ce que vous voulez. Ouais, on a vu beaucoup plus dur, on est d'accord Le site en question est Clippy. Il est très intuitif, et il n'y a vraiment aucune difficulté à l'utiliser. Pour voir le rendu en temps réel, n'hésitez pas à insérer URL de l'image sur laquelle vous voulez voir appliquer le rendu et ses dimensions exactes

Pour ma part, j'ai décidé de faire un triangle, mais inversé. J'ai donc choisi, à gauche, la forme triangle et j'ai ramené le point vert en haut à gauche, le orange, en haut à droite et rose/rouge au milieu en bas. En les bougeant, sur le code proposé, les % ont aussi bougé et le site me donne en code :

Code:

clip-path: polygon(50% 100%, 0 0, 100% 0);

Ok c'est bien beau, mais j'en fais quoi maintenant de ce bout de code?
Et bien c'est simple, vous allez l'appliquer sur votre image, tout simplement
Pour tous, que vous avez accès ou non au panneau, ce code ne marche pas en style, mais uniquement en class (je sais c'est chiant, mais c'est pas non plus un si gros problème que ça, vous allez voir :aha:

Pour les personnes n'ayant pas accès au panneau, le code sera  

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" class="EffetImg"/>

Auquel nous devons apporter un complément (à placer en toute fin de votre message, ou au tout début - ne s'insérez pas au milieu, vous aller le/vous paumer)

Code:

<style>.EffetImg{clip-path: polygon(50% 100%, 0 0, 100% 0);}</style>

Pour les personnes ayant accès au panneau, le code de l'image sera le même et le css aussi, même si vous devez vous débarrasser des balises style

Code:

.EffetImg{
clip-path: polygon(50% 100%, 0 0, 100% 0);}

Ce qui donnera... TADAMMM ! (que c'est beau, j'en suis émue  :pleure: )



Cette forme peut s'appliquer sur l'image de base, ou sur un survol, ou les deux :héhé2: Vous pouvez jouer avec sans aucun problème ! Par exemple, j'ai décidé de changerla forme au survol de l'image

Je finirai par vous donner un conseil : surtout essayez, même si vous devez vous planter. C'est comme ça qu'on apprend    Sur ces belles paroles, je vous laisse et je m'en vais vous préparer un autre tuto sur les effets que vous pouvez faire sur des images. Kiss sur vous  

Et bien sur, si vous avez des questions / remarques / suggestions, n'hésitez pas !  :string:

Niveau : facile mais demande de l'attention  

Bonjour à tous

Je vais vous partager ici des petites astuces et "bouts" de codes pour faire quelques effets sur vos images. Vous allez voir, c'est vraiment très facile et abordable par tous ! Pas besoin d'être un pro pour comprendre ou pour les appliquer ! Allez go go go  

Pour illustrer, je me baserai sur cet avatar là, mais cela marche sur tout type d'image !

Spoiler:

Vous devez travailler en code HTML et non en BBCODE. (mais qu'est-ce qu'elle raconte celle là?  :hibou: ) En gros, vous ne codez pas comme ça

Code:

[img]URL DE l'IMAGE ICI[/img]

(Ci-dessus, du BBCode)

Mais comme ça,

Code:

<img src="URL DE L IMAGE ICI" />

(Ci-dessus du HTML)

J'attire votre attention sur quatre points !

En Html, ce qui "ferme" la balise img c'est le "/" qui se trouve dans les crochets. Alors oui, il n'est pas obligatoire et on peut s'en passer. Mais prenez l'habitude de le mettre quand même. C'est plus "propre" et correct.
L'URL de l'image doit se placer entre double guillemet sans aucun espace. On colle bien le lien, c'est très important.
 Dans la balise image, comme vous le verrez dans les différents tuto, on peut rajouter une class, un style, une taille etc. Si vous avez accès au Panneau d'admin et que vous pouvez mettre les codes en CSS, c'est le top du top, pour alléger votre code. Ainsi on fera appelle à une "class", fonction qui, pour le dire grossièrement, va appeler un code qui est insérer sur le site, et non à un "style", fonction qui, pour le dire grossièrement sera défini à un seul emplacement. L'avantage de la fonction class est que, si vous faites une modification dans le CSS du forum, cette modif s'appliquera sur l'ensemble des éléments qui appelle la dite class. Mais on s'écarte du sujet  :dent:
Pour les personnes ayant accès au panneau, pour la suite de ce tuto, nous appliquerons une class que je vais appeler... EffetImg sur l'image. Le code de l'image sera donc le suivant :

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Et dans votre feuille css, vous devez donc insérer

Code:

.EffetImg{
}

Entre les accolades, nous mettrons les paramètres des codes

Les bordures s'appellent avec "border". C'est un code que vous avez surement dû voir, principalement sur des div. Bonne nouvelle, cela marche aussi sur les images. C'est beau quand même la vie haha ! Il existe plusieurs manières d'appeler une bordure. Ici, je vous parlerai de celle qui regroupe directement TOUS les paramètres, des paramètres que vous pouvez décomposer en plusieurs bouts de codes... Mais vous commencez à me connaitre et j'aime bien alléger les codes. Moins on peut en mettre, mieux c'est

Allez c'est parti !

Code:

border: XyZpx CHOIX DE LA BORDURE #COULEUR;

Ok ok, ça ressemble pas à grand chose comme ça, donc je vais vous donner un exemple et ensuite, je rentre dans les détails

Code:

border:2px solid #000000;

Là déjà, on y voit plus clair. Je vous détaille donc ce bout de code :
border, le nom de la balise donc
XyZpx / 2px : la taille de la bordure. Plus vous augmentez la valeur, plus la bordure sera grosse
CHOIX DE LA BORDURE / solid : choix donc du style de la bordure - je vous les détaille juste en dessous ! -
 #COULEUR / #000000 : couleur de la bordure.

Les types de "traits" de bordure
Vous avez le choix de faire différents styles de bordures. Je vous met les 4 les plus utilisées : solid, dotted, dashed et double, dans cet ordre sur les images


Les types de direction de bordure
Ok, je vous ai pas perdu si vous êtes encore là et c'est beau  :**: Vous pouvez paramétrer un petit peu plus vos bordures, en définissant leur "direction". Ce que j'entends par là, c'est que vous pouvez décider si vous voulez une bordure en haut, ou à gauche, ou à droite, ou en bas, ou deux/trois/quatre avec des styles différentes... Ok ok là vous êtes   mais vous allez comprendre c'est promis !

Le code est le suivant :

Code:

border-DIRECTION: XyZpx CHOIX DE LA BORDURE #COULEUR;

Pour une bordure sur le haut, le code sera le même, seulement on colle "top" après "border-" (on fait attention à bien garder le tiret !)
Pour une bordure sur le bas, le code sera le même, seulement on colle "bottom" après "border-" (on fait attention à bien garder le tiret !)
Pour une bordure sur la droite, le code sera le même, seulement on colle "right" après "border-" (on fait attention à bien garder le tiret !)
Pour une bordure sur la gauche, le code sera le même, seulement on colle "left" après "border-" (on fait attention à bien garder le tiret !)


Top = haut - Bottom = bas - right=droite - left = gauche

Comme évoqué plus haut, vous pouvez cumuler les bordures, avec des effets différents. Par exemple, je veux une bordure Dashed en 6px de taille sur le haut en bleu + un solid 1px sur la droite en vert + en bas je veux aucune bordure + à gauche, je veux du rouge en double, en 3px.



Cela donne donc en code, pour du CSS :

Code:

border-top: 6px dashed #3366FF;
border-right: 1px solid #00FF00;
border-left: 3px double #FF0000;
width:50px;

Cela donne donc en code, pour du style:

Code:

border-top: 6px dashed #3366FF; border-right: 1px solid #00FF00; border-left: 3px double #FF0000;width:50px;

Du coup, si je reprends mes balises images

METHODE 1 : mon image n'est pas dans une balise div

J'ai accès au panneau d'administration
Le code de mon image reste inchangé, avec sa class, que l'on a définit au préalable. Ici pour ce tuto :

Code:

<img src="URL DE L IMAGE ICI" class="EffetImg"/>

Dans mon css, je reprends donc le nom de ma class, et je lui donne les paramètres de bordure que je désire

Code:

.EffetImg{
Mes paramètres, un par ligne, séparés par un ; à la fin de chaque ligne}

(voir plus haut pour un exemple de css codé)

Je n'ai pas accès au panneau d'administration
Nous allons devoir insérer un style sur l'image directement, avec les paramètres à l'intérieur :  

Code:

<img src="URL DE L IMAGE ICI" style="ici les paramètres de bordure que je désire, séparé par un ; TOUS les paramètres sont à mettre sur une même ligne. On fait attention à ce qu'il y ait bien les doubles guillemets après le égal (=) du style et AVANT le slash (/) final />

Voir plus haut pour un exemple de paramètres en style

METHODE 2 : mon/mes image.s est/sont dans une balise div

Je dis bien mon ou mes images car s'il y a plusieurs images dans cette div, la modification va s'appliquer sur TOUTES les images présentes. Cela est utile si, par exemple pour une présentation, vous voulez que toutes les images aient la même bordure.  

 Pour ceux ayant accès au panneau ajouter une bordure sur une image se trouvant déjà dans une div ayant une class, qu'on a déjà paramétré. Autant alléger le code brut et rendre le tout plus ergonomique.

Le code de notre image ne change pas

Code:

<img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" />

mais cette image se trouve dans une balise div ! (ici ce serait "Presa" son petit nom

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Dans le css, nous laissons la class de base tranquille. Votre .Presa ne change pas. Nous allons faire appel à ou aux images qui se trouvent dans cette div via img

Code:

.Presa img {
Paramètres ici des bordures voulues, un paramètre par ligne, avec un point virgule à la fin de chaque ligne}

Pour un rendu, :




Exemple avec plusieurs images :


Mon code image

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Mon CSS

Code:

.Presa img{
border-top: 2px solid #FF0000;
}

Je n'ai accès au panneau d'administration. Le code de notre image ne change pas

Code:

<img src="URL DE VOTRE IMAGE ICI" />

mais cette image se trouve dans une balise div ! (ici ce serait "Presa" son petit nom

Code:

<div class="Presa"><img src="URL DE VOTRE IMAGE ICI" /></div>

Code, auquel on rajoute un style qui va faire office de css, dont tous les paramètres doivent se suivre

Code:

<style>.Presa img{Vos paramètres ici en langage CSS MAIS sans aucun saut de lignes pour aérer. Tout doit être sur une même ligne, effets séparés par des points virgules}</style>

Ce qui nous donnera un code final

Code:

<div class="Presa"><img src="URL DE VOTRE IMAGE ICI" /></div>
<style>.Presa img{Vos paramètres ici en langage CSS MAIS sans aucun saut de lignes pour aérer. Tout doit être sur une même ligne, effets séparés par des points virgules}</style>

Par exemple :

Code:

<style>.Presa img{border-top: 2px solid #FF0000;width:50px;}</style>

Exemple avec plusieurs images :

Code:

<div class="Presa"><img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /> <img src="https://i.ibb.co/YXj1qbR/Amber-Heard11.png" /></div>

Ca y est, je vous ai récupéré?  Coool, car la partie bordure est finie. Dans les deux prochains tutos, je vous parlerai du Radius et des ombres  :héhé2:

Ils existent une multitude de site qui peuvent vous générer directement les ombres, les bordures, et les radius que vous voulez. Pour cela, vous tapez sur google "generator border" ou "generator radius" ou "generator shadow" et vous tomberez dessus. Ici, je ne vous en donne pas, car il est important de comprendre leur fonctionnement et qu'une fois que c'est le cas, ces sites ne sont pas utiles

Comme indiqué en sous-titre, ce que vous avez appris ici s'appliquent aussi sur les div directement.

Vous pouvez appliquer cela sur des survols aussi  Pour cela je vous renvoi au tuto 2 !

Je finirai par vous donner un conseil : surtout essayez, même si vous devez vous planter. C'est comme ça qu'on apprend    Sur ces belles paroles, je vous laisse et je m'en vais vous préparer un autre tuto sur les effets que vous pouvez faire sur des images. Kiss sur vous  

Et bien sur, si vous avez des questions / remarques / suggestions, n'hésitez pas !  :string: