[HTML] Codages images

Codages images

Afin d'apporter un peu de régularités à vos images dans vos RPs (ou autres sujets comme la sign), ou vous amusez avec quelques effets, je vous partage les codages HTML ici.
Le HTML est un poil complexe, parfois ça bug ça raisons logiques, mais ça permet de bien améliorer les mises en page pour une lecture plus originale.

Intégration d'une image avec une largeur définie + bordure + ombre :
Ce que je recommande, permettant des images régulières dans les rps et pas de toutes tailles, notamment avec le bandeau gris. Mais attention parfois l'image ne passe pas et est déformée.

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 300px; border:solid 5px red; box-shadow:3px 3px 5px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur et une hauteur définie :
Pour corriger manuellement un bug de déformation (voir plus haut), attention à trouver les bonnes dimensions.
width = largeur
height = hauteur

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; height: 285px; border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + effet gris :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: grayscale(50%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: grayscale(100%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + effet sepia :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: sepia(50%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: sepia(100%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + modification luminosité :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: brightness(150%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: brightness(300%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + modification contraste :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: contrast(150%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: contrast(300%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + modification couleurs :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: hue-rotate(90deg); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: hue-rotate(180deg); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: hue-rotate(300deg); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + couleurs inversées :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: invert(100%); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + flou :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; filter: blur(5px); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Intégration d'une image avec une largeur définie + bordure + ombre + opacité :

Code:: <center><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/ggvvtsrh7lhw8yuqs3ey.png" style="width: 500px; opacity: 0.5; filter: alpha(opacity=50); border:solid 10px #0A122A; box-shadow:5px 5px 10px rgba(0,0,0,1);" /></center>

Et bravo et merci pour ce petit cours qui je pense aidera ceux qui comme moi n'y connaise rien en codage et même à d'autres peut-être.