Barre de dégradé sous l'en-tête ?

Soutien
1

Nous avons actuellement configuré le CSS pour nous donner une barre sous notre en-tête au lieu de l’ombre :

.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

Si nous voulions en faire un dégradé, quelle serait la manière la plus simple d’y parvenir ? Nous pouvons faire d’autres choses des dégradés, mais pas cette ligne.

2 « J'aime »
2

Bonjour,

Je pense que vous pourriez utiliser mixin pour cela.

Voici un exemple :

@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

Ensuite, vous pouvez l’utiliser sur .d-header ou où vous le souhaitez avec @include gradient-border()

.d-header {
  box-shadow: none;
  @include gradient-border();
}

Screenshot 2021-11-17 at 10.20.05
Screenshot 2021-11-17 at 10.20.051438×219 19 KB

4 « J'aime »
3

Une idée de pourquoi cela pourrait se produire sur mobile ?

image
image1125×439 102 KB

4

L’utilisation de ce qui suit pour mobile n’a fonctionné que :

    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.