-
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éesVotre 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>