div avec border-top linear-gradient

Version imprimable

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:

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,

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

Code:

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;

22/10/2019, 21h03
Invité

Bonjour,

Voir plutôt : box-shadow.
23/10/2019, 10h40
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... :zoubi:

Bonjour,

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

Code:

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:

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.

25/10/2019, 10h12
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... :calim2:
25/10/2019, 10h25
Invité
1- ...Et ma solution 2 fonctionne partout....
Il suffit d'ajouter :after pour la "bordure" inférieure.

Code:

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

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

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. 8-) (et à priori, SANS préfixe)

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:

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:

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;
}

25/10/2019, 14h56
darkstar123456
Salut,

T'as oublié le truc le plus important dans :before & :after et qui avait pourtant été stipulé par @jreaux62
Code:

1 2 display:block; /* important */ content:''; /* important */
Sans ces 2 propriétés, un :before ou :after ne peut pas être visible !!!

EDIT : Au final, j'ai l'impression que tu mélanges tous les bouts de code au petit bonheur, la chance.
L'exemple de shadow-box de @jreaux62 est pourtant la meilleure formule pour résoudre ton problème !!!
25/10/2019, 16h46
dominos

@darkstar123456
Merci pour l'explication, mais ça ne fonctionne toujours pas. Pour le faire avec shadow-box, je ne sais pas faire et linear-gradient me pose un pb de compatibilité. :(
25/10/2019, 18h33
Invité
1- C'est sûr, si tu ne suis pas les consignes... :roll:

2- J'ajoute qu'il ne faut pas confondre :
- !important : impose une règle
- et /* important */ : un simple commentaire
As-tu testé ton code avec juste border: 1px solid; ?

3- Comprendre :before et :after : il suffit de cliquer sur les liens...

4- Quant à Safari, je ne suis pas sur Mac...

@darkstar123456
Ce n'est pas shadow-box, mais box-shadow ! :aie:
Cela dit, l'effet n'est pas le même (sens du dégradé).
25/10/2019, 21h11
dominos

merci pour ton aide, je regarde ça demain.

Pour Safari il suffit de l'installer, il y a une version pour Windows.
31/10/2019, 09h33
NoSmoking

Bonjour,

Citation:

Envoyé par dominos

Pour Safari il suffit de l'installer, il y a une version pour Windows.

qui est obsolète depuis quand sur windows (2012-13) ??