• Fond cahier à spirale

    Vous connaissez les textures de fond et les textures à spirale, du genre:

    Si vous voulez remplir un cadre en unités adaptatives viewport, vous pourrez écrire quelque chose comme ça:

    <div style="box-sizing: border-box; width: 80vw; height: 35vw; margin: 2vh auto; border: 0.2vh solid brown; background: url('http://ekladata.com/ExBJqf3olx2FPz4jgn4FdNLC0TY/bordu-001.jpg') repeat-y; background-size: 80vw 3vw; padding: 1vw 1vw 1vw 5vw;">
    <p style="width: 70vw; height: 30vw; background: rgba(255,255,255,0.4); font-size:1.5vw;">votre article</p>
    </div>

    et obtenir:

    votre article: la texture à spirale est hébergée sur Ekla, et son adresse récupérée pour être placée dans le code.
    Le dessin de la spirale oblige à ajouter une marge intérieure à gauche plus importante que sur les autres côtés, par l'attribut padding qui lui, amène à ajouter l'attribut box-sizing:border-box pour que  les dimensions du montage ne soient pas affectées.
    L'article a un fond semi-transparent pour le situer.
    ***
    Autre attribut: si vous voulez espacer chaque lettre d'un texte par letter-spacing:0.5vw;, je viens de vérifier que les unités viewport sont acceptées

    Votre texte avec lettres espacées:
    <p style="text-align:center; font-size:1.5vw; letter-spacing:0.5vw; color:coral; text-shadow:0.1vh 0.1vh black; ">Votre texte avec lettres espacées.</p>