• 28.02.2024

    Une visiteuse voudrait savoir faire des cadres pour présenter ses montages alors, voici une présentation du principe, que chacun pourra adapter à ses goûts.

    Tout d'abord, il faut définir les dimensions du cadre principal; j'ai choisi une largeur de 800px mais je n'ai pas réussi à adapter automatiquement la hauteur: ça sera à vous de l'adapter !

    <div style="width: 800px; height: 400px; margin: 50px auto; text-align: center; background: url('http://ekladata.com/dzudiwr0_MkigTczHWmNla9EMbY.jpg'); border: 1px solid black; box-shadow: inset 4px 4px 8px black, inset -4px -4px 8px black; border-radius: 50px;">
    &nbsp;
    </div>

     


    Explication du code:

    width:800px;  largeur du cadre, sans la bordure de 800px.

    height:400px; pour l'exemple, hauteur à définir selon votre montage.

    margin:50px auto; l'espacement au dessus et en dessous du cadre est de 50px et il se centre automatiquement dans votre page.

    Text-align:center; images et textes sont centrés dans le cadre.

    Background:url('..'); votre adresse de votre image de fond est à écrire à la place de la mienne.

    Border: 1px solid black; pas indispensable puisque l'ombre fait office de limite.

    Box-shadow:...; ombre de 4px et dégradé de 8px à l'intérieur de 4 côtés.

    border-radius:50px; arrondi de 50 px sur les angles.

    *****************************************************************

    Ce premier cadre étant créé, nous allons placer un second cadre, à l'intérieur et le décorer.

    <div style="width: 800px; height: 1320px; margin: 50px auto; text-align: center; background: url('http://ekladata.com/dzudiwr0_MkigTczHWmNla9EMbY.jpg'); border: 1px solid black; box-shadow: inset 4px 4px 8px black, inset -4px -4px 8px black; border-radius: 50px;">
    <p id="cd0"></p></div>

    <style><!--
    #cd0{position:absolute; box-sizing:border-box; width:700px; height:auto; border-radius:50px; text-align:center; margin:50px 50px; padding: 30px 0px; border:4px solid white; outline: solid 1px white; outline-offset: -15px; background:url('http://ekladata.com/wzqT5XKlJI-QsvIGHmbxG2KCLsc.jpg');}

    --></style>

    Pour ce cadre identifié en #cd0"

    box-sizing:border-box; la bordure de 4px solid blanche est comprise dans les dimensions extérieures de ce cadre. 

    width:700px; largeur inférieure de 100px par rapport au cadre au dessous soit 50 px de chaque côté par margin:50px 50px;

    height:auto; la hauteur s'adapte au contenu.

    text-align:center; le éléments contenus sont centrés.

    padding:30px 0px; les éléments à l'intérieur de ce cadre seront éloignés de bords et des autres éléments de 30px en hauteur et de 0px en latéral.

    outline: solid 1px white; outline-offset: -15px; décoration avec ligne à l'intérieur.

    background:url('..'); votre image de fond de ce cadre.

     

     

     


    A vous d'adapter ce principe à vos besoins; voilà un exemple que j'ai fait dans la foulée...