Bordures

Bordures

La plupart d'entre nous utilise l'écriture simplifiée pour une bordure image: border:0.3vh solid white; par exemple.

Nous pouvons donner une valeur différente à chaque bordure des 4 côtés d'un cadre: border-top/border-right/border-bottom/border-left;

Cela peut nous permettre de placer des boutons au dessus d'une bordure plus large et semi-transparente.

De plus, par défaut, les bordures s'ajoutent à la dimension d'un cadre ou d'une image: cadre de 60vw + bordure de 1w=largeur hors tout:62vw, ce qui peut parfois être gênant et ne plus être contenu dans votre zone article.

Un attribut permet de placer la bordure sans augmenter les dimensions du cadre: box-sizing:border-box;

En combinant ces attributs, on peut créer un cadre de montage, à la dimension désirée et avec une bordure grisée pour y placer des boutons.

<div style="width: 40vw; height: 22.5vw; border:0.3vh solid red; margin: 2vh auto;">
<p id="mqa"> </p>
</div>
<style></style>

Ce qui peut être utilisé comme ça: (article publié); transition par changement d'opacité mais on peut en utiliser d'autres.

<div style="width:60vw; height:33.75vw; margin:2vh auto;">
<p id="mq1"> </p>
<p id="btn1" class="btn"> </p>
<p id="btn2" class="btn"> </p>
<p id="btn3" class="btn"> </p>
<p id="btn4" class="btn"> </p>
<p id="btn5" class="btn"> </p>
<p id="btn6" class="btn"> </p>
<p id="bd0"> </p>
<p id="bd1"> </p>
<p id="bd2"> </p>
<p id="bd3"> </p>
<p id="bd4"> </p>
<p id="bd5"> </p>
<p id="bd6"> </p>
</div>
<style></style>