• divers

    Je reprends certains codes enregistrés à mes début du CSS.

    essai

    <div id="pre">essai</div><style><!--#pre {width:60vw; height:20vw; margin:1vh auto; font-size:1.2vw; border: 5px navy; border-style: dotted double; background: #F8D575; background-clip: padding-box;}--></style>

    Les bordures verticales et latérales sont différentes mais écrites dans un même attribut: border-style:dotted double; dotted=pointillés.

    Background-clip:padding-box; donne la limite au motif de fond; nous allons voir ensuite qu'en ajoutant une valeur de padding, on peut faire une effet.


    Le texte.

    <div class="deg" style="width: 60vw; height: 20vw; margin: 1vh auto; border: 0.6vh solid brown; padding: 1vw; text-align: center;">
    <p style="border: 0.2vh solid green; background-color: rgba(0,100,200,0.5); width: 40vw; height: 15vw; margin: 1vw auto; text-align: center;">Le texte.</p>
    </div>

    <style><!--
    .deg {background:
    url(http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@100x100.gif) no-repeat left top,
    url(http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@100x100.gif) no-repeat right top,
    url(http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@100x100.gif) no-repeat left bottom,
    url(http://ekladata.com/mii32ADC22Soh6UuwAIHm7XryQA@100x100.gif) no-repeat right bottom,
    url(http://ekladata.com/FjlXA7mOIOoekt6Sp43ftdJJle0/marble03.jpg);}
    --></style>


    essai

    <div id="box1">
    <h1>essai</h1>
    </div>
    <style><!--
    #box1 {width:60vw; height:20vw; margin:1vh auto; font-size:1.2vw;
    border: 5px navy; border-style: dotted double; background: #F8D575; padding:1vw;
    background-clip: content-box;}
    --></style>

    La propriété background-clip permet de spécifier les limites de rendu du fond d'’un élément. Elle a 3 valeurs possibles :

    border-box : le fond est visible jusqu'’aux limites extérieures de la bordure (mais reste dessous)
    padding-box : le fond est visible jusqu'aux limites extérieures du padding
    content-box : le fond est visible jusqu’'aux limites extérieures du contenu (aux limites intérieures du padding)


    Un autre attribut utile est: box-sizing:border-box;

    Lorsque l'on met une bordure à un élement, celle-ci vient s'ajouter aux dimensions de l'élément, ce qui n'est pas troujours pratique lorsque l'on place deux éléments côte à côte.

    Cet attribut permet de comprendre la bordure dans les dimensions de l'élément.

    Bordure en plus

    Bordure comprise.

    <div style="text-align: center; width: 65vw; margin: 1vh auto;">
    <p style="width: 30vw; height: 10vw; border: 0.6vh ridge grey; float: left; background: yellow;">Bordure en plus</p>
    <p style="box-sizing: border-box; width: 30vw; height: 10vw; border: 0.6vh ridge grey; float: left; background: yellow; margin-left: 2vw;">Bordure comprise.</p>
    </div>

    Bordure en plus est la valeur par défaut, qui correspond à box-sizing:content-box.