Discussion :

[dominos]

Bonsoir,

Dans une div, j'aimerai faire un petit effet dégradé sur le border-top à l'aide de linear-gradient ou autre..

Par exemple : (L) transparent => gray (C) => transparent (R), mais l'exemple suivant me colore toute la div..

Code :

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

1
2
3
4
5
6
7
8
.test-border {
       width: 500px;
	background: -webkit-linear-gradient(left, transparent, gray, transparent);
  	background: -moz-linear-gradient(left, transparent, gray, transparent);
  	background: -ms-linear-gradient(left, transparent, gray, transparent);
  	background: -o-linear-gradient(left, transparent, gray, transparent);
}
<div class="test-border">Contenu variable en hauteur...</div>

Savez-vous si c'est possible ?

merci d'avance pour votre réponse,

[dominos]

Le code suivant fonctionne mais uniquement sous FF , pourtant d'après la doc pas de pb pour la compatibilité...

Code :

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

1
2
3
4
	border-image: -webkit-linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 1px;
	border-image: -moz-linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 1px;
	border-image: -ms-linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 1px;
	border-image: -o-linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 1px;

[Invité]

Bonjour,

Voir plutôt : box-shadow.

[dominos]

Merci pour la réponse mais je ne vois pas trop le rapport avec la bordure... je ne cherche pas à ajouter une ombre mais une transparence sur la bordure L/R et gray au milieu...

[Invité]

Bonjour,

1- moi non plus...
En fait, si : je le voyais dans l'autre sens :

Code :

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

1
2
3
4
.test-border {
  width: 500px;
  box-shadow:0 -5px 5px -5px grey;
}

2- Sinon, on peut l'appliquer en background sur .test-border:before.

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
.test-border {
  width: 500px;
}
 
.test-border:before {
  display:block; /* important */
  content:''; /* important */
  position:relative;
  height:2px;
  background: -webkit-linear-gradient(left, transparent, gray, transparent);
  background: -moz-linear-gradient(left, transparent, gray, transparent);
  background: -o-linear-gradient(left, transparent, gray, transparent);
  background: linear-gradient(left, transparent, gray, transparent);
  margin-bottom:5px;
}

On peut d'ailleurs associer les deux.

[dominos]

Il y a de l'idée à exploiter, merci. Pour l'instant, je contourne le pb avec une balise <hr> mais c'est pas top... j'aimerai qu'il y est une bordure d'1px en haut et en bas de ma div en passant uniquement par CSS...
L'exemple que j'ai donné fonctionne uniquement sous FF, c'est étrange...

[Invité]

1- ...Et ma solution 2 fonctionne partout....
Il suffit d'ajouter :after pour la "bordure" inférieure.

Code :

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

.test-border:before, .test-border:after {

2- Concernant border-image, tu as oublié de définir border :

Code css :

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

1
2
3
4
5
6
7
 
.test-border {
  width: 500px;
  padding:15px 0;
  border: 1px solid;
  border-image: linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 30%;
}

Et là, ça fonctionne aussi partout. (et à priori, SANS préfixe)

[dominos]

Salut, merci pour ton aide, je ne comprends pas le rôle de before/after dans ton exemple, lorsque je place le code dedans, rien ne fonctionne,

Code :

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

1
2
3
4
5
.container:before, .container:after  {
  padding: 15px 0 !important;
  border: 1px solid !important;
  border-image: linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 30% !important;
}

mais si je fais comme ça, ça fonctionne sauf Safari... et ce, malgré la présence du préfixe.

Code :

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

1
2
3
4
5
6
.container  {
  padding: 15px 0 !important;
  border: 1px solid !important;
  border-image: linear-gradient(to left, transparent, gray, transparent) 100 100 / 1px 30% !important;
  border-image: -webkit-linear-gradient(to left, transparent, red, transparent) 100 100 / 1px 30% !important;
}