117.726 visiteurs uniques depuis la création pour 2.136.820 articles lus

COMMENT COLORIER UN ARRIERE-PLAN

par André MARINI 25 Janvier 2022, 16:35 Astuces de blogueur

CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of CSS3 Background Clipping</title>
<style type="text/css">
      .box {
              width: 600px;
              padding: 10px;
               border: 6px dashed #333;
                background: lime;       }
       .box1 {
                 background-clip: border-box;
        }
       .box2 {
                background-clip: padding-box;
        }
        .box3 {
                background-clip: content-box;
        }
</style>
</head>
    <div class="box box1"> la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur des frontiéres</div>
    <div class="box box2">la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur du padding</div>
    <div class="box box3">Bien entendu,la coloration de l'arriére plan est
limitée à la zone du contenu. </div>

</html>

Vous pouvez, tout à loisir, modifier la phrase que vous souhaitez mettre à l'intérieur du cadre. De même, vous pouvez modifier les dimensions du cadre que j'ai limitées, ici, à 600 px.

Vous pouvez modifier la couleur et faire en sorte que votre texte soit suffisamment long pour dépasser la première ligne.

Example of CSS3 Background Clipping

la coloration de l'arriére plan est etiré
jusqu'au bord extérieur des frontiéres

la coloration de l'arriére plan est etiré
jusqu'au bord extérieur du padding

Bien entendu,la coloration de l'arriére plan est limitée à la zone du contenu.