Início / coding / Perguntas / 76925375
Accepted
Jan Vladimir Mostert
Asked: 2023-08-18 06:04:36 +0800 CST

É possível alinhar gradientes entre elementos?

  • 772

Estou tentando adicionar um gradiente aos dias anteriores em um calendário, mas as linhas de gradiente que não se alinham parecem um pouco meh.

div.month {
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--color-border);

}

div.day {
  background-color: var(--color-fill);
}

div.day + .past {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-fill),
    var(--color-fill) 1.5rem,
    var(--color-gradient-calendar-past) 1.5rem,
    var(--color-gradient-calendar-past) 3rem
  );
}
<div class="month noselect">
        <div class="day void"><div class="day-number"></div></div>
        <div class="day past"><div class="day-number">1</div></div>
        <div class="day past"><div class="day-number">2</div></div>
        <div class="day past"><div class="day-number">3</div></div>
        <div class="day past"><div class="day-number">4</div></div>
        ...
        <div class="day today"><div class="day-number">17</div></div>

Sem fazer os dias ao quadrado ( aspect-ratio: 1/1), é possível alinhar esses gradientes?

insira a descrição da imagem aqui

Eu estava pensando que talvez pudesse fazer o fundo de todo o componente com esse gradiente, mas então me deparo com o mesmo problema se quiser usar o mesmo gradiente com cores diferentes em outros dias.

insira a descrição da imagem aqui

css

2 respostas

  1. Best Answer

    eu faria assim:

    Use o gradiente como plano de fundo div.monthe deixe-o vermelho. Para o normal, div.dayvocê adiciona um fundo branco e, para o .pastfundo, torna-o transparente e adiciona um arquivo backdrop-filter.

    div.month {
    height: 23vW;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: repeating-linear-gradient(-45deg, #fff, #fff 1.5rem, #fdc5d0 1.5rem, #fdc5d0 3rem );
}

div.day {
    border: 1px solid #fff;
    background-color: #fff;
}

div.day + .past {
    background-color: #0000;
    backdrop-filter: grayscale(1) brightness(1.13);
}

div.day + .blocked {
    background-color: #0000;
}
    <div class="month noselect">
    <div class="day void"><div class="day-number"></div></div>
    <div class="day past"><div class="day-number">1</div></div>
    <div class="day past"><div class="day-number">2</div></div>
    <div class="day past"><div class="day-number">3</div></div>
    <div class="day past"><div class="day-number">4</div></div>
    <div class="day past"><div class="day-number">5</div></div>
    <div class="day past"><div class="day-number">6</div></div>
    <div class="day past"><div class="day-number">7</div></div>
    <div class="day blocked"><div class="day-number">8</div></div>
    <div class="day past"><div class="day-number">10</div></div>
    <div class="day past"><div class="day-number">11</div></div>
    <div class="day past"><div class="day-number">12</div></div>
    <div class="day past"><div class="day-number">13</div></div>
    <div class="day past"><div class="day-number">14</div></div>
</div>

    Ao usar grayscale(1)o fundo não é mais vermelho e então eu forço um pouco o brilho.

    Presumi que você deseja usar vermelho para datas bloqueadas. Se você quiser usar mais cores do que vermelho e cinza (por exemplo, verde para feriados), você pode usar hue-rotate:

    div.day + .holiday {
    backdrop-filter: hue-rotate(123deg);
}
    • 3

  2. Acho que isso pode levar você até lá, mas sem o código real, é difícil dizer.

    1. Isso define o plano de fundo de todo o contêiner para o arquivo background-gradient.
    2. Ele define o mesmo gradiente de plano de fundo para um pseudo elemento com ::aftera dayclasse today(é aqui que você pode precisar modificar para seu aplicativo).
    3. Não temos uma posição definida no dayelemento, portanto, usar position: absoluteposicionará o pseudoelemento em relação ao monthelemento, que defini como position: relativeativado.
    4. Em seguida, você pode usar clip-path: content-box;para restringir a pseudoexibição apenas ao .todayelemento de classe.

    :root {
  --color-border: lightgray;
  --color-fill: white;
  --color-gradient-calendar-past: lightgray;
  --color-gradient-calendar-now: pink;
}

div.month {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-past) 1.5rem, var(--color-gradient-calendar-past) 3rem);
}

div.void {
  background: white;
}

div.day {
  height: 200px;
}

div.today::after {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-now) 1.5rem, var(--color-gradient-calendar-now) 3rem);
}

div.today {
  clip-path: content-box;
}
    <div class="month noselect">
  <div class="day void">
    <div class="day-number"></div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
</div>

    Usandoinset(0)

    :root {
  --color-border: lightgray;
  --color-fill: white;
  --color-gradient-calendar-past: lightgray;
  --color-gradient-calendar-now: pink;
}

div.month {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(7, 1fr);
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-past) 1.5rem, var(--color-gradient-calendar-past) 3rem);
}

div.void {
  background: white;
}

div.day {
  height: 200px;
}

div.today::after {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  background: repeating-linear-gradient( -45deg, var(--color-fill), var(--color-fill) 1.5rem, var(--color-gradient-calendar-now) 1.5rem, var(--color-gradient-calendar-now) 3rem);
}

div.today {
  clip-path: inset(0);
}
    <div class="month noselect">
  <div class="day void">
    <div class="day-number"></div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
  <div class="day past">
    <div class="day-number">1</div>
  </div>
  <div class="day past">
    <div class="day-number">2</div>
  </div>
  <div class="day past">
    <div class="day-number">3</div>
  </div>
  <div class="day past">
    <div class="day-number">4</div>
  </div>
  <div class="day today">
    <div class="day-number">17</div>
  </div>
</div>

    • 0

relate perguntas