28172 sujets

CSS et mise en forme, CSS3

Scroller degradé transparent sur les cotes

Bonjour

Je fais un site avec un grand scroller horizontal
Je cherche la meilleure solution pour que sur les côtés le contenu du scroller disparaisse en transparence dégradé (comme si ca s'effaçait)

merci
Bonjour,

Je ne sais pas si cela répond à tes attentes, voici un code d'après ce que j'ai pu comprendre :

Le HTML :

<div id="conteneur">
	<div class="degrade gauche"></div>
	<div class="degrade droite"></div>
	<div id="items">
		<div class="item">Ma première rubrique</div>
		<div class="item">Ma deuxième rubrique</div>
		<div class="item">Ma troisième rubrique</div>
	</div>
</div>


Le CSS :

.degrade {
	width: 50px;
	height: 200px;
	position: absolute;
}

.gauche {
	left: 0;
	background-image: url(degrade-gauche.png);
	background-repeat: no-repeat;
}

.droite {
	right: 0;
	background-image: url(degrade-droite.png);
	background-repeat: no-repeat;
}

#conteneur {
	width: 100%;
	height: 200px;
	overflow: scroll;
}

#items {
	width: 1530px; /* la largeur total de tous les items (margin inclus) */
}

.item {
	width: 500px;
	height: 200px;
	margin-right: 10px;
	float: left;
	background-color: red;
}

Modifié par Maliki (21 Feb 2011 - 13:03)
Je pensais a une solution 100% CSS3 sans image sinon bien sur ta solution marche

<div id="items">

<div class="item gauche">Ma première rubrique</div>

<div class="item">Ma deuxième rubrique</div>

<div class="item droite">Ma troisième rubrique</div>


merci
Modifié par polpaulin (21 Feb 2011 - 12:57)
Ah oui je pensais que tu cherchais à réaliser cet effet en CSS2, de manière "classique". Maintenant en CSS3 c'est une autre histoire et je ne connais pas assez les nouvelles propriétés pour réaliser ceci. Smiley confus

Sinon effectivement ma technique décrite plus haut fonctionne, mais peut-être pas sur tous les navigateurs. A vérifier...
j'ai fait un essai avec les 2 possibilités et c'est très proche


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="fr">
<head>
    <title>slider degrade</title>
    <style type="text/css">
    .conteneur {
	width: 100%;
	height: 300px;
        text-align:center;
}


.item {

	width: 500px;
	height: 200px;
	margin-right: 10px;
	float: left;
	background-color: red;
        background-repeat: no-repeat;
}

.gauche {
	background-image: url(degrade-g.png);
}
.droite {	
	background-image: url(degrade-d.png);
}
.gauche2{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 0)),
          to(rgba(255, 255, 255, 1.0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          left center,
          rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=#FFFFFF, endColorStr=0
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=#FFFFFF, endColoStr=0
        );
    }

.droite2{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

    </style>
</head>
<body>
    <div class="conteneur">


		<div class="item gauche">Ma première rubrique</div>

		<div class="item">Ma deuxième rubrique degrade image</div>

		<div class="item droite">Ma troisième rubrique</div>

	</div>

        <div class="conteneur">

		<div class="item gauche2">Ma première rubrique</div>

		<div class="item">Ma deuxième rubrique degrade CSS3</div>

		<div class="item droite2">Ma troisième rubrique</div>

	</div>

</div>
</body>
</html>



merci pour ton aide
Modifié par polpaulin (21 Feb 2011 - 13:12)
Sujet clos
Aller à