Как задать прозрачность блоку?

@deb15 · Регистрация: 05.03.2022

Author24 — интернет-сервис помощи студентам

Хотелось бы добавить визуальный эффект блоку.
Есть на сайте фиксированный блок снизу слева, содержащий уведомления одинаковые по структуре. Они динамично появляются и могут переполнить блок.
Надо чтобы на верхнем краю блока уведомления плавно исчезали (что то вроде прозрачного градиента), а не так как на картинке резко.

Структура такая:

HTML5

<section id="notification-area">
   <article class="message"></article>
   <article class="message"></article>
   <article class="message"></article>
</section>

@mr_dramm · 10.11.2022, 00:25

называется toast или snack bar например готовая реализация

Идей для реализаций слишком много чтобы их тут описывать, все зависит от ... ух ты ж уже 0 24 ... ... ... мне пора

KingdaKa · 10.11.2022, 01:34

Можно наложить градиент с прозрачностью в псевдоэлементе, например:

CSS

      /* id не стоит использовать для описания CSS-свойств! */
      .notification-area {
        width: 300px;
        height: 400px;
        position: relative;
      }
      .notification-area::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 30%;
        background-image: linear-gradient(#ffff, #0000);
      }

HTML5

    <section class="notification-area">
      <article class="message">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
        blanditiis, hic voluptates et quas itaque beatae aperiam, dolor alias
        reprehenderit ipsam, inventore sed nemo consequatur quae vero possimus
        officiis fugiat?
      </article>
      <article class="message">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat,
        eligendi perferendis voluptatem veniam cum libero dignissimos quod
        molestias, voluptates eius ratione dicta fugiat inventore! Quisquam modi
        nobis accusamus ut repellat.
      </article>
      <article class="message"></article>
    </section>

@deb15 · 25.11.2022, 23:04 **[ТС]**

dsfsd

Сообщение от KingdaKa

Можно наложить градиент с прозрачностью в псевдоэлементе, например:

Там проблема в том, что фон то разный, если приглядишься. Поэтому прозрачность будет видна на фоне, а не только для сообщений

Сообщение от mr_dramm

называется toast или snack bar например готовая реализация

Ну единственное что я узнал нового, это как это называется, спасибо. А ответа на вопрос там нет(
В примере они по времени исчезают сами полностью, а не от переполнения родительского блока

@mr_dramm молодой 1773 / 1017 / 320 Регистрация: 17.07.2021 Сообщений: 2,059 Записей в блоге: 12
	10.11.2022, 00:25	2
	называется toast или snack bar например готовая реализация Идей для реализаций слишком много чтобы их тут описывать, все зависит от ... ух ты ж уже 0 24 ... ... ... мне пора 0

@deb15 0 / 0 / 0 Регистрация: 05.03.2022 Сообщений: 9
	25.11.2022, 23:04 [ТС]	4
	dsfsd Сообщение от KingdaKa Можно наложить градиент с прозрачностью в псевдоэлементе, например: Там проблема в том, что фон то разный, если приглядишься. Поэтому прозрачность будет видна на фоне, а не только для сообщений Сообщение от mr_dramm называется toast или snack bar например готовая реализация Ну единственное что я узнал нового, это как это называется, спасибо. А ответа на вопрос там нет( В примере они по времени исчезают сами полностью, а не от переполнения родительского блока Миниатюры 0