Bordure avec dégradé

**Masamune56** · 29/10/2012, 11h25

Bonjour,

Afin d'améliorer la lisibilité, je cherche à définir la couleur de la bordure inférieure des lignes d'une table avec le dégradé suivant:

linear-gradient(right, rgb(189,183,107) 0%, transparent 50%)

(la table a un fond noir et police blanche)

Le meilleur résultat que j'ai réussi a obtenir est uniquement sous Chrome avec:

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
<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:100%;
    background-color:black; color:DarkKhaki;
    border-collapse:collapse; border-spacing:0px}
table td:nth-last-child(1) {text-align:right}
table tr:nth-last-child(1) {border:none}
table tr {border-bottom: 1px solid rgb(189,183,107)}
 
.test {
border-style: solid;
border-image: -webkit-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:    -moz-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:     -ms-linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:      -o-linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:         linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch
}
</style>
</head>
<body>
<table>
    <tr> <td>Première ligne</td> <td>1500</td> </tr>
    <tr> <td>Deuxième ligne</td> <td>3000$</td> </tr>
    <tr class="test"> <td>Troisième ligne</td> <td>40%</td> </tr>
    <tr> <td>Dernière ligne</td> <td>Coucou Toto!</td> </tr>
</table>
 
<p class="test">
Cela marche bien pour un paragraphe sous Chrome seulement, mais je ne veut que la bordure inférieure pas celle de droite ni de dessus.
Comment adapter à une ligne de table?
</p>
 
</body>
</html>

J'ai également tenté avec border-colors mais ce n'est pas dans le bon sens (dégradé vers l'intérieur)
... et aussi border-bottom-image, ou border-bottom-color ne fonctionnent sous aucun navigateur...

Quelqu'un aurait-il une idée s.v.p. ? (si possible sans utiliser le hack du double div)

Merci d'avance.

**NoSmoking** · 30/10/2012, 19h06

Bonjour,
pas sûr que cela améliore la lisibilité, mais bon
http://designshack.developpez.com/tu...css3-bordures/

**Masamune56** · 30/10/2012, 20h12

Merci pour la réponse mais non, ce tutoriel utilise border-colors et ce n'est pas dans le sens souhaité. Je l'ai mis en gras dans mon post pourtant ...

Cette bordure que je cherche à faire est une simple ligne:
- 1px d'épaisseur
- DarkKhaki comme couleur à droite...
- ...dégradée vers la gauche jusqu'à couleur transparente à environ 40% de la longueur de la ligne.

EDIT: après avoir passé l'après-midi à chercher sur le Net, j'ai trouvé un post sur StackOverflow http://jsfiddle.net/u2ZE4/58/, sauf que lui c'est du haut vers le bas sur bordure droite

Comment l'adapter sur border-bottom?

**NoSmoking** · 31/10/2012, 19h26

mais non, ce tutoriel utilise border-colors et ce n'est pas dans le sens souhaité. Je l'ai mis en gras dans mon post pourtant ...

il faut parfois interpréter et approfondir ce que l'on lit

as tu seulement essayé d'annuler les toutes bordures pour ne te concentrer que sur celle qui t'intéresses.

Code :

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

1
2
3
4
5
6
7
8
9
.test {
  border:0;
  border-bottom:1px solid #CCC;
  border-image: -webkit-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
  border-image:    -moz-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
  border-image:     -ms-linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
  border-image:      -o-linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
  border-image:         linear-gradient(top, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch
}

**Masamune56** · 31/10/2012, 21h35

Ok merci pour la réponse. Votre code ne marche pas mais ca m'a donné une piste partielle:

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
<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:300px;
    background-color:black; color:DarkKhaki;
    border-collapse:collapse}
table td {padding: 5px 10px;}
table td:nth-last-child(1) {text-align:right}
table tr:nth-last-child(1) {border:none}
 
 p {width:500px;}
 
.test, table tr {
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:    -moz-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:     -ms-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:      -o-linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-image:         linear-gradient(right, rgb(189,183,107) 0%, transparent 50%) 10 10 stretch stretch;
border-left:0; border-right:0; border-top:0;
}
</style>
</head>
<body>
<table>
    <tr> <td>Première ligne</td> <td>1500</td> </tr>
    <tr> <td>Deuxième ligne</td> <td>3000$</td> </tr>
    <tr> <td>Troisième ligne</td> <td>40%</td> </tr>
    <tr> <td>Dernière ligne</td> <td>Coucou Toto!</td> </tr>
</table>
 
<p class="test">
Cela marche bien pour un paragraphe sous Chrome seulement, mais je ne veut que la bordure inférieure pas celle de droite ni de dessus.<br/>
Comment adapter à une ligne de table?
</p>
 
</body>
</html>

C'est parfait sur le <p>, mais le tr de la table ne veut pas fonctionner... (sous Chrome)
Sous Firefox c'est pire, aucun des 2 p ou table n'affiche de dégradé...

pas tenté sous IE (j'ose même pas y penser lol...)

Bordure avec dégradé

CSS

Discussions similaires

Partager

Partager