C'EST ICI QUE VOUS AJOUTEZ LE CODE BORDURE AVEC LE FOND , SI VOUS EN VOULEZ ENCORE UN AUTRE SAUTÉ UNE LIGNE ET AJOUTER LE MEME CODE
EXEMPLE
Vous êtes plusieurs a me demander comment faire un encadrement avec un fond. Je vais pas tous vous donnez mais vous aurez tous les outils de base pour creez vous même vos propres modeles personalisable. en ajouter des ombres, des boutons, des images, des liens cliquables des menus etc...
Copier le Code et allez le coller pour crée votre modele.
---- CODE ENCADREMENT SMPLE ET FACILE ----
<div style="padding: 10px;">
<div style="background-color: #63c9d1; border-radius: 2px; border:20px double; padding: 26px; width: auto;">
---------------------------------------CODE HTML------------------------------------------------------
Coller le code du haut dans Le code PAGE/NOUVEAU ouMESSAGE/NOUVEAU cliquez sur la petite fleche comme montre la capture en-bas
Sivous voulez plus de cadre et fond vous ajoutez le code (voir juste en-bas)
-------CODE------------------ AJOUT BORDURE + FOND ---------------------
<div style="background-color: #63c9d1; border-radius: 8px; border: 20px double; width: auto;">
=============================================
Pour voir le resultat cliquez sur Vue Nouveau Message.
![]() |
ET vous pouvez changer la couleur ecriture et ajouter du contenu en etant sur votre message texte ne fiez pas a l'encadrement qui montre le vrai resultat est celui qui donne sur votre blog. ALlez voir l'apercu qui ce trouve sur votre droite
===================TRAITS========================
Solid= Une Ligne
Double= Double ligne
Dashed= Trait
Dotted+ Pointillé
Inset= Bordure Creuse
Outset= Surlever style bomber biseau
Ridge= style bouton
Pour voir des exemples des traits bordures https://www.tutorialrepublic.com/css-tutorial/css-border.php
---------------------FOND ARRIERE PLAN 2 FONDS avec bordures -----------------
C'est un peu compliquer faut changer une partie du code mais pour pas vous decouragez je vous suggere faire en fond couleur. Sinon, voici le code:
<div style="background-color: #63c9d1; background-image: url('URL IMAGE FOND 1'); border-radius: 30px 30px 30px 3Opx; border: 20px double; height: 100%; padding: 30px;">
<div style="background-image: url('URL IMAGE FOND 2'); border-radius: border-radius: 20px 20px 20px 2Opx; border: 10px double; height: 100%; padding: -20px;">
<p style="text-align: center;">&nbsp ;< /p>
</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>
<p style="text-align: center;">&nbsp ;< /p>
</p><p></p></div></div>
======== FOND ARRIERE PLAN 1 FOND et 1 bordure ==================
<div style="background-image: url('URL FOND IMAGE'); border-radius: border-radius: 22px 22px 22px 22px; border: 10px double; height: 100%; padding: -20px;">
<p style="text-align: center;">&nbsp ;< /p>
</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>
<p style="text-align: center;">&nbsp ;< /p>
</p><p></p></div></div>
===========FOND COULEUR+ FOND IMAGE ET BORDURES =================
<div style="background-color: #a1e4b4; border-radius: 30px 30px 30px 3Opx; border: 20px double; height: 100%; padding: 30px;">
<div style="background-image: url('URL IMAGE FOND'); border-radius: border-radius: 20px 20px 20px 2Opx; border: 10px double; height: 100%; padding: -20px;">
<p style="text-align: center;">&nbsp ;< /p>
</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>
<p style="text-align: center;">&nbsp ;< /p>
</p><p></p></div></div>
===============OUTILS =============
https://gifer.com/en/gifs/glitter (Glitters)
https://en.picmix.com/stamp/search/glitter (Glitters)
https://developer.mozilla.org/fr/docs/Web/CSS/border-radius (coin arrondie)
=====AUTRES==CSS ===========
Sa peut vous servir de modele de base
MAINTENANT A VOUS FAIRE LE RESTE ET LE PERSONALISER.