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

[darkstar123456]

Salut,

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

Code css :

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

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 !!!

[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é.

[Invité]

1- C'est sûr, si tu ne suis pas les consignes...

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 !
Cela dit, l'effet n'est pas le même (sens du dégradé).

[dominos]

merci pour ton aide, je regarde ça demain.

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

[NoSmoking]

Bonjour,

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

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