Discussion :

[soeursourire]

Bonjour,

Je cherche une solution pour faire en sorte que le texte de ma balise li active (sur une ligne) disparaissent linéairement sur la fin du texte.

Code HTML:

Code :

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

1
2
3
4
<ol class="myClass">
                   <li><a href="/">HOME</a></li>
                   <li class="active">Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius </li>
                </ol>

Code CSS:

Code :

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
ol {
	margin-left: 10px;
}
 
li {
	float: left;
	margin-top: 20px;
	list-style: none;
 
	color: $color6;
 
	&.active {
		position: relative;
		float: right;
		margin-right: 100px;
		width: 970px;
 
		color: $color5;	
 
		display: inline-block;
		white-space: nowrap;
    	        overflow: hidden;
 
    	        //background: -webkit-linear-gradient(right, $color3, $color5); 
  		//-webkit-background-clip: text;
  		//-webkit-text-fill-color: transparent;
 
	}
 
	&.active:after {
		content:"";
		position: absolute;
		left: 700px;
		height: 70px;
		width: 100%;
 
		//background: -webkit-linear-gradient(right, $color3, $color5); 
  		//-webkit-background-clip: text;
  		//-webkit-text-fill-color: transparent;
	}
}

Avec ce code, j'ai vérifié mon "&.active:after" me montre bien les derniers mots de la ligne, mais alors que le gradient linéaire marche si je le mets sur le li.active il ne marche pas quand je le mets sur le li.active:after

Une idée du problème et de comment le résoudre?
Merci pour votre aide.

[soeursourire]

Je crois avoir trouvé:

Code :

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

1
2
3
4
5
6
7
background: -webkit-linear-gradient(
    		right, 
    		$color3 10px, 	// Starting point color of the text
    		$color5 50px); // End background color
 
  		-webkit-background-clip: text;
  		-webkit-text-fill-color: transparent;

[Azerx]

Pense à mettre en du coup