ryan

Dans la vallée, un petit effet CSS basé sur les positions relatives et absolues

par

ryan

, 01/03/2015 à 18h05 (542 Affichages)

Yop,

Premier billet dans ce blog, au menu un petit truc CSS: j'avais vu dans un site un design sympa où deux images s'écartaient de chaque côté de l'écran au fur et à mesure qu'on agrandissait la fenêtre, donnant l'impression d'une vallée qui s'ouvre.

Le site en question était assez complexe, et je n'ai pas eu la patience de décortiquer les tonnes de CSS et Jquery pour trouver comment ils avaient fait.

Je suis donc reparti "from scratch".

Voici deux images, droite.png et gauche.png, qui symbolisent les deux côtés de la vallée.

Nom : droite.png
Affichages : 69
Taille : 168,7 Ko

Nom : droite.png
Affichages : 69
Taille : 168,7 Ko

Nom : gauche.png
Affichages : 66
Taille : 168,8 Ko

Quand on élargit la page, ces deux cotés doivent donc rester collés respectivement aux bords gauche et droit du conteneur qui affiche le texte, ce texte doit être en sur-impression par rapport aux images. Voilà le cahier des charges.

Au début, je suis parti sur une solution à base de Jquery pour calculer les positions de mes deux versants de vallée à chaque événement resize, mais c'était d'un lourd...

C'est là que j'ai compris que c'était bien plus simple. Pas besoin de javascript, rien que du CSS: tout est une histoire de position, relative ou absolue, et de z-index pour la sur-impression. Je me suis plongé dans la doc, histoire d'avoir les idées claires.

Voilà le résultat:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<!DOCTYPE HTML>
<html>
<head>
<title>vallée</title>
</head>
<body style="padding: 0; margin: 0">
 
<div id="conteneur" style="position: relative;">
 
	<div style="width: 500px; margin-left: auto; margin-right: auto; padding-bottom: 20px;">
		Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, 
		eosque coniunctos per ampla spatia civitatis acri raptavere discursu. 
		iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad 
		ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
 
		Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium 
		inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim 
		super hoc ulla documentorum rata est fides.
 
		Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, 
		ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna 
		plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
 
		Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae 
		per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat 
		ignorare dissimulantem formidine tenus iusserim custodiri.
 
		Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non 
		reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides 
		lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.
	</div>
 
	<div id="gauche" style="position: absolute; left: 0; bottom: 0; z-index: -1; ">
		<img src="gauche.png" alt="" />
	</div>
 
	<div id="droite" style="position: absolute; right: 0; bottom: 0; z-index: -2; ">
		<img src="droite.png" alt="" />
	</div>	
 
</div>	
 
</body>
</html>

Les deux côtés "gauche" et "droit" sont positionnés en "absolute" par rapport au conteneur. Avec les propriétés "left/right" et ""bottom" à zéro pour les côtés, on s'assure qu'ils suivront le mouvement si le conteneur s'élargit, en restant respectivement dans les coins inférieurs gauche et droit du conteneur.

Ce conteneur est en position "relative": en effet, comme les deux côtés seront positionnés en "absolute" par rapport au premier parent qui est lui-même positionné, il est donc obligatoire de positionner le conteneur, et l'option "relative" fait l'affaire dans le contexte de cette page de test.

Pour le reste, un peu de z-index pour gérer l'ordre des couches, un peu de formatage pour le texte, et voilà.