wSlide - 고급예제

Code et explications

Dans cet exemple, j'ai juste appliqué une image au format 360° en background de l'élément "li". Ce qui donne un fond sans fin.

#parent1 ul{
	background-image: url(image/panorama-360.jpg);
}

Code et explications

Ici j'ai juste rempli les éléments 'li' avec des images, pour en faire une galerie (j'ai utilisé la mème image par simplicité). Arrangé vous juste pour donner des dimensions suffisantes au bloc, pour ne pas rogner des images. Il faut evidement ne pas appliquer de padding !

#parent2 li{
	padding: 0;
}

Code et explications

En donnant une image de fond originale aux éléments 'li', on peut obtenir des effet interessants. J'ai joué sur le padding pour placer le texte.

#parent3 li{
	background-image: url(image/step3_circle.gif);
	padding: 120px 75px;
	color: white;
}

Code et explications

Ici j'ai donné un effet de fond "fixe" en appliquand une image de fond sur le div qui contient la liste ...

#parent4-wrap{
	background-image: url(image/blancheur.jpg);
}