Encadrement de base avec Bordures

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;">&amp;nbsp ;&lt; /p&gt;

</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>

<p style="text-align: center;">&amp;nbsp ;&lt; /p&gt;

</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;">&amp;nbsp ;&lt; /p&gt;

</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>

<p style="text-align: center;">&amp;nbsp ;&lt; /p&gt;

</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;">&amp;nbsp ;&lt; /p&gt;

</p><p be3="" color:="#000000" style="text-align: center;"><span>ECRIRE TEXTE</span></p>

<p style="text-align: center;">&amp;nbsp ;&lt; /p&gt;

</p><p></p></div></div>

===============OUTILS =============

https://www.w3.org/TR/css-backgrounds-3/#corner-transitions

https://www.entheosweb.com/tutorials/css-borders-tutorial/

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061337-creez-des-bordures-et-des-ombres

https://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-

shadow.html

https://www.devenir-webmaster.com/tuto/html-css/les-ombres-en-css/

https://htmlcolorcodes.com/ 

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 

https://front-end-tools.com/en/generateBorder/

MAINTENANT A VOUS FAIRE LE RESTE  ET LE  PERSONALISER.

=============================================================

Si c'est trop compliquer pour vous je vous suggere d'aller voir  Dalila je sais quelle fait des merveilles avec des cadres stylé,  elle est populaire dans ce domaine.  A part ca je sais plu si d'autres filles en font aussi mais cest Dalila qui revient  souvent tous comme Maryse pour les magnifiques kits pour vos blogs. Ya  Ghislaine avec sont grand coeur qui aime aider  dans le simplicisme. VOila petite pub rapido . (VOir grille en haut).