code moodboard
Petit code pour un effet moodboard avec cadre autour des images, pour un rendu carré. Adapté pour les forums de 800px. En cas de soucis ou d’envie de modifier, fais-moi un message ! Le code resize les images de façon à ne rien déformer. Le format des cadres est fixe.
Le code est libre d’utilisation, mais un petit crédit à drake passe toujours bien !
---------------------------------------------- Partie feuille de style
----------------------------------------------
.parent { display: grid; grid-template-columns: repeat(2, 150px) 100px 160px 1fr; grid-template-rows: 160px 130px 150px 130px 1fr; grid-column-gap: 5px; grid-row-gap: 5px; }
.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9 { background-position: 50%; background-size: cover; border-radius: 3px; border: white 7px solid; }
.div1 {grid-area: 1 / 2 / 2 / 3;} .div2 {grid-area: 2 / 2 / 4 / 4;} .div3 {grid-area: 1 / 1 / 3 / 2;} .div4 {grid-area: 3 / 1 / 4 / 2;} .div5 {grid-area: 1 / 3 / 2 / 5;} .div6 {grid-area: 4 / 1 / 5 / 3;} .div7 {grid-area: 2 / 4 / 3 / 5;} .div8 {grid-area: 3 / 4 / 5 / 5;} .div9 {grid-area: 4 / 3 / 5 / 4;}
----------------------------------------------
Partie post
----------------------------------------------
<div class="parent"><div class="div1" style="background-image:url(#URL_ICI)"></div><div class="div2" style="background-image:url(#URL_ICI)"></div><div class="div3" style="background-image:url(#URL_ICI)"></div><div class="div4" style="background-image:url(#URL_ICI)"></div><div class="div5" style="background-image:url(#URL_ICI)"></div><div class="div6" style="background-image:url(#URL_ICI)"></div><div class="div7" style="background-image:url(#URL_ICI)"></div><div class="div8" style="background-image:url(#URL_ICI)"></div><div class="div9" style="background-image:url(#URL_ICI)"></div></div>