principe contruction 1

Afin de publier à mon rythme, je voudrais revenir sur la construction d'un montage de base, de façon à vous donner l'envie de vous lancer dans quelque chose de personnalisé.

Je vais choisir un montage en 60% de la largeur de votre écran, c'est à dire 60vw, pour une hauteur au ratio 16/9 de 33.75vw, ce qui convient à beaucoup.

160vw--90vw

60vw -- Xvw donc Xvw=60/160x90=33.75vw

Le cadre du montage peut être visible ou non, avec image ou texture de fond ou non mais je le propose centré dans votre zone article.

Pour cela, l'attribut margin:2vh auto; le fera avoir un espace vertical de 2vh, au dessus et en dessous et le fera se centrer automatiquement dans votre zone article.

Ce cadre sera la base des positionnements des éléments contenus;

en position: transform:translate(0vw,0vw); l'élément sera en haut à gauche;

en position: transform:translate(0vw,33.75vw); l'élément sera en bas à gauche; moins sa hauteur: s'il fait 5vw de haut, ce sera:transform:translate(0vw,28.75vw);

Rappel: lorsque vous positionnez une élément en 0vw,0vw, c'est sont angle haut/gauche qui prend ce positionnement; la largeur et la hauteur de l'élément partent de ce point. ... par défaut car nous aurons peut-être l'occasion de voir définir une autre point de référence.

Le code de notre montage s'écrira, en code source (éditeur html): <div style=" width:60vw; height:33.75vw; margin:2vh auto;">l'article</div>

Avec une bordure, ce sera: <div style=" width:60vw; height:33.75vw; margin:2vh auto; border:0.4vh ridge grey;">l'article</div>

Avec une couleur de fond, ce sera: <div style=" width:60vw; height:33.75vw; margin:2vh auto; border:0.4vh ridge grey; background:pink;">l'article</div>

Avec un gradient en fond, ce sera:<div style=" width:60vw; height:33.75vw; margin:2vh auto; border:0.4vh ridge grey; background: linear-gradient(to bottom, grey 0%,white 100%);">l'article</div>

Avec une image de fond, ce sera: <div style=" width:60vw; height:33.75vw; margin:2vh auto; border:0.4vh ridge grey; background: url('http://ekladata.com/KZw5Z9fl6KFqJKfqrp_NbeE8i64/889a06ff.jpg');">l'article</div>

Dans le cas d'une image, autre qu'une texture, vous aurez à dimensionner l'image aux dimensions de votre cadre, en ajoutant: background-size:cover; exemple:

<div style=" width:60vw; height:33.75vw; margin:2vh auto; border:0.4vh ridge grey; background: url('http://ekladata.com/m95ETXQBXiVGcCr3pzEt7YRRP54.jpg'); background-size:cover;">l'article</div>

Le cadre étant défini, nous plaçons, dedans ce que nous voulons, avec une forme choisie et nous pourrons animer chaque élément à son survol.

Animer chaque élément à son survol signifie qu'il faut que chaque élément ne soit pas trop proche des autres.