• Technique du blog

    Apparence

    Changer le thême

    Le titre et sous-titre (ci-dessus) correspond à la barre de menu sous eklablog.
    Ensuite il faut choisir Ajouter du CSS. Je précise que je ne suis pas un expert du CSS et que le code (ci-dessous) n'engage que moi.
    Je le donne à titre d'exemple à chacun de l'adapter à son contexte.
    Si vous n'êtes pas capable de déchiffrer ce code CSS, je ne peux être responsable de son utilisation par un tiers.

    .imgCadre02 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 10px 15px black, 0 0 50px rgba(0,0,0,0.1) inset;
    border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
    border: 2px solid white;
    }
    .imgCadre02:before {
    position: absolute;
    width: 100%;
    height: 80%;
    border-radius: 10px / 100px;
    z-index: -1;
    top: 10%;
    bottom: 10%;
    content: "";
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    }
    #imgTaille { width:100% height:100% }
    #imgCadre01 { padding: 10px 10px 10px 10px; background-color: Teal; }
    #txtStyle01 { padding: 10px 10px 10px 10px; font-family: verdana, geneva; font-size: 14pt; }
    #txtStyle02 { font-family: verdana, geneva; font-size: 14pt; }

    Dans la page Photos de mon blog, voici comment j'ai utilisé le CSS afin d'obtenir un cadre autour de la photo.

    Les balises html utilisées :

    • p avec id="imgCadre01"
    • img avec id="imgTaille" class="imgCadre02"

     

    Le résultat :

    La grande côte