-63%
Le deal à ne pas rater :
Aspirateur balai sans fil Xiaomi Dreame V10 2-en-1
219 € 599 €
Voir le deal

 

 [HTML] Codages images

Kate S.K./Manhunter VIII
Kate S.K./Manhunter VIII
Super-Héros
Inscription : 03/11/2017
Messages : 635
DC : M'gann M'orz & Queen Clea & Mary Marvel
Situation : Ancienne Procureur de Los Angeles et de Gotham. Ancienne avocate pour méta-humains. Aujourd'hui Cavalier Blanc du Roi Blanc Mr Bones à Checkmate. Toujours à la chasse aux métas...
Localisations : Los Angeles, Suisse
Groupes : Anciennement JSA, Freedom Fighters, DEO. Actuellement Ckeckmate, les Birds of Prey et la JLA.
JLA

Feuille de personnage
Inventaire:
MessagePosté le: Lun 26 Fév 2018 - 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>


Présentation - PNJs - Liens - Fiche RP - SMS - Checkmate



"SHE STALKS THE WORLD'S MOST DANGEROUS GAME"

Revenir en haut Aller en bas
Invité

MessagePosté le: Lun 26 Fév 2018 - 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

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 du Forum et du RPG-