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

ryan — Sun, 01 Mar 2015 16:05:45 GMT

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.

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
 

<html>
<head>
<title>valléetitle>
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�.

Forum du club des d�veloppeurs et IT Pro - Blogs - ryan

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