[HTML] Codages images

Inscription : 03/11/2017
Messages : 271
DC : M'gann M'orz & Queen Clea
Situation : Procureur
Localisations : Los Angeles
MessagePosté le: Lun 26 Fév - 19:52
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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité

MessagePosté le: Lun 26 Fév - 20:18
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.
Revenir en haut Aller en bas
 

[HTML] Codages images

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» héberger et partager ses images avec photobucket
» mettre une image renvoyant à un lien en html
» Images dans un mail (HTML) - Télechargement automatique ?
» Bibliothèque d'images
» Chasseur d'Images N°323 - Mai 2010

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
DC Earth - Forum RPG Comics :: Plateforme joueurs :: Hors-jeu :: Parlons RPG-