NO FANDOM

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » NO FANDOM » Болталка » Флуд во имя Флуда

Флуд во имя Флуда

Страница:   1 … 8 9 10 11 12 13 14  
Ответить

Сообщений 91 страница 100 из 135

91

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56
хх

92

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фонарик над строками · разговор в темноте</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0a0a0a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 2rem 1rem;
        }

        /* комната — абсолютно тёмная */
        .story-container {
            max-width: 960px;
            width: 100%;
            background-color: #030303;
            border-radius: 32px;
            padding: 4rem 3.5rem;
            box-shadow: 0 25px 40px rgba(0,0,0,1), inset 0 0 10px rgba(255,255,200,0.02);
            border: 1px solid #1e1e1e;
            position: relative;
            overflow: hidden;  /* чтобы луч не выходил за скруглённые края */
        }

        /* все абзацы в полной темноте — видны еле-еле, как тени */
        .story-paragraph {
            color: #1f1f1b;                /* почти чёрный текст, только контур */
            font-size: 1.8rem;              /* крупный, выразительный шрифт */
            line-height: 1.6;
            margin-bottom: 2.2rem;
            padding: 1.2rem 1.5rem;
            border-radius: 32px;
            cursor: default;
            letter-spacing: 0.02em;
            border: 1px solid transparent;
            background-color: transparent;
            transition: color 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s;
            position: relative;
            z-index: 2;                     /* чтобы текст был над маской, но под фонариком */
            pointer-events: auto;            /* абзацы ловят мышь */
            user-select: none;
            text-shadow: 0 0 3px rgba(255, 180, 100, 0.1);
        }

        /* затемнение всех нетронутых абзацев, когда хотя бы один наведён */
        .story-container:hover .story-paragraph:not(:hover) {
            color: #0f0f0c;                  /* ещё глубже во тьму */
            text-shadow: none;
            background-color: #060605;
            border-color: #1e1b14;
            transition: color 0.3s, background-color 0.3s;
        }

        /* САМОЕ ИНТЕРЕСНОЕ: фонарик (псевдоэлемент) появляется только при ховере */
        .story-paragraph:hover {
            /* текст освещён тёплым */
            color: #faefd6;
            text-shadow: 0 0 12px #fcc77e, 0 0 30px #ffb054;
            background-color: #302c21;       /* лёгкий свет на самом абзаце */
            border-color: #bc9f60;
            transition: color 0.15s, text-shadow 0.15s, background-color 0.15s, border-color 0.15s;
            user-select: text;
            z-index: 20;                     /* выше других, но сам фонарик ещё выше */
        }

        /* псевдоэлемент, который и создаёт круг фонарика */
        .story-paragraph:hover::after {
            content: '';
            position: absolute;
            top: var(--y, 0);
            left: var(--x, 0);
            width: 280px;                     /* большой луч фонаря */
            height: 280px;
            background: radial-gradient(circle at center,
                rgba(255, 240, 180, 0.45) 0%,
                rgba(255, 220, 130, 0.25) 35%,
                rgba(180, 130, 60, 0.08) 70%,
                transparent 90%);
            border-radius: 50%;
            transform: translate(-50%, -50%);  /* чтобы центр был в точке курсора */
            pointer-events: none;              /* не мешает наведению */
            z-index: 25;                       /* над текстом, но не скрывает его полностью */
            mix-blend-mode: screen;            /* свечение */
            filter: blur(4px) brightness(1.3);
            box-shadow: 0 0 40px 15px rgba(255, 200, 100, 0.2);
        }

        /* дополнительный эффект: имитация дрожащего света на фоне */
        .story-paragraph:hover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%),
                        rgba(255, 220, 140, 0.15) 0%,
                        transparent 70%);
            border-radius: inherit;
            pointer-events: none;
            z-index: 22;
            mix-blend-mode: overlay;
        }

        /* чтобы координаты работали — нужен JS для отслеживания мыши */
        .story-paragraph {
            --x: 0px;
            --y: 0px;
        }

        /* крупный текст, удобное чтение */
        .story-paragraph {
            font-size: 2rem;            /* очень крупно, как в книге для слабовидящих */
            line-height: 1.65;
            font-weight: 400;
        }

        /* планшетные размеры чуть уменьшим */
        @media (max-width: 700px) {
            .story-container { padding: 2rem 1.5rem; }
            .story-paragraph { font-size: 1.7rem; }
        }

        /* маленький намёк */
        .story-tip {
            color: #3c392f;
            font-size: 1rem;
            text-align: center;
            margin-top: 2.8rem;
            border-top: 1px dashed #3f392b;
            padding-top: 2rem;
            letter-spacing: 3px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="story-container">

        <!-- АБЗАЦ 1 -->
        <p class="story-paragraph" id="p1">
            — Ты здесь? — шёпот уходит в пустоту, не встречая препятствий. Тьма настолько густая, что кажется — она шевелится. Слышно только, как кровь стучит в висках, и этот стук похож на шаги.
        </p>

        <!-- АБЗАЦ 2 -->
        <p class="story-paragraph" id="p2">
            Молчание затягивается, превращаясь в осязаемую субстанцию. Затем голос — не снаружи, а будто бы в затылке: «Я никогда не уходил. Но ты впервые решил заговорить об этом». Хочется обернуться, но я боюсь увидеть там себя.
        </p>

        <!-- АБЗАЦ 3 -->
        <p class="story-paragraph" id="p3">
            — Зажги свет, — прошу я, и мой голос срывается на хрип. — Хотя бы спичку. — В ответ тихий смех, и я чувствую, как чьи-то пальцы касаются моей ладони. Они тёплые. «Свет не нужен. Ты сам сейчас светишься. Не видишь?»
        </p>

        <!-- АБЗАЦ 4 -->
        <p class="story-paragraph" id="p4">
            Я опускаю взгляд на свои руки — и действительно вижу слабое фосфоресцирующее сияние. Оно пульсирует в такт сердцу. «Это просто страх, — шепчет голос. — Или надежда. В темноте они выглядят одинаково».
        </p>

        <!-- АБЗАЦ 5 -->
        <p class="story-paragraph" id="p5">
            Тогда я поднимаю голову и впервые смотрю прямо перед собой. Там, во мраке, проступает лицо — размытое, сотканное из теней и отражений моего собственного света. Оно улыбается. Или это мне кажется?
        </p>

        <!-- АБЗАЦ 6 -->
        <p class="story-paragraph" id="p6">
            — Кто ты? — спрашиваю я шёпотом. — Тот, кого ты ищешь в потёмках, — отвечает голос. — Тот, с кем говоришь, когда гаснет свет. Мы знакомы вечность. Просто ты забыл.
        </p>

        <!-- подпись  -->
        <div class="story-tip">✻  наведи фонарик на строку  ✻</div>
    </div>

    <script>
        (function() {
            // Находим все абзацы с классом .story-paragraph
            const paragraphs = document.querySelectorAll('.story-paragraph');
           
            // Функция обновления позиции CSS-переменных --x и --y
            const updatePosition = (e, element) => {
                // Получаем координаты элемента относительно окна
                const rect = element.getBoundingClientRect();
               
                // Вычисляем положение курсора относительно элемента
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
               
                // Устанавливаем CSS-переменные прямо на элемент (в пикселях)
                // Они будут использоваться в псевдоэлементе ::after
                element.style.setProperty('--x', x + 'px');
                element.style.setProperty('--y', y + 'px');
            };

            // Навешиваем обработчики на каждый абзац
            paragraphs.forEach(p => {
                // При движении мыши внутри абзаца обновляем координаты пятна
                p.addEventListener('mousemove', (e) => {
                    updatePosition(e, p);
                });

                // При входе мыши тоже сразу ставим координаты (чтобы не прыгало с последнего места)
                p.addEventListener('mouseenter', (e) => {
                    updatePosition(e, p);
                });

                // Можно также сбросить позицию при выходе, но это не обязательно
                // p.addEventListener('mouseleave', () => {
                //     p.style.setProperty('--x', '-100px'); // убираем пятно за пределы
                //     p.style.setProperty('--y', '-100px');
                // });
                // Но поскольку при mouseleave псевдоэлемент исчезает (нет ховера), то не обязательно.
            });

            // Дополнительно: если нужно, чтобы при первом входе позиция не была (0,0)
            // всё настроено через mouseenter, который сразу даёт координаты.
        })();
    </script>
</body>
</html>[/html]

93

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разговор в темноте · фонарик</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: black;
            font-family: 'Georgia', 'Times New Roman', serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem 1rem;
        }

        /* контейнер рассказа — тёмная комната */
        .story-container {
            max-width: 800px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2.2rem;              /* крупный воздух между абзацами */
            transition: opacity 0.25s ease;
        }

        /* каждый абзац — большой, почти как отдельная панель */
        .story-paragraph {
            background-color: #0f0f0f;    /* глубокий тёмный фон, почти невидимый в темноте */
            color: #ddd;                   /* бледный текст, чтобы слегка угадывался */
            padding: 2.5rem 3rem;         
            border-radius: 48px 12px 48px 12px;  /* мягкие, странные тени — намёк на свет свечи/фонаря */
            font-size: 1.6rem;              /* сам текст довольно крупный */
            line-height: 1.6;
            letter-spacing: 0.01em;
            box-shadow: 0 0 5px rgba(255, 220, 150, 0.1), inset 0 0 20px rgba(0,0,0,0.8);
            border: 1px solid #2a2a1e;       /* тёмная обводка, почти не видна, но задаёт границы */
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
            cursor: default;
            user-select: none;               /* чтобы не выделять случайно, как в темноте */
            word-wrap: break-word;
            opacity: 0.3;                     /* изначально все абзацы едва теплятся */
            filter: blur(0.5px);               /* микро-размытие для эффекта тьмы */
        }

        /* когда на любой абзац наводят — он «освещается»,
           а остальные становятся почти невидимыми */
        .story-container:hover .story-paragraph:not(:hover) {
            opacity: 0.08;                     /* почти полная темнота для фоновых абзацев */
            filter: blur(2px) brightness(0.2);
            transition: opacity 0.35s, filter 0.35s;
            border-color: transparent;          /* убираем контур, чтобы сливались с чернотой */
            box-shadow: none;
        }

        /* абзац, на который направлен курсор — включается свет фонарика */
        .story-paragraph:hover {
            opacity: 1;
            filter: blur(0) brightness(1.2);
            background: #fef7e0;               /* светлый тёплый свет лампы/фонаря */
            color: #1a1a1a;                     /* тёмный текст для контраста на свету */
            box-shadow:
                0 0 40px 15px #fdb84d,          /* яркое наружное свечение — ореол фонаря */
                0 0 60px 30px rgba(253, 184, 77, 0.4),
                inset 0 -5px 15px rgba(0,0,0,0.08);
            border-color: #ffd78c;               /* тёплая обводка как нить лампы */
            transform: scale(1.02);               /* чуть заметно приближается — рука с фонариком */
            transition: all 0.25s ease-out;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none" stroke="%23ffb347" stroke-width="2"/><circle cx="16" cy="16" r="8" fill="%23ffdd99" stroke="%23ffa500" stroke-width="1.5"/><path d="M16 2 L20 8 L12 8 Z" fill="%23ffa500"/></svg>') 16 16, auto; /* милый кастомный фонарик */
        }

        /* дополнительная эстетика: эффект выключенного фонаря на всём контейнере */
        .story-container:not(:hover) .story-paragraph {
            opacity: 0.35;
            transition: opacity 0.9s, filter 0.8s;
        }

        /* декоративная подсказка, сразу создающая настроение */
        .hint {
            color: #555;
            font-family: monospace;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.8rem;
            margin-bottom: 2rem;
            border-left: 2px solid #3a3a3a;
            padding-left: 1rem;
            align-self: flex-start;
            transition: color 0.3s;
        }

        .hint:hover {
            color: #b88a4b;
            border-left-color: #b88a4b;
        }

        /* для красоты на совсем узких экранах */
        @media (max-width: 500px) {
            .story-paragraph {
                padding: 1.8rem 1.5rem;
                font-size: 1.3rem;
            }
        }
    </style>
</head>
<body>
    <div class="hint">🔦 · наведи фонарик на абзац · 🔦</div>

    <div class="story-container">

        <!-- абзац 1: крупный блок -->
        <div class="story-paragraph">
            — Ты здесь? — шёпотом спросил я, хотя знал, что мы в комнате двое. Тишина осязаемо давила на плечи, и собственный голос показался чужим, будто принадлежал кому-то из темноты.
        </div>

        <!-- абзац 2 -->
        <div class="story-paragraph">
            Щелчок — и тонкий луч фонарика выхватил из черноты край стола, чью-то ладонь, край рубашки. Свет дрожал, потому что рука тоже дрожала. Или это воздух был таким густым и вязким?
        </div>

        <!-- абзац 3 -->
        <div class="story-paragraph">
            — Я всегда здесь, — ответил он. Голос звучал сухо, но в темноте даже обычные слова приобретают объём. Казалось, фраза повисла в воздухе светящимся пунктиром.
        </div>

        <!-- абзац 4 -->
        <div class="story-paragraph">
            Луч метнулся к лицу говорившего, но поймал лишь пустоту. Кресло было пустым. Только на сиденье лежал старый фонарь, включённый, повёрнутый стеклом вниз, — он слабо освещал собственный корпус.
        </div>

        <!-- абзац 5 — длинный, чтобы подчеркнуть размер блока -->
        <div class="story-paragraph">
            Я зажмурился, потом снова открыл глаза. Темнота — она честная, она не врёт. Она просто скрывает. Но если всмотреться, в ней можно увидеть всё, что боишься увидеть при свете. Мы говорили ещё долго. Или не говорили? В темноте стирается грань между сказанным и придуманным.
        </div>

        <!-- абзац 6 — последний -->
        <div class="story-paragraph">
            — Знаешь, — произнёс я в пустоту, — я ведь тебя совсем не вижу.<br>
            — А ты посвети на себя, — ответила темнота.<br>
            И я направил фонарик себе в грудь.
        </div>

    </div>

    <!-- маленькая имитация "лунного" или рассеянного света (просто декор) -->
    <div style="margin-top: 3rem; font-size: 0.7rem; color: #332e26; text-align: center; max-width: 600px;">
        <span style="opacity: 0.5;">✧  в темноте любой свет — это голос  ✧</span>
    </div>
</body>
</html>[/html]

94

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фонарик над строками · два абзаца видно</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0a0a0a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 2rem 1rem;
        }

        /* тёмный контейнер — теперь фиксированной высоты, чтобы было видно ровно 2 абзаца */
        .story-container {
            max-width: 1000px;
            width: 100%;
            height: 620px;                    /* примерно на 2 абзаца (с отступами) */
            background-color: #030303;
            border-radius: 32px;
            padding: 2rem 2.2rem;
            box-shadow: 0 25px 40px rgba(0,0,0,1), inset 0 0 10px rgba(255,255,200,0.02);
            border: 1px solid #1e1e1e;
            position: relative;
            overflow-y: auto;                  /* прокрутка для остальных абзацев */
            overflow-x: hidden;
        }

        /* все абзацы без скругления, крупные, но теперь 1000 знаков — шрифт чуть меньше */
        .story-paragraph {
            color: #1f1f1b;
            font-size: 1.4rem;                 /* уменьшен, чтобы уместить по 1000 знаков */
            line-height: 1.7;
            margin-bottom: 2rem;
            padding: 1.3rem 1.6rem;
            border-radius: 0px;                 /* прямоугольные */
            cursor: default;
            letter-spacing: 0.02em;
            border: 1px solid transparent;
            background-color: transparent;
            transition: color 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s;
            position: relative;
            z-index: 2;
            pointer-events: auto;
            user-select: none;
            text-shadow: 0 0 3px rgba(255, 180, 100, 0.1);
            word-wrap: break-word;
            max-width: 100%;
        }

        /* затемнение всех нетронутых абзацев при ховере любого */
        .story-container:hover .story-paragraph:not(:hover) {
            color: #0f0f0c;
            text-shadow: none;
            background-color: #060605;
            border-color: #1e1b14;
            transition: color 0.3s, background-color 0.3s;
        }

        /* подсвеченный абзац */
        .story-paragraph:hover {
            color: #faefd6;
            text-shadow: 0 0 12px #fcc77e, 0 0 30px #ffb054;
            background-color: #302c21;
            border-color: #bc9f60;
            transition: color 0.15s, text-shadow 0.15s, background-color 0.15s, border-color 0.15s;
            user-select: text;
            z-index: 20;
        }

        /* круг фонарика */
        .story-paragraph:hover::after {
            content: '';
            position: absolute;
            top: var(--y, 0);
            left: var(--x, 0);
            width: 260px;
            height: 260px;
            background: radial-gradient(circle at center,
                rgba(255, 240, 180, 0.5) 0%,
                rgba(255, 220, 130, 0.3) 35%,
                rgba(180, 130, 60, 0.1) 70%,
                transparent 90%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 25;
            mix-blend-mode: screen;
            filter: blur(5px) brightness(1.4);
            box-shadow: 0 0 50px 20px rgba(255, 200, 100, 0.25);
        }

        /* дополнительное свечение */
        .story-paragraph:hover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%),
                        rgba(255, 220, 140, 0.2) 0%,
                        transparent 75%);
            border-radius: 0px;
            pointer-events: none;
            z-index: 22;
            mix-blend-mode: overlay;
        }

        .story-paragraph {
            --x: 0px;
            --y: 0px;
        }

        /* подпись */
        .story-tip {
            color: #3c392f;
            font-size: 1rem;
            text-align: center;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            border-top: 1px dashed #3f392b;
            padding-top: 1.2rem;
            letter-spacing: 3px;
            opacity: 0.5;
            position: sticky;
            bottom: 0;
            background-color: #030303;   /* чтобы не просвечивал текст при прокрутке */
            padding-bottom: 0.8rem;
            width: 100%;
            z-index: 10;
        }

        @media (max-width: 700px) {
            .story-container { height: 550px; padding: 1.5rem; }
            .story-paragraph { font-size: 1.2rem; padding: 1rem; }
        }
    </style>
</head>
<body>
    <div class="story-container">

        <!-- АБЗАЦ 1 · ровно 1000 символов (с пробелами) -->
        <p class="story-paragraph" id="p1">
— Ну, князь, Генуя и Лукка стали не больше как поместьями фамилии Бонапарте. Нет, я вас предупреждаю, если вы мне не скажете, что у нас война, если вы еще позволите защищать все гадости, ужасы этого Антихриста (право, я верю, что он Антихрист), — я вас больше не знаю, вы уж не друг мой, вы уж не мой верный раб, как вы говорите. Ну, здравствуйте, здравствуйте. Je vois que je vous fais peur, садитесь и рассказывайте. Так говорила в июле 1805 года известная Анна Павловна Шерер, фрейлина и приближенная императрицы Марии Феодоровны, встречая важного и чиновного князя Василия, первого приехавшего на ее вечер. Анна Павловна кашляла несколько дней, у нее был грипп (грипп был тогда новое слово). В записочках, разосланных утром с красным лакеем, было написано: «Si vous n'avez rien de mieux a faire, M. le comte, et si la perspective de passer la soiree chez une pauvre malade ne vous effraye pas trop, je serai charmee de vous voir chez moi entre 7 et 10 heures. Annette Scherer». — Dieu, quelle virulente sortie! — отвечал, нисколько не смутясь, вошедший князь, в придворном мундире, в чулках, башмаках и звездах, с светлым выражением плоского лица. Он говорил на том изысканном французском языке, на котором не только говорили, но и думали наши деды, и с теми тихими, покровительственными интонациями, которые свойственны состаревшемуся в свете значительному человеку. Он подошел к Анне Павловне, поцеловал ее руку, подставив ей свою надушенную и сияющую лысину, и покойно уселся на диване. — Avant tout, dites-moi, comment vous allez, chere amie? Успокойте меня, — сказал он, не изменяя голоса и тоном, в котором из-за приличия и участия просвечивало равнодушие и даже насмешка.
        </p>

        <!-- АБЗАЦ 2 · 1000 символов -->
        <p class="story-paragraph" id="p2">
— Как можно быть здоровой... когда нравственно страдаешь? Разве можно, имея чувство, оставаться спокойною в наше время? — сказала Анна Павловна. — Вы весь вечер у меня, надеюсь? — А праздник английского посланника? Нынче среда. Мне надо показаться там, — сказал князь. — Дочь заедет за мной и повезет. — Я думала, что нынешний праздник отменен. Je vous avoue que toutes ces fetes et tous ces feux d'artifice commencent a devenir insipides. — Ежели бы знали, что вы этого хотите, праздник бы отменили, — сказал князь по привычке, как заведенные часы, говоря вещи, которым он и не хотел, чтобы верили. — Ne me tourmentez pas. Eh bien, qu'a-t-on decide par rapport a la depeche de Novosilzoff? Vous savez tout. — Как вам сказать? — сказал князь холодным, скучающим тоном. — Qu'a-t-on decide? On a decide que Buonaparte a brule ses vaisseaux, et je crois que nous sommes en train de bruler les notres. Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов. Быть энтузиасткой сделалось ее общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка.
        </p>

        <!-- АБЗАЦ 3 · 1000 символов -->
        <p class="story-paragraph" id="p3">
В середине разговора про политические действия Анна Павловна разгорячилась. — Ах, не говорите мне про Австрию! Я ничего не понимаю, может быть, но Австрия никогда не хотела и не хочет войны. Она предает нас. Россия одна должна быть спасительницей Европы. Наш благодетель знает свое высокое призвание и будет верен ему. Вот одно, во что я верю. Нашему доброму и чудному государю предстоит величайшая роль в мире, и он так добродетелен и хорош, что Бог не оставит его, и он исполнит свое призвание задавить гидру революции, которая теперь еще ужаснее в лице этого убийцы и злодея. Мы одни должны искупить кровь праведника... На кого нам надеяться, я вас спрашиваю?.. Англия с своим коммерческим духом не поймет и не может понять всю высоту души императора Александра. Она отказалась очистить Мальту. Она хочет видеть, ищет заднюю мысль наших действий. Что они сказали Новосильцову?.. Ничего. Они не поняли, они не могли понять самоотвержения нашего императора, который ничего не хочет для себя и всё хочет для блага мира. И что они обещали? Ничего. И что обещали, и того не будет! Пруссия уже объявила, что Бонапарте непобедим и что вся Европа ничего не может против него... И я не верю ни в одном слове ни Гарденбергу, ни Гаугвицу. Cette fameuse neutralite prussienne, ce n'est qu'un piege. Я верю в одного Бога и в высокую судьбу нашего обожаемого императора. Он спасет Европу!..
        </p>

        <!-- АБЗАЦ 4 · 1000 символов -->
        <p class="story-paragraph" id="p4">
— Я думаю, — сказал князь улыбаясь, — что ежели бы вас послали вместо нашего милого Винценгероде, вы бы взяли приступом согласие прусского короля. Вы так красноречивы. Вы дадите мне чаю? — Сейчас. A propos, — прибавила она, опять успокоиваясь, — нынче у меня два очень интересные человека, le vicomte de MorteMart, il est allie aux Montmorency par les Rohans, одна из лучших фамилий Франции. Это один из хороших эмигрантов, из настоящих. И потом l'abbe Morio; вы знаете этот глубокий ум? Он был принят государем. Вы знаете? — А! Я очень рад буду, — сказал князь. — Скажите, — прибавил он, как будто только что вспомнив что-то и особенно небрежно, тогда как то, о чем он спрашивал, было главною целью его посещения, — правда, что l'imperatrice-mere желает назначения барона Функе первым секретарем в Вену? C'est un pauvre sire, ce baron, a ce qu'il parait. — Князь Василий желал определить сына на это место, которое через императрицу Марию Феодоровну старались доставить барону. Анна Павловна почти закрыла глаза в знак того, что ни она, никто другой не может судить про то, что угодно или нравится императрице. — Monsieur le baron de Funke a ete recommande a l'imperatrice-mere par sa soeur, — только сказала она грустным, сухим тоном. В то время как Анна Павловна назвала императрицу, лицо ее вдруг представило глубокое выражение преданности и уважения.
        </p>

        <!-- АБЗАЦ 5 · 1000 символов -->
        <p class="story-paragraph" id="p5">
— Mais a propos de votre famille, — сказала она, — знаете ли, что ваша дочь, с тех пор как выезжает, fait les delices de tout le monde. On la trouve belle comme le jour. Князь поклонился в знак уважения и признательности. — Я часто думаю, — продолжала Анна Павловна после минутного молчания, придвигаясь к князю и ласково улыбаясь ему, как будто выказывая этим, что политические и светские разговоры кончены и теперь начинается задушевный, — я часто думаю, как иногда несправедливо распределяется счастие жизни. За что вам судьба дала двух таких славных детей (исключая Анатоля, вашего меньшого, я его не люблю, — вставила она безапелляционно, приподняв брови), — таких прелестных детей? А вы, право, меньше всех цените их и потому их не стоите. И она улыбнулась своею восторженною улыбкой. — Que voulez-vous? Lafater aurait dit que je n'ai pas la bosse de la paternite, — сказал князь. — Перестаньте шутить. Я хотела серьезно поговорить с вами. Знаете, я недовольна вашим меньшим сыном. Между нами будь сказано (лицо ее приняло грустное выражение), о нем говорили у ее величества и жалеют вас... Князь не отвечал, но она молча, значительно глядя на него, ждала ответа. Князь Василий поморщился. — Что ж мне делать? — сказал он наконец.
        </p>

        <!-- АБЗАЦ 6 · 1000 символов -->
        <p class="story-paragraph" id="p6">
Гостиная Анны Павловны начала понемногу наполняться. Приехала высшая знать Петербурга: люди самые разнородные по возрастам и характерам, но одинаковые по обществу, в каком все жили; приехала дочь князя Василия, красавица Элен, заехавшая за отцом, чтобы с ним вместе ехать на праздник посланника. Она была в шифре и бальном платье. Приехала и известная, как la femme la plus seduisante de Petersbourg, молодая, маленькая княгиня Болконская, прошлую зиму вышедшая замуж и теперь не выезжавшая в большой свет по причине своей беременности, но ездившая еще на небольшие вечера. Приехал князь Ипполит, сын князя Василия, с Мортемаром, которого он представил; приехал и аббат Морио и многие другие. — Вы не видали еще, или: — вы не знакомы с ma tante? — говорила Анна Павловна приезжавшим гостям и весьма серьезно подводила их к маленькой старушке в высоких бантах, выплывшей из другой комнаты, как скоро стали приезжать гости, называла их по имени, медленно переводя глаза с гостя на ma tante, и потом отходила. Все гости совершали обряд приветствования никому не известной тетушки.
        </p>

        <div class="story-tip">✻  наведи фонарик на строку  ✻</div>
    </div>

    <script>
        (function() {
            const paragraphs = document.querySelectorAll('.story-paragraph');
           
            const updatePosition = (e, element) => {
                const rect = element.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                element.style.setProperty('--x', x + 'px');
                element.style.setProperty('--y', y + 'px');
            };

            paragraphs.forEach(p => {
                p.addEventListener('mousemove', (e) => {
                    updatePosition(e, p);
                });
                p.addEventListener('mouseenter', (e) => {
                    updatePosition(e, p);
                });
            });
        })();
    </script>
</body>
</html>[/html]

95

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фонарик · контейнер в контейнере</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0a0a0a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 2rem 1rem;
        }

        /* внешний контейнер — совсем без тени, только тёмный фон */
        .story-container {
            max-width: 1000px;
            width: 100%;
            height: 620px;                    /* видно 2 абзаца */
            background-color: #030303;
            border-radius: 32px;
            /* тень внешняя УБРАНА */
            /* box-shadow: 0 25px 40px rgba(0,0,0,1); */ /* удалено */
            border: 1px solid #1e1e1e;
            position: relative;
            overflow: hidden;                  /* скролл будет внутри дочернего */
            display: flex;
            flex-direction: column;
        }

        /* ВНУТРЕННИЙ КОНТЕЙНЕР — именно он скроллится, с минималистичными паддингами */
        .story-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 4rem 4.5rem;              /* красивые, но минималистичные отступы */
            scrollbar-width: thin;               /* для Firefox — тонкий скролл */
            scrollbar-color: #3f3b33 #0f0f0c;    /* Firefox: ползунок и трек */
        }

        /* стилизация скролла для Chrome/Edge/Safari (минимализм) */
        .story-content::-webkit-scrollbar {
            width: 8px;                          /* очень тонкий */
        }
        .story-content::-webkit-scrollbar-track {
            background: #0f0f0c;                  /* трек в цвет фона */
            border-radius: 20px;
            margin-block: 8px;                    /* небольшой отступ сверху/снизу */
        }
        .story-content::-webkit-scrollbar-thumb {
            background: #3f3b33;                  /* ползунок — тёмно-серый/коричневый */
            border-radius: 20px;
            border: 1px solid #1e1b14;            /* едва заметная граница */
        }
        .story-content::-webkit-scrollbar-thumb:hover {
            background: #5f5542;                  /* чуть светлее при наведении */
        }

        /* все абзацы без скругления, шрифт крупный, но умещаем 1000 знаков */
        .story-paragraph {
            color: #1f1f1b;
            font-size: 1.4rem;
            line-height: 1.7;
            margin-bottom: 2rem;
            padding: 1.3rem 1.6rem;
            border-radius: 0px;                 /* прямоугольные */
            cursor: default;
            letter-spacing: 0.02em;
            border: 1px solid transparent;
            background-color: transparent;
            transition: color 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s;
            position: relative;
            z-index: 2;
            pointer-events: auto;
            user-select: none;
            text-shadow: 0 0 3px rgba(255, 180, 100, 0.1);
            word-wrap: break-word;
            max-width: 100%;
        }

        /* затемнение нетронутых абзацев */
        .story-content:hover .story-paragraph:not(:hover) {
            color: #0f0f0c;
            text-shadow: none;
            background-color: #060605;
            border-color: #1e1b14;
            transition: color 0.3s, background-color 0.3s;
        }

        /* подсвеченный абзац */
        .story-paragraph:hover {
            color: #faefd6;
            text-shadow: 0 0 12px #fcc77e, 0 0 30px #ffb054;
            background-color: #302c21;
            border-color: #bc9f60;
            transition: color 0.15s, text-shadow 0.15s, background-color 0.15s, border-color 0.15s;
            user-select: text;
            z-index: 20;
        }

        /* круг фонарика */
        .story-paragraph:hover::after {
            content: '';
            position: absolute;
            top: var(--y, 0);
            left: var(--x, 0);
            width: 260px;
            height: 260px;
            background: radial-gradient(circle at center,
                rgba(255, 240, 180, 0.5) 0%,
                rgba(255, 220, 130, 0.3) 35%,
                rgba(180, 130, 60, 0.1) 70%,
                transparent 90%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 25;
            mix-blend-mode: screen;
            filter: blur(5px) brightness(1.4);
            box-shadow: 0 0 50px 20px rgba(255, 200, 100, 0.25);
        }

        /* дополнительное свечение */
        .story-paragraph:hover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%),
                        rgba(255, 220, 140, 0.2) 0%,
                        transparent 75%);
            border-radius: 0px;
            pointer-events: none;
            z-index: 22;
            mix-blend-mode: overlay;
        }

        .story-paragraph {
            --x: 0px;
            --y: 0px;
        }

        /* подпись — теперь внутри story-content, поэтому sticky не нужен, просто как элемент */
        .story-tip {
            color: #3c392f;
            font-size: 1rem;
            text-align: center;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            border-top: 1px dashed #3f392b;
            padding-top: 1.2rem;
            letter-spacing: 3px;
            opacity: 0.5;
            width: 100%;
        }

        /* адаптация */
        @media (max-width: 700px) {
            .story-container { height: 550px; }
            .story-content { padding: 1.5rem; }
            .story-paragraph { font-size: 1.2rem; padding: 1rem; }
        }
    </style>
</head>
<body>
    <div class="story-container">
        <!-- ВНУТРЕННИЙ КОНТЕЙНЕР со скроллом и красивыми padding -->
        <div class="story-content">

            <!-- АБЗАЦ 1 · 1000 символов -->
            <p class="story-paragraph" id="p1">
— Ну, князь, Генуя и Лукка стали не больше как поместьями фамилии Бонапарте. Нет, я вас предупреждаю, если вы мне не скажете, что у нас война, если вы еще позволите защищать все гадости, ужасы этого Антихриста (право, я верю, что он Антихрист), — я вас больше не знаю, вы уж не друг мой, вы уж не мой верный раб, как вы говорите. Ну, здравствуйте, здравствуйте. Je vois que je vous fais peur, садитесь и рассказывайте. Так говорила в июле 1805 года известная Анна Павловна Шерер, фрейлина и приближенная императрицы Марии Феодоровны, встречая важного и чиновного князя Василия, первого приехавшего на ее вечер. Анна Павловна кашляла несколько дней, у нее был грипп (грипп был тогда новое слово). В записочках, разосланных утром с красным лакеем, было написано: «Si vous n'avez rien de mieux a faire, M. le comte, et si la perspective de passer la soiree chez une pauvre malade ne vous effraye pas trop, je serai charmee de vous voir chez moi entre 7 et 10 heures. Annette Scherer». — Dieu, quelle virulente sortie! — отвечал, нисколько не смутясь, вошедший князь, в придворном мундире, в чулках, башмаках и звездах, с светлым выражением плоского лица. Он говорил на том изысканном французском языке, на котором не только говорили, но и думали наши деды, и с теми тихими, покровительственными интонациями, которые свойственны состаревшемуся в свете значительному человеку. Он подошел к Анне Павловне, поцеловал ее руку, подставив ей свою надушенную и сияющую лысину, и покойно уселся на диване. — Avant tout, dites-moi, comment vous allez, chere amie? Успокойте меня, — сказал он, не изменяя голоса и тоном, в котором из-за приличия и участия просвечивало равнодушие и даже насмешка.
            </p>

            <!-- АБЗАЦ 2 · 1000 символов -->
            <p class="story-paragraph" id="p2">
— Как можно быть здоровой... когда нравственно страдаешь? Разве можно, имея чувство, оставаться спокойною в наше время? — сказала Анна Павловна. — Вы весь вечер у меня, надеюсь? — А праздник английского посланника? Нынче среда. Мне надо показаться там, — сказал князь. — Дочь заедет за мной и повезет. — Я думала, что нынешний праздник отменен. Je vous avoue que toutes ces fetes et tous ces feux d'artifice commencent a devenir insipides. — Ежели бы знали, что вы этого хотите, праздник бы отменили, — сказал князь по привычке, как заведенные часы, говоря вещи, которым он и не хотел, чтобы верили. — Ne me tourmentez pas. Eh bien, qu'a-t-on decide par rapport a la depeche de Novosilzoff? Vous savez tout. — Как вам сказать? — сказал князь холодным, скучающим тоном. — Qu'a-t-on decide? On a decide que Buonaparte a brule ses vaisseaux, et je crois que nous sommes en train de bruler les notres. Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов. Быть энтузиасткой сделалось ее общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка.
            </p>

            <!-- АБЗАЦ 3 · 1000 символов -->
            <p class="story-paragraph" id="p3">
В середине разговора про политические действия Анна Павловна разгорячилась. — Ах, не говорите мне про Австрию! Я ничего не понимаю, может быть, но Австрия никогда не хотела и не хочет войны. Она предает нас. Россия одна должна быть спасительницей Европы. Наш благодетель знает свое высокое призвание и будет верен ему. Вот одно, во что я верю. Нашему доброму и чудному государю предстоит величайшая роль в мире, и он так добродетелен и хорош, что Бог не оставит его, и он исполнит свое призвание задавить гидру революции, которая теперь еще ужаснее в лице этого убийцы и злодея. Мы одни должны искупить кровь праведника... На кого нам надеяться, я вас спрашиваю?.. Англия с своим коммерческим духом не поймет и не может понять всю высоту души императора Александра. Она отказалась очистить Мальту. Она хочет видеть, ищет заднюю мысль наших действий. Что они сказали Новосильцову?.. Ничего. Они не поняли, они не могли понять самоотвержения нашего императора, который ничего не хочет для себя и всё хочет для блага мира. И что они обещали? Ничего. И что обещали, и того не будет! Пруссия уже объявила, что Бонапарте непобедим и что вся Европа ничего не может против него... И я не верю ни в одном слове ни Гарденбергу, ни Гаугвицу. Cette fameuse neutralite prussienne, ce n'est qu'un piege. Я верю в одного Бога и в высокую судьбу нашего обожаемого императора. Он спасет Европу!..
            </p>

            <!-- АБЗАЦ 4 · 1000 символов -->
            <p class="story-paragraph" id="p4">
— Я думаю, — сказал князь улыбаясь, — что ежели бы вас послали вместо нашего милого Винценгероде, вы бы взяли приступом согласие прусского короля. Вы так красноречивы. Вы дадите мне чаю? — Сейчас. A propos, — прибавила она, опять успокоиваясь, — нынче у меня два очень интересные человека, le vicomte de MorteMart, il est allie aux Montmorency par les Rohans, одна из лучших фамилий Франции. Это один из хороших эмигрантов, из настоящих. И потом l'abbe Morio; вы знаете этот глубокий ум? Он был принят государем. Вы знаете? — А! Я очень рад буду, — сказал князь. — Скажите, — прибавил он, как будто только что вспомнив что-то и особенно небрежно, тогда как то, о чем он спрашивал, было главною целью его посещения, — правда, что l'imperatrice-mere желает назначения барона Функе первым секретарем в Вену? C'est un pauvre sire, ce baron, a ce qu'il parait. — Князь Василий желал определить сына на это место, которое через императрицу Марию Феодоровну старались доставить барону. Анна Павловна почти закрыла глаза в знак того, что ни она, никто другой не может судить про то, что угодно или нравится императрице. — Monsieur le baron de Funke a ete recommande a l'imperatrice-mere par sa soeur, — только сказала она грустным, сухим тоном. В то время как Анна Павловна назвала императрицу, лицо ее вдруг представило глубокое выражение преданности и уважения.
            </p>

            <!-- АБЗАЦ 5 · 1000 символов -->
            <p class="story-paragraph" id="p5">
— Mais a propos de votre famille, — сказала она, — знаете ли, что ваша дочь, с тех пор как выезжает, fait les delices de tout le monde. On la trouve belle comme le jour. Князь поклонился в знак уважения и признательности. — Я часто думаю, — продолжала Анна Павловна после минутного молчания, придвигаясь к князю и ласково улыбаясь ему, как будто выказывая этим, что политические и светские разговоры кончены и теперь начинается задушевный, — я часто думаю, как иногда несправедливо распределяется счастие жизни. За что вам судьба дала двух таких славных детей (исключая Анатоля, вашего меньшого, я его не люблю, — вставила она безапелляционно, приподняв брови), — таких прелестных детей? А вы, право, меньше всех цените их и потому их не стоите. И она улыбнулась своею восторженною улыбкой. — Que voulez-vous? Lafater aurait dit que je n'ai pas la bosse de la paternite, — сказал князь. — Перестаньте шутить. Я хотела серьезно поговорить с вами. Знаете, я недовольна вашим меньшим сыном. Между нами будь сказано (лицо ее приняло грустное выражение), о нем говорили у ее величества и жалеют вас... Князь не отвечал, но она молча, значительно глядя на него, ждала ответа. Князь Василий поморщился. — Что ж мне делать? — сказал он наконец.
            </p>

            <!-- АБЗАЦ 6 · 1000 символов -->
            <p class="story-paragraph" id="p6">
Гостиная Анны Павловны начала понемногу наполняться. Приехала высшая знать Петербурга: люди самые разнородные по возрастам и характерам, но одинаковые по обществу, в каком все жили; приехала дочь князя Василия, красавица Элен, заехавшая за отцом, чтобы с ним вместе ехать на праздник посланника. Она была в шифре и бальном платье. Приехала и известная, как la femme la plus seduisante de Petersbourg, молодая, маленькая княгиня Болконская, прошлую зиму вышедшая замуж и теперь не выезжавшая в большой свет по причине своей беременности, но ездившая еще на небольшие вечера. Приехал князь Ипполит, сын князя Василия, с Мортемаром, которого он представил; приехал и аббат Морио и многие другие. — Вы не видали еще, или: — вы не знакомы с ma tante? — говорила Анна Павловна приезжавшим гостям и весьма серьезно подводила их к маленькой старушке в высоких бантах, выплывшей из другой комнаты, как скоро стали приезжать гости, называла их по имени, медленно переводя глаза с гостя на ma tante, и потом отходила. Все гости совершали обряд приветствования никому не известной тетушки.
            </p>

            <div class="story-tip">✻  наведи фонарик на строку  ✻</div>

        </div> <!-- конец story-content -->
    </div> <!-- конец story-container -->

    <script>
        (function() {
            const paragraphs = document.querySelectorAll('.story-paragraph');
           
            const updatePosition = (e, element) => {
                const rect = element.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                element.style.setProperty('--x', x + 'px');
                element.style.setProperty('--y', y + 'px');
            };

            paragraphs.forEach(p => {
                p.addEventListener('mousemove', (e) => {
                    updatePosition(e, p);
                });
                p.addEventListener('mouseenter', (e) => {
                    updatePosition(e, p);
                });
            });
        })();
    </script>
</body>
</html>[/html]

96

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фонарик · роскошный контейнер</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0f0b06;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 2rem 1rem;
        }

        /* ─────────────── НОВЫЙ ВНЕШНИЙ КОНТЕЙНЕР (СИЛЬНЫЙ ЭФФЕКТ) ─────────────── */
        .story-container {
            max-width: 1000px;
            width: 100%;
            height: 620px;
           
            /* база */
            background: #0a0806;
            border-radius: 36px;
           
            /* 1. МАССИВНАЯ ВНЕШНЯЯ ТЕНЬ + СВЕЧЕНИЕ */
            box-shadow:
                0 30px 60px -15px #000000,
                0 0 0 2px rgba(210, 170, 100, 0.7),        /* яркая внешняя окантовка */
                0 0 30px 10px #c9a458,                      /* сильное золотое свечение */
                0 0 60px 20px rgba(200, 140, 60, 0.4),      /* дополнительный ореол */
                inset 0 0 30px 10px rgba(255, 215, 140, 0.3); /* внутреннее свечение */
           
            /* 2. СТЕКЛЯННАЯ ТЕКСТУРА С ПЕРЕЛИВАМИ */
            background:
                /* звёзды — крупные и яркие */
                radial-gradient(circle at 15% 20%, #ffecb0 2px, transparent 4px),
                radial-gradient(circle at 80% 30%, #ffe4a0 3px, transparent 5px),
                radial-gradient(circle at 45% 70%, #ffd890 4px, transparent 6px),
                radial-gradient(circle at 90% 85%, #ffddb0 3px, transparent 5px),
                radial-gradient(circle at 25% 90%, #ffcf80 2px, transparent 4px),
                radial-gradient(circle at 70% 15%, #ffc870 3px, transparent 5px),
                /* градиентные переливы (стекло) */
                linear-gradient(145deg,
                    rgba(70, 50, 30, 0.7) 0%,
                    rgba(20, 15, 10, 0.9) 50%,
                    rgba(60, 40, 20, 0.7) 100%),
                /* подложка с металлическим отливом */
                linear-gradient(0deg, #1a130a 0%, #2f2519 100%);
           
            background-blend-mode: overlay, normal, normal;
           
            /* 3. ДВОЙНАЯ РАМКА С ЗОЛОТЫМ ГРАДИЕНТОМ */
            border: 3px solid transparent;
            border-image: linear-gradient(135deg, #bf9f60, #8b6f40, #dbb87c, #9f854a) 1;
           
            /* дополнительный объёмный кант */
            outline: 2px solid #ac8e54;
            outline-offset: 4px;
           
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
           
            /* анимация мерцания */
            transition: box-shadow 0.3s ease;
        }

        /* мерцание при наведении на весь контейнер */
        .story-container:hover {
            box-shadow:
                0 30px 70px -10px #000000,
                0 0 0 3px rgba(240, 200, 120, 0.9),
                0 0 40px 20px #fdcd7a,
                0 0 80px 30px rgba(230, 170, 80, 0.5),
                inset 0 0 40px 15px rgba(255, 225, 150, 0.4);
        }

        /* 4. ВНУТРЕННЯЯ ГРАДИЕНТНАЯ РАМКА (узор) */
        .story-container::before {
            content: '';
            position: absolute;
            inset: 8px;
            border-radius: 28px;
            border: 2px solid transparent;
            background: linear-gradient(145deg, #f0d890, #b39250, #e9c87a) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 5;
            opacity: 0.8;
        }

        /* 5. ВЕРХНЯЯ ПОДСВЕТКА (блик) */
        .story-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 120px;
            background: radial-gradient(ellipse at 30% 0%, rgba(255, 235, 170, 0.5) 0%, transparent 70%);
            border-radius: 36px 36px 100px 100px;
            pointer-events: none;
            z-index: 6;
            mix-blend-mode: soft-light;
        }

        /* ВНУТРЕННИЙ КОНТЕЙНЕР — без изменений */
        .story-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 4rem 4.5rem;
            scrollbar-width: thin;
            scrollbar-color: #c1a05b #201a12;
            position: relative;
            z-index: 20;
        }

        /* стилизация скролла под золото */
        .story-content::-webkit-scrollbar {
            width: 10px;
        }
        .story-content::-webkit-scrollbar-track {
            background: #201a12;
            border-radius: 20px;
            margin-block: 10px;
            border: 1px solid #5f4f32;
        }
        .story-content::-webkit-scrollbar-thumb {
            background: linear-gradient(145deg, #dbb87c, #a7874a);
            border-radius: 20px;
            border: 1px solid #ffdf9c;
        }
        .story-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(145deg, #f5d99c, #c9a55c);
        }

        /* абзацы — оригинальные, только чуть поднял контрастность на фоне */
        .story-paragraph {
            color: #ddd3c0;
            font-size: 1.4rem;
            line-height: 1.7;
            margin-bottom: 2rem;
            padding: 1.3rem 1.6rem;
            border-radius: 0px;
            cursor: default;
            letter-spacing: 0.02em;
            border: 1px solid transparent;
            background-color: transparent;
            transition: color 0.2s, text-shadow 0.2s, background-color 0.2s, border-color 0.2s;
            position: relative;
            z-index: 2;
            pointer-events: auto;
            user-select: none;
            text-shadow: 0 0 5px rgba(255, 200, 120, 0.3);
            word-wrap: break-word;
            max-width: 100%;
            font-weight: 400;
        }

        .story-content:hover .story-paragraph:not(:hover) {
            color: #7a6e5a;
            text-shadow: none;
            background-color: #0d0b08;
            border-color: #3f3629;
        }

        .story-paragraph:hover {
            color: #fff8e7;
            text-shadow: 0 0 15px #ffcf8a, 0 0 40px #ffb347;
            background-color: #4a4132;
            border-color: #efcd95;
            transition: color 0.15s, text-shadow 0.15s, background-color 0.15s, border-color 0.15s;
            user-select: text;
            z-index: 30;
        }

        .story-paragraph:hover::after {
            content: '';
            position: absolute;
            top: var(--y, 0);
            left: var(--x, 0);
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at center,
                rgba(255, 240, 160, 0.7) 0%,
                rgba(255, 200, 100, 0.5) 30%,
                rgba(180, 120, 40, 0.2) 60%,
                transparent 85%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 35;
            mix-blend-mode: screen;
            filter: blur(8px) brightness(1.5);
            box-shadow: 0 0 70px 30px rgba(255, 180, 60, 0.4);
        }

        .story-paragraph:hover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%),
                        rgba(255, 210, 120, 0.3) 0%,
                        transparent 80%);
            border-radius: 0px;
            pointer-events: none;
            z-index: 32;
            mix-blend-mode: overlay;
        }

        .story-paragraph {
            --x: 0px;
            --y: 0px;
        }

        .story-tip {
            color: #b8a27b;
            font-size: 1rem;
            text-align: center;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            border-top: 2px solid #b69453;
            padding-top: 1.2rem;
            letter-spacing: 4px;
            opacity: 1;
            width: 100%;
            text-shadow: 0 0 8px #e1b87c;
            font-weight: 300;
        }

        @media (max-width: 700px) {
            .story-container { height: 550px; }
            .story-content { padding: 1.5rem; }
            .story-paragraph { font-size: 1.2rem; padding: 1rem; }
        }
    </style>
</head>
<body>
    <div class="story-container">
        <div class="story-content">
            <!-- Абзацы без изменений (те же) -->
            <p class="story-paragraph" id="p1">
— Ну, князь, Генуя и Лукка стали не больше как поместьями фамилии Бонапарте. Нет, я вас предупреждаю, если вы мне не скажете, что у нас война, если вы еще позволите защищать все гадости, ужасы этого Антихриста (право, я верю, что он Антихрист), — я вас больше не знаю, вы уж не друг мой, вы уж не мой верный раб, как вы говорите. Ну, здравствуйте, здравствуйте. Je vois que je vous fais peur, садитесь и рассказывайте. Так говорила в июле 1805 года известная Анна Павловна Шерер, фрейлина и приближенная императрицы Марии Феодоровны, встречая важного и чиновного князя Василия, первого приехавшего на ее вечер. Анна Павловна кашляла несколько дней, у нее был грипп (грипп был тогда новое слово). В записочках, разосланных утром с красным лакеем, было написано: «Si vous n'avez rien de mieux a faire, M. le comte, et si la perspective de passer la soiree chez une pauvre malade ne vous effraye pas trop, je serai charmee de vous voir chez moi entre 7 et 10 heures. Annette Scherer». — Dieu, quelle virulente sortie! — отвечал, нисколько не смутясь, вошедший князь, в придворном мундире, в чулках, башмаках и звездах, с светлым выражением плоского лица. Он говорил на том изысканном французском языке, на котором не только говорили, но и думали наши деды, и с теми тихими, покровительственными интонациями, которые свойственны состаревшемуся в свете значительному человеку. Он подошел к Анне Павловне, поцеловал ее руку, подставив ей свою надушенную и сияющую лысину, и покойно уселся на диване. — Avant tout, dites-moi, comment vous allez, chere amie? Успокойте меня, — сказал он, не изменяя голоса и тоном, в котором из-за приличия и участия просвечивало равнодушие и даже насмешка.
            </p>
            <p class="story-paragraph" id="p2">
— Как можно быть здоровой... когда нравственно страдаешь? Разве можно, имея чувство, оставаться спокойною в наше время? — сказала Анна Павловна. — Вы весь вечер у меня, надеюсь? — А праздник английского посланника? Нынче среда. Мне надо показаться там, — сказал князь. — Дочь заедет за мной и повезет. — Я думала, что нынешний праздник отменен. Je vous avoue que toutes ces fetes et tous ces feux d'artifice commencent a devenir insipides. — Ежели бы знали, что вы этого хотите, праздник бы отменили, — сказал князь по привычке, как заведенные часы, говоря вещи, которым он и не хотел, чтобы верили. — Ne me tourmentez pas. Eh bien, qu'a-t-on decide par rapport a la depeche de Novosilzoff? Vous savez tout. — Как вам сказать? — сказал князь холодным, скучающим тоном. — Qu'a-t-on decide? On a decide que Buonaparte a brule ses vaisseaux, et je crois que nous sommes en train de bruler les notres. Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов. Быть энтузиасткой сделалось ее общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка.
            </p>
            <p class="story-paragraph" id="p3">
В середине разговора про политические действия Анна Павловна разгорячилась. — Ах, не говорите мне про Австрию! Я ничего не понимаю, может быть, но Австрия никогда не хотела и не хочет войны. Она предает нас. Россия одна должна быть спасительницей Европы. Наш благодетель знает свое высокое призвание и будет верен ему. Вот одно, во что я верю. Нашему доброму и чудному государю предстоит величайшая роль в мире, и он так добродетелен и хорош, что Бог не оставит его, и он исполнит свое призвание задавить гидру революции, которая теперь еще ужаснее в лице этого убийцы и злодея. Мы одни должны искупить кровь праведника... На кого нам надеяться, я вас спрашиваю?.. Англия с своим коммерческим духом не поймет и не может понять всю высоту души императора Александра. Она отказалась очистить Мальту. Она хочет видеть, ищет заднюю мысль наших действий. Что они сказали Новосильцову?.. Ничего. Они не поняли, они не могли понять самоотвержения нашего императора, который ничего не хочет для себя и всё хочет для блага мира. И что они обещали? Ничего. И что обещали, и того не будет! Пруссия уже объявила, что Бонапарте непобедим и что вся Европа ничего не может против него... И я не верю ни в одном слове ни Гарденбергу, ни Гаугвицу. Cette fameuse neutralite prussienne, ce n'est qu'un piege. Я верю в одного Бога и в высокую судьбу нашего обожаемого императора. Он спасет Европу!..
            </p>
            <p class="story-paragraph" id="p4">
— Я думаю, — сказал князь улыбаясь, — что ежели бы вас послали вместо нашего милого Винценгероде, вы бы взяли приступом согласие прусского короля. Вы так красноречивы. Вы дадите мне чаю? — Сейчас. A propos, — прибавила она, опять успокоиваясь, — нынче у меня два очень интересные человека, le vicomte de MorteMart, il est allie aux Montmorency par les Rohans, одна из лучших фамилий Франции. Это один из хороших эмигрантов, из настоящих. И потом l'abbe Morio; вы знаете этот глубокий ум? Он был принят государем. Вы знаете? — А! Я очень рад буду, — сказал князь. — Скажите, — прибавил он, как будто только что вспомнив что-то и особенно небрежно, тогда как то, о чем он спрашивал, было главною целью его посещения, — правда, что l'imperatrice-mere желает назначения барона Функе первым секретарем в Вену? C'est un pauvre sire, ce baron, a ce qu'il parait. — Князь Василий желал определить сына на это место, которое через императрицу Марию Феодоровну старались доставить барону. Анна Павловна почти закрыла глаза в знак того, что ни она, никто другой не может судить про то, что угодно или нравится императрице. — Monsieur le baron de Funke a ete recommande a l'imperatrice-mere par sa soeur, — только сказала она грустным, сухим тоном. В то время как Анна Павловна назвала императрицу, лицо ее вдруг представило глубокое выражение преданности и уважения.
            </p>
            <p class="story-paragraph" id="p5">
— Mais a propos de votre famille, — сказала она, — знаете ли, что ваша дочь, с тех пор как выезжает, fait les delices de tout le monde. On la trouve belle comme le jour. Князь поклонился в знак уважения и признательности. — Я часто думаю, — продолжала Анна Павловна после минутного молчания, придвигаясь к князю и ласково улыбаясь ему, как будто выказывая этим, что политические и светские разговоры кончены и теперь начинается задушевный, — я часто думаю, как иногда несправедливо распределяется счастие жизни. За что вам судьба дала двух таких славных детей (исключая Анатоля, вашего меньшого, я его не люблю, — вставила она безапелляционно, приподняв брови), — таких прелестных детей? А вы, право, меньше всех цените их и потому их не стоите. И она улыбнулась своею восторженною улыбкой. — Que voulez-vous? Lafater aurait dit que je n'ai pas la bosse de la paternite, — сказал князь. — Перестаньте шутить. Я хотела серьезно поговорить с вами. Знаете, я недовольна вашим меньшим сыном. Между нами будь сказано (лицо ее приняло грустное выражение), о нем говорили у ее величества и жалеют вас... Князь не отвечал, но она молча, значительно глядя на него, ждала ответа. Князь Василий поморщился. — Что ж мне делать? — сказал он наконец.
            </p>
            <p class="story-paragraph" id="p6">
Гостиная Анны Павловны начала понемногу наполняться. Приехала высшая знать Петербурга: люди самые разнородные по возрастам и характерам, но одинаковые по обществу, в каком все жили; приехала дочь князя Василия, красавица Элен, заехавшая за отцом, чтобы с ним вместе ехать на праздник посланника. Она была в шифре и бальном платье. Приехала и известная, как la femme la plus seduisante de Petersbourg, молодая, маленькая княгиня Болконская, прошлую зиму вышедшая замуж и теперь не выезжавшая в большой свет по причине своей беременности, но ездившая еще на небольшие вечера. Приехал князь Ипполит, сын князя Василия, с Мортемаром, которого он представил; приехал и аббат Морио и многие другие. — Вы не видали еще, или: — вы не знакомы с ma tante? — говорила Анна Павловна приезжавшим гостям и весьма серьезно подводила их к маленькой старушке в высоких бантах, выплывшей из другой комнаты, как скоро стали приезжать гости, называла их по имени, медленно переводя глаза с гостя на ma tante, и потом отходила. Все гости совершали обряд приветствования никому не известной тетушки.
            </p>
            <div class="story-tip">✻  наведи фонарик на строку  ✻</div>
        </div>
    </div>

    <script>
        (function() {
            const paragraphs = document.querySelectorAll('.story-paragraph');
           
            const updatePosition = (e, element) => {
                const rect = element.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                element.style.setProperty('--x', x + 'px');
                element.style.setProperty('--y', y + 'px');
            };

            paragraphs.forEach(p => {
                p.addEventListener('mousemove', (e) => {
                    updatePosition(e, p);
                });
                p.addEventListener('mouseenter', (e) => {
                    updatePosition(e, p);
                });
            });
        })();
    </script>
</body>
</html>[/html]

97

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разговор в темноте · звёздная ночь</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: radial-gradient(ellipse at top, #0b1120 0%, #03050b 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 2rem 1rem;
            margin: 0;
        }

        /* Главный контейнер — звёздное небо */
        .star-night-container {
            position: relative;
            max-width: 750px;
            width: 100%;
            background: transparent;
            border-radius: 3rem 3rem 2rem 2rem;
            padding: 2.8rem 2.5rem;
            box-shadow: 0 30px 45px -15px rgba(0,0,0,0.8), inset 0 1px 3px rgba(255,255,255,0.08);
            border: 1px solid rgba(255, 215, 140, 0.1);
            backdrop-filter: blur(1px);
            /* имитация глубокого космоса с мерцанием */
            background: radial-gradient(circle at 30% 40%, #1a1f30 0%, #030613 95%);
        }

        /* добавляем звёзды (псевдоэлементы и дочерние точки) */
        .star-night-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: transparent;
            background-image:
                radial-gradient(2px 2px at 15px 60px, #fff8e7, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 75px 340px, #fef9d7, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 130px 180px, #ffe9b0, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 220px 520px, #b3d9ff, rgba(0,0,0,0)),
                radial-gradient(4px 4px at 350px 120px, #fcf2db, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 470px 380px, #c9e2ff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 550px 630px, #f9e6c2, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 620px 90px, #fcf5e6, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 85px 710px, #fcf5e6, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 710px 410px, #fef1c8, rgba(0,0,0,0));
            background-repeat: no-repeat;
            opacity: 0.8;
            pointer-events: none; /* чтобы звёзды не мешали наведению */
            z-index: 0;
        }

        /* добавляем ещё хаотичных звёздочек через box-shadow */
        .star-night-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            box-shadow:
                95px 120px 0 1px rgba(253, 248, 220, 0.5),
                430px 280px 0 2px rgba(255, 245, 200, 0.6),
                280px 570px 0 1px rgba(250, 240, 210, 0.7),
                570px 480px 0 2px rgba(255, 252, 235, 0.8),
                180px 820px 0 1px #fff8ed,
                640px 720px 0 2px #fffde7,
                390px 930px 0 1px #f9f2d9,
                520px 60px 0 1px #fffae6;
            pointer-events: none;
            z-index: 0;
        }

        /* текстовая область — чтобы звёзды не перекрывали абзацы */
        .dialogue-darkness {
            position: relative;
            z-index: 5;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        /* стиль абзаца: изначально утоплен в темноту, едва заметен */
        .dark-paragraph {
            color: rgba(230, 225, 240, 0.12);        /* почти невидимый текст */
            background-color: rgba(0, 0, 0, 0.25);
            padding: 1.3rem 1.8rem;
            border-radius: 30px 12px 30px 12px;
            font-size: 1.3rem;
            line-height: 1.65;
            letter-spacing: 0.3px;
            transition: color 0.25s ease, background-color 0.3s ease, box-shadow 0.25s ease, text-shadow 0.2s;
            border: 1px solid rgba(255, 220, 150, 0.08);
            backdrop-filter: blur(1px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(255, 180, 80, 0.02);
            text-indent: 1.2em;
            cursor: default;
            word-break: break-word;
            /* мягкий переход для всех свойств */
        }

        /* Эффект «фонарика» при наведении — абзац светится, остальные тускнеют через общий контейнер */
        .dark-paragraph:hover {
            color: #fef7e0;                          /* яркий тёплый свет */
            background-color: rgba(10, 8, 15, 0.7);
            border: 1px solid rgba(255, 230, 170, 0.5);
            box-shadow:
                0 0 35px rgba(255, 215, 120, 0.5),
                0 0 15px rgba(255, 200, 100, 0.4),
                inset 0 0 25px #ffd48a33;
            text-shadow: 0 0 10px #ffcf9a, 0 0 20px #ffb871;
            transition: color 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        }

        /* магия: когда курсор внутри диалогового блока, все параграфы, кроме наведённого, получают затемнение */
        .dialogue-darkness:hover .dark-paragraph:not(:hover) {
            color: rgba(200, 200, 220, 0.1);          /* практически гаснут */
            background-color: rgba(0, 0, 0, 0.5);
            border-color: rgba(90, 70, 40, 0.1);
            box-shadow: none;
            text-shadow: none;
            transition: color 0.3s ease, background-color 0.3s;
        }

        /* дополнительный штрих: сам блок при покидании курсора возвращается в полную тьму */
        .dark-paragraph {
            transition: color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, text-shadow 0.35s;
        }

        /* совсем лёгкий намёк на звёзды над текстом — мелкие точки (не обязательно) */
        /* при желании можно добавить пару звёзд прямо в параграфы */
        .dark-paragraph::after {
            content: '';
            display: none; /* оставим место для чистоты, звёзд и так достаточно на фоне */
        }

        /* адаптация под мобильные — чтобы на тач pad было удобнее (сработает при нажатии) */
        @media (pointer: coarse) {
            .dark-paragraph {
                padding: 1.6rem;
                font-size: 1.4rem;
            }
            .star-night-container {
                padding: 1.8rem 1.2rem;
            }
        }

        /* дополнительный слой звёздного мерцания вокруг контейнера (по желанию) */
        .star-night-container {
            animation: faintTwinkling 8s infinite alternate;
        }

        @keyframes faintTwinkling {
            0% { background: radial-gradient(circle at 30% 40%, #1a1f30 0%, #02040e 95%); }
            100% { background: radial-gradient(circle at 32% 42%, #1f253b 0%, #03050c 95%); }
        }
    </style>
</head>
<body>
    <!-- контейнер звездная ночь -->
    <div class="star-night-container">
        <!-- слой текста — разговор в темноте -->
        <div class="dialogue-darkness">

            <!-- абзацы рассказа (каждый проявится только при наведении) -->
            <p class="dark-paragraph">
                — Ты здесь? — шёпот почти не нарушает тишину. Темнота обволакивает, делает голоса глубже. Кажется, я слышу не слова, а дыхание между ними.
            </p>

            <p class="dark-paragraph">
                — Здесь, — отвечаю так тихо, что мой голос мог бы быть твоей мыслью. В темноте расстояние исчезает, остаётся только звук и его тепло.
            </p>

            <p class="dark-paragraph">
                — Почему мы не зажигаем свет? — спрашиваешь ты, и я слышу, как ты улыбаешься. Это узнаётся без зрения — особый изгиб голоса.
            </p>

            <p class="dark-paragraph">
                — Боюсь, что тогда слова станут обычными. Свет разбудит комнату, и мы снова будем просто двумя фигурами на фоне окна.
            </p>

            <p class="dark-paragraph">
                Молчание затягивается, но оно не пустое — в нём пульсирует то, что мы не решились сказать вслух. Темнота хранит наши лица, делая признания безопасными.
            </p>

            <p class="dark-paragraph">
                — Знаешь, я ведь вижу тебя сейчас лучше, чем при свете, — говоришь почти неслышно. И я понимаю: это правда. В темноте мы становимся прозрачными друг для друга.
            </p>

            <p class="dark-paragraph">
                Где-то за окном, наверное, те же звёзды, что и над нами. Ты протягиваешь руку — не для того, чтобы коснуться, а чтобы обозначить присутствие. И я отвечаю тем же.
            </p>

            <p class="dark-paragraph">
                — Давай ещё немного посидим так. Пока слова не станут нужны снова.
            </p>

        </div>
        <!-- тонкое свечение в основании (имитация горизонта) -->
        <div style="position: relative; z-index: 1; height: 0; width: 100%; border-top: 1px solid rgba(255,210,140,0.15); margin-top: 20px; box-shadow: 0 0 25px #ffc2850f; pointer-events: none;"></div>
    </div>

    <!-- маленькая звёздочка внизу для атмосферы (не мешает наведению) -->
    <div style="position: fixed; bottom: 10px; right: 20px; color: rgba(255,240,200,0.2); font-size: 0.8rem; pointer-events: none; user-select: none;">✦ ✧ ✦</div>
</body>
</html>[/html]

98

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разговор в темноте · звёздная история</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: radial-gradient(ellipse at top, #0b0f2a, #020617);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Georgia', 'Times New Roman', serif;
            padding: 1.5rem;
        }

        /* Главный контейнер — звездное небо с текстурой и мерцанием */
        .star-night-container {
            position: relative;
            max-width: 760px;
            width: 100%;
            background: radial-gradient(circle at 30% 40%, #1a1f3a, #030514 90%);
            box-shadow:
                0 20px 40px rgba(0,0,0,0.8),
                inset 0 0 60px rgba(255, 215, 150, 0.15);
            border: 1px solid rgba(255, 240, 200, 0.1);
            border-radius: 3rem 1.5rem 3rem 1.5rem;
            padding: 3rem 2.5rem;
            backdrop-filter: blur(1px);
            /* текстура — тёмное небо с крапинками */
            background-image:
                radial-gradient(white 0.8px, transparent 0.8px),
                radial-gradient(rgba(255, 255, 255, 0.4) 0.5px, transparent 0.5px),
                radial-gradient(circle at 30% 40%, #1a1f3a, #030514 90%);
            background-size: 40px 40px, 80px 80px, 100% 100%;
            background-position: 0 0, 20px 30px, 0 0;
            background-blend-mode: overlay, screen, normal;
            transition: box-shadow 0.3s;
            animation: star-twinkle 8s infinite alternate;
        }

        /* дополнительные крупные «звёздные» пятна для мерцания */
        .star-night-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: radial-gradient(circle at 15% 70%, rgba(255, 240, 180, 0.1) 0%, transparent 25%),
                        radial-gradient(circle at 80% 20%, rgba(200, 220, 255, 0.1) 0%, transparent 30%),
                        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0px, rgba(255, 255, 255, 0.01) 2px, transparent 2px, transparent 6px);
            pointer-events: none; /* чтобы не мешать наведению */
            z-index: 1;
            animation: stellar-drift 14s ease-in-out infinite;
        }

        /* анимация мерцания звёзд (изменение прозрачности текстуры) */
        @keyframes star-twinkle {
            0% { background-color: #040716; background-size: 40px 40px, 80px 80px, 100% 100%; }
            50% { background-color: #0a0f24; background-size: 42px 42px, 82px 82px, 100% 100%; }
            100% { background-color: #030511; background-size: 38px 38px, 78px 78px, 100% 100%; }
        }

        @keyframes stellar-drift {
            0% { opacity: 0.5; filter: brightness(0.9); }
            50% { opacity: 1; filter: brightness(1.3); }
            100% { opacity: 0.6; filter: brightness(0.9); }
        }

        /* блок с абзацами — он над звёздной текстурой */
        .dialogue-darkness {
            position: relative;
            z-index: 5;
            display: flex;
            flex-direction: column;
            gap: 2rem; /* расстояние между абзацами */
        }

        /* каждый абзац — по умолчанию скрыт в темноте */
        .dark-paragraph {
            margin: 0;
            padding: 1rem 1.5rem;
            color: rgba(255, 255, 240, 0.9);
            background: transparent;
            border-radius: 2rem 0.8rem 2rem 0.8rem;
            line-height: 1.8;
            font-size: 1.2rem;
            text-shadow: 0 2px 5px rgba(0,0,0,0.7);
            transition: all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
            border: 1px solid rgba(255, 220, 150, 0.03);
            box-shadow: 0 4px 12px rgba(0,0,0,0.6);
            /* жестокое затухание (тёмный фильтр) */
            opacity: 0.2;
            filter: brightness(0.2) blur(0.6px);
            letter-spacing: 0.3px;
            backdrop-filter: blur(1px);
            transform: scale(0.98);
            will-change: opacity, filter, box-shadow, transform, border-color, text-shadow;
        }

        /* текст внутри абзацев — мягкий, немного таинственный */
        .dark-paragraph p {
            margin: 0;
            font-weight: 300;
        }

        /* каждая строчка (искусственно разбито на 3 строки через br) */
        .dark-paragraph br {
            content: '';
            display: block;
            margin-bottom: 0.4rem;
        }

        /* СОСТОЯНИЕ ПРИ НАВЕДЕНИИ — АБЗАЦ ОСВЕЩАЕТСЯ ФОНАРИКОМ */
        .dark-paragraph:hover {
            opacity: 1 !important;
            filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 235, 150, 0.6)) !important;
            transform: scale(1.02) translateY(-2px);
            background: radial-gradient(ellipse at 50% 40%, rgba(20, 15, 10, 0.6), rgba(5, 5, 10, 0.8) 80%);
            box-shadow:
                0 0 30px rgba(255, 230, 170, 0.5),
                0 0 60px rgba(250, 210, 120, 0.3),
                inset 0 0 30px #ffe6aa3a,
                0 10px 25px #000000b3;
            border-color: rgba(255, 215, 140, 0.3);
            text-shadow: 0 0 12px #ffeedd, 0 0 30px #ffb86b;
            transition: all 0.3s ease-out;
            cursor: pointer;
            /* Имитация света фонарика: центр ярче, края затемнены */
            background: radial-gradient(circle at 30% 40%, rgba(255, 245, 210, 0.2) 0%, rgba(30, 25, 45, 0.9) 70%),
                        radial-gradient(circle at 70% 60%, rgba(240, 210, 150, 0.15), transparent 60%);
            background-blend-mode: overlay, normal;
        }

        /* Важное правило: когда мы наводим на конкретный абзац, все остальные становятся почти невидимыми (темнота) */
        .dialogue-darkness:hover .dark-paragraph {
            opacity: 0.1;
            filter: brightness(0.1) blur(1px);
            transform: scale(0.97);
            transition: all 0.5s;
        }

        /* но при этом абзац, на который навели, перекрывает общее правило (за счёт специфичности) */
        .dialogue-darkness .dark-paragraph:hover {
            opacity: 1 !important;
            filter: brightness(1.3) drop-shadow(0 0 15px #ffdd99) !important;
            transform: scale(1.02) translateY(-2px);
        }

        /* Эффект постепенного появления звёзд в самом начале */
        .star-night-container {
            animation: fadeIn 1.8s ease;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* дополнительный слой мерцания мелких точек (имитация звёздного мерцания на границах) */
        .star-night-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="12" cy="25" r="0.7" fill="white" opacity="0.6"/><circle cx="88" cy="41" r="1" fill="white" opacity="0.8"/><circle cx="44" cy="82" r="0.8" fill="white" opacity="0.5"/><circle cx="71" cy="8" r="0.6" fill="white" opacity="0.9"/><circle cx="29" cy="68" r="0.9" fill="white" opacity="0.4"/><circle cx="5" cy="92" r="0.5" fill="white" opacity="0.7"/><circle cx="60" cy="55" r="1.1" fill="white" opacity="0.5"/><circle cx="92" cy="78" r="0.8" fill="white" opacity="0.7"/></svg>');
            background-size: 200px 200px;
            background-repeat: repeat;
            mix-blend-mode: screen;
            opacity: 0.2;
            animation: twinkly 4s infinite alternate;
        }

        @keyframes twinkly {
            0% { opacity: 0.15; filter: blur(0.3px); }
            100% { opacity: 0.45; filter: blur(0px); }
        }

        /* лёгкая адаптация для мобильных */
        @media (max-width: 550px) {
            .star-night-container {
                padding: 2rem 1.2rem;
            }
            .dark-paragraph {
                font-size: 1rem;
                padding: 0.8rem 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="star-night-container">
        <div class="dialogue-darkness">
            <!-- Абзац 1 · три строчки -->
            <div class="dark-paragraph">
                <p>— Ты слышишь этот шорох?<br>— Это ветер играет с травой.<br>— Или кто-то подходит к костру.</p>
            </div>
            <!-- Абзац 2 · три строчки -->
            <div class="dark-paragraph">
                <p>— Почему мы говорим шёпотом?<br>— Темнота заставляет слушать.<br>— А мне кажется — она заставляет верить.</p>
            </div>
            <!-- Абзац 3 · три строчки -->
            <div class="dark-paragraph">
                <p>— Помнишь, в детстве я боялся темноты.<br>— А сейчас?<br>— Сейчас я боюсь в ней потеряться.</p>
            </div>
            <!-- Абзац 4 · три строчки -->
            <div class="dark-paragraph">
                <p>— У тебя холодные руки.<br>— Это от звёздного света.<br>— Тогда давай согреем их разговором.</p>
            </div>
            <!-- Абзац 5 · три строчки -->
            <div class="dark-paragraph">
                <p>— Если бы ночь могла говорить...<br>— ...она рассказала бы все наши тайны.<br>— Пусть молчит. Мы сами расскажем.</p>
            </div>
        </div>
        <!-- тихий намёк на падающую звезду (декор) -->
        <div style="position:absolute; bottom:20px; right:25px; color: rgba(255,240,190,0.2); font-size: 0.7rem; z-index:10; pointer-events: none;">✧  ✧  ✧</div>
    </div>

    <!-- небольшой скрипт для гарантии, что эффект наведения не "залипает" и звёздный фон дышит -->
    <script>
        (function() {
            // дополнительное живое мерцание через изменение opacity псевдо-элемента (чисто декоративно)
            const container = document.querySelector('.star-night-container');
            if(container) {
                setInterval(() => {
                    // совсем лёгкое мерцание — меняем интенсивность псевдо-элемента через css-переменную? Но мы уже сделали анимацию. Для большего реализма можно добавить случайное изменение тени.
                    const randomGlow = 15 + Math.sin(Date.now() / 1000) * 5;
                    container.style.boxShadow = `0 20px 40px rgba(0,0,0,0.8), inset 0 0 ${randomGlow}px rgba(255, 215, 150, 0.2)`;
                }, 400);
            }
        })();
    </script>
</body>
</html>[/html]

99

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разговор в темноте · звёздное небо</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: radial-gradient(ellipse at 40% 70%, #0b0d1e, #010101);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', 'Georgia', 'Times New Roman', serif;
            padding: 1.5rem;
        }

        /* Главный контейнер — теперь фон звёздное небо здесь */
        .story-container {
            max-width: 750px;
            width: 100%;
            background: transparent;           /* фоном будет слой звёзд */
            border-radius: 3rem 2rem 3rem 2rem;
            /* Внешняя тень полностью убрана */
            padding: 2.8rem 2.5rem;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 215, 200, 0.1);
        }

        /* Звёздное небо теперь занимает ВЕСЬ контейнер (внутренний фон) */
        .starry-sky {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #050714;                /* глубокий тёмный фон */
            pointer-events: none;                /* звёзды не мешают наведению */
            z-index: 1;
            border-radius: inherit;              /* наследует скругление */
        }

        /* Генерация множества звёздочек через box-shadow */
        .starry-sky::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            box-shadow:
                124px 87px 1px 0px rgba(255, 255, 255, 0.75),
                543px 212px 1px 0px rgba(255, 250, 220, 0.85),
                327px 568px 1px 0px rgba(210, 230, 255, 0.9),
                189px 412px 2px 1px rgba(255, 255, 210, 0.6),
                721px 334px 1px 0px rgba(255, 255, 255, 0.8),
                88px 622px 2px 0px rgba(200, 220, 255, 0.9),
                480px 129px 1px 0px rgba(245, 245, 255, 0.7),
                601px 509px 2px 1px rgba(255, 240, 200, 0.75),
                264px 287px 1px 0px rgba(255, 255, 240, 0.9),
                712px 711px 1px 0px rgba(210, 230, 255, 0.8),
                431px 444px 3px 0px rgba(255, 255, 210, 0.7),
                90px 150px 1px 0px rgba(255, 255, 255, 0.9),
                520px 780px 2px 0px rgba(255, 245, 210, 0.8),
                350px 60px 1px 0px rgba(240, 248, 255, 0.9),
                670px 190px 2px 1px rgba(255, 255, 230, 0.6),
                220px 810px 2px 0px rgba(255, 250, 240, 0.7),
                780px 550px 1px 0px rgba(200, 215, 255, 0.8);
            animation: twinkle 5s infinite alternate ease-in-out;
        }

        /* Дополнительный слой мелких звёзд с другим ритмом мерцания */
        .starry-sky::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            box-shadow:
                44px 927px 1px 0px rgba(255, 255, 240, 0.6),
                259px 64px 1px 0px rgba(255, 255, 220, 0.7),
                815px 440px 2px 0px rgba(210, 225, 255, 0.8),
                492px 608px 1px 0px rgba(255, 255, 250, 0.9),
                124px 275px 2px 1px rgba(240, 240, 255, 0.5),
                682px 827px 1px 0px rgba(255, 245, 200, 0.8),
                573px 112px 1px 0px rgba(255, 255, 215, 0.75),
                320px 924px 2px 1px rgba(200, 220, 255, 0.8);
            animation: twinkle2 4.2s infinite alternate ease-in-out;
        }

        @keyframes twinkle {
            0% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.02); }
            100% { opacity: 0.7; transform: scale(0.98); }
        }

        @keyframes twinkle2 {
            0% { opacity: 0.5; transform: translate(2px, -1px); }
            30% { opacity: 0.9; }
            70% { opacity: 0.4; transform: translate(-2px, 2px); }
            100% { opacity: 0.7; transform: translate(1px, -2px); }
        }

        /* блок текста — поверх звёздного неба */
        .dialogue {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
        }

        /* каждый параграф — кусочек разговора в темноте */
        .dark-paragraph {
            color: rgba(255, 255, 240, 0.9);
            background: transparent;
            padding: 0.9rem 1.8rem;
            border-radius: 2.5rem 1.2rem 2.5rem 1.2rem;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
            font-size: 1.3rem;
            line-height: 1.7;
            font-weight: 300;
            letter-spacing: 0.02em;
            border: 1px solid transparent;
            backdrop-filter: blur(0px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            /* Изначальное состояние — затемнённый, нечитаемый */
            opacity: 0.28;
            filter: blur(1.2px) brightness(0.35);
            transform: scale(0.97);
            transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                        filter 0.5s ease,
                        box-shadow 0.5s ease,
                        transform 0.3s ease,
                        border 0.3s ease,
                        text-shadow 0.4s ease;
            cursor: default;
            user-select: none;
        }

        /* Абзац, на который навели — просыпается, освещается фонариком */
        .dark-paragraph:hover {
            opacity: 1 !important;
            filter: blur(0px) brightness(1.1) drop-shadow(0 0 12px rgba(255, 245, 190, 0.5));
            transform: scale(1.01) translateY(-2px);
            color: #fef9e7;
            text-shadow: 0 0 15px #fdb96e, 0 0 35px #faaf5e, 0 0 60px #fcd7a0;
            border: 1px solid rgba(255, 220, 150, 0.5);
            /* мягкое свечение (реалистичная лампочка/фонарь) */
            box-shadow: 0 0 30px 8px rgba(255, 215, 140, 0.3),
                        0 0 60px 20px rgba(250, 210, 140, 0.2),
                        inset 0 0 30px rgba(255, 240, 180, 0.4);
            background: rgba(15, 10, 20, 0.2);
            backdrop-filter: blur(4px) brightness(1.2);
            transition: opacity 0.25s ease, filter 0.3s ease, box-shadow 0.4s ease, transform 0.2s ease;
            user-select: text;
        }

        /* Остальные абзацы в момент наведения одного — ещё глубже уходят в темноту */
        .dialogue:hover .dark-paragraph:not(:hover) {
            opacity: 0.12;
            filter: blur(2px) brightness(0.2);
            transform: scale(0.96);
            transition: opacity 0.4s ease, filter 0.45s ease, transform 0.4s ease;
            border-color: transparent;
            box-shadow: none;
            text-shadow: none;
            color: #7a7980;
        }

        /* чтобы красиво смотрелось на мобильных */
        @media (max-width: 550px) {
            .story-container {
                padding: 2rem 1.2rem;
            }
            .dark-paragraph {
                font-size: 1.1rem;
                padding: 0.7rem 1.2rem;
            }
        }

        /* Имя рассказа / маленький заголовок */
        .night-title {
            position: relative;
            z-index: 15;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.15rem;
            letter-spacing: 4px;
            word-spacing: 8px;
            text-transform: uppercase;
            color: #c7b99b;
            opacity: 0.6;
            text-shadow: 0 0 18px #6f4f3b;
            border-bottom: 1px dashed rgba(200, 170, 140, 0.3);
            padding-bottom: 0.8rem;
        }
        .night-title span {
            font-size: 1.6rem;
            opacity: 0.9;
            filter: drop-shadow(0 0 8px #fe9);
        }
    </style>
</head>
<body>
    <div class="story-container">
        <!-- Звёздное небо теперь заполняет контейнер целиком -->
        <div class="starry-sky"></div>

        <!-- Небольшой заголовок, настраивает на тему сновидений -->
        <div class="night-title">
            <span>✧</span> РАЗГОВОР В ТЕМНОТЕ <span>✧</span>
        </div>

        <!-- Пять абзацев, четыре строки в каждом -->
        <div class="dialogue">
            <p class="dark-paragraph">
                — Ты слышишь этот шёпот?<br>
                Он идёт из-под нашей кровати.<br>
                — Это просто ветер, спи.<br>
                Но ветер не знает моего имени.
            </p>
            <p class="dark-paragraph">
                — Почему ты не зажигаешь свет?<br>
                — Боюсь увидеть, что мы здесь не одни.<br>
                Тишина длится целую вечность.<br>
                — Тогда давай просто закроем глаза.
            </p>
            <p class="dark-paragraph">
                Во тьме рождаются фигуры.<br>
                Вон там, у шкафа, кто-то дышит.<br>
                — Это всего лишь старая одежда.<br>
                Но одежда не умеет смотреть в ответ.
            </p>
            <p class="dark-paragraph">
                — Мне кажется, я падаю в сон.<br>
                — Не падай, ещё рано.<br>
                Мы не договорили о главном.<br>
                А о главном мы забыли наяву.
            </p>
            <p class="dark-paragraph">
                — Если я возьму тебя за руку,<br>
                станет светлее?<br>
                — Попробуй... кажется, теплее.<br>
                И ночь перестала быть бесконечной.
            </p>
        </div>
        <!-- тонкая нижняя подпись -->
        <div style="position: relative; z-index: 15; text-align: right; margin-top: 2rem; opacity: 0.3; color: #a7a5b9; font-size: 0.85rem; font-style: italic; border-top: 1px solid rgba(255,215,170,0.1); padding-top: 0.8rem;">
            ★ история, рассказанная шёпотом ★
        </div>
    </div>
</body>
</html>[/html]

100

  • Автор: Kangars
  • Участник
  • Kangars
  • Зарегистрирован: 2026-02-20
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +0
  • Провел на форуме:
    4 часа 35 минут
  • Последний визит:
    2026-03-03 00:15:56

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Разговор в темноте · звездная синева</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(145deg, #0b1a30 0%, #07121f 70%, #030b14 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Palatino', 'Georgia', 'Times New Roman', serif;
            padding: 20px;
        }

        /* туманности синих оттенков */
        body::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 35%, rgba(40, 70, 130, 0.3) 0%, transparent 35%),
                        radial-gradient(circle at 90% 60%, rgba(25, 60, 140, 0.25) 0%, transparent 40%),
                        radial-gradient(circle at 45% 80%, rgba(15, 40, 110, 0.2) 0%, transparent 45%),
                        radial-gradient(circle at 70% 20%, rgba(55, 90, 160, 0.15) 0%, transparent 30%);
            pointer-events: none;
        }

        /* россыпь звезд (белые/голубоватые на синем фоне) */
        body::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(2px 2px at 15px 60px, #e2e9ff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 72px 430px, #b8ceff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 280px 120px, #a5c0ff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 350px 580px, #90b0ff, rgba(0,0,0,0)),
                radial-gradient(4px 4px at 520px 190px, #ccddff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 700px 440px, #b5ccff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 850px 270px, #a3bdff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 980px 520px, #7fa3f0, rgba(0,0,0,0)),
                radial-gradient(4px 4px at 1150px 90px, #b8d0ff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 1250px 380px, #c2d2ff, rgba(0,0,0,0)),
                radial-gradient(5px 5px at 90px 720px, #9bb6f5, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 450px 800px, #8aabf0, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 600px 920px, #aec4ff, rgba(0,0,0,0)),
                radial-gradient(4px 4px at 770px 670px, #b9ceff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 1020px 750px, #91b2f0, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 1330px 550px, #c5d6ff, rgba(0,0,0,0)),
                radial-gradient(3px 3px at 1400px 860px, #99bbff, rgba(0,0,0,0)),
                radial-gradient(4px 4px at 250px 980px, #adc4fa, rgba(0,0,0,0));
            background-size: 200px 200px, 400px 400px, 300px 300px, 500px 500px, 350px 350px,
                             450px 450px, 370px 370px, 600px 600px, 320px 320px, 480px 480px,
                             420px 420px, 560px 560px, 390px 390px, 530px 530px, 610px 610px,
                             440px 440px, 580px 580px, 360px 360px;
            background-repeat: repeat;
            opacity: 0.8;
            pointer-events: none;
        }

        @keyframes twinkle {
            0% { opacity: 0.4; }
            50% { opacity: 1; }
            100% { opacity: 0.4; }
        }

        /* дополнительные мерцающие звезды */
        .twinkling-stars {
            position: absolute;
            inset: 0;
            background: transparent;
            box-shadow:
                180px 120px 0 1px rgba(210, 230, 255, 0.7),
                820px 380px 0 2px rgba(200, 225, 255, 0.8),
                1250px 620px 0 1px rgba(190, 220, 255, 0.9),
                430px 880px 0 2px rgba(225, 240, 255, 0.8),
                1120px 230px 0 1px rgba(170, 210, 255, 0.6),
                640px 520px 0 1px rgba(215, 235, 255, 0.7),
                1450px 420px 0 2px rgba(185, 215, 255, 0.8),
                260px 640px 0 2px rgba(205, 225, 255, 0.6),
                950px 740px 0 1px rgba(195, 220, 255, 0.7),
                540px 240px 0 1px rgba(235, 245, 255, 0.8),
                70px 470px 0 1px rgba(180, 210, 250, 0.6),
                1180px 870px 0 1px rgba(190, 215, 250, 0.7);
            animation: twinkle 5s infinite alternate ease-in-out;
            pointer-events: none;
        }

        .story-container {
            position: relative;
            max-width: 760px;
            width: 100%;
            background: rgba(3, 15, 30, 0.65);
            backdrop-filter: blur(2px);
            border-radius: 54px 24px 64px 24px;
            padding: 2.8rem 2.5rem;
            box-shadow: 0 25px 45px rgba(0, 5, 20, 0.9), inset 0 0 40px rgba(30, 60, 130, 0.3);
            border: 1px solid rgba(70, 120, 200, 0.25);
            z-index: 10;
            overflow: hidden;
        }

        /* ЗВЁЗДНЫЙ ФОН ПОД ТЕКСТОМ (темно-синий с белыми/голубыми звездами) */
        .star-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #07192b;
            background-image:
                radial-gradient(1.8px 1.8px at 20px 30px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(1.2px 1.2px at 90px 120px, #e0ecff, rgba(0,0,0,0)),
                radial-gradient(2.2px 2.2px at 170px 210px, #b8d4ff, rgba(0,0,0,0)),
                radial-gradient(1.4px 1.4px at 250px 80px, #c9ddff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 340px 270px, #d4e4ff, rgba(0,0,0,0)),
                radial-gradient(1.7px 1.7px at 410px 150px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(2.3px 2.3px at 490px 320px, #b0ceff, rgba(0,0,0,0)),
                radial-gradient(1.1px 1.1px at 550px 50px, #d8e8ff, rgba(0,0,0,0)),
                radial-gradient(2.1px 2.1px at 620px 380px, #e3efff, rgba(0,0,0,0)),
                radial-gradient(1.3px 1.3px at 40px 440px, #c4d9ff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 150px 490px, #9cb9f5, rgba(0,0,0,0)),
                radial-gradient(2.4px 2.4px at 260px 550px, #adc6ff, rgba(0,0,0,0)),
                radial-gradient(1.2px 1.2px at 370px 600px, #d1e1ff, rgba(0,0,0,0)),
                radial-gradient(1.9px 1.9px at 480px 520px, #b9d2ff, rgba(0,0,0,0)),
                radial-gradient(2.2px 2.2px at 600px 670px, #c5daff, rgba(0,0,0,0)),
                radial-gradient(1.4px 1.4px at 700px 420px, #deeaff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 280px 710px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(2.3px 2.3px at 520px 750px, #b2ccff, rgba(0,0,0,0)),
                radial-gradient(1.5px 1.5px at 640px 230px, #c8dbff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 780px 570px, #9ebcf5, rgba(0,0,0,0)),
                radial-gradient(1.6px 1.6px at 880px 180px, #dbe9ff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 190px 820px, #e2edff, rgba(0,0,0,0));
            background-size: 300px 300px, 400px 400px, 350px 350px, 380px 380px, 320px 320px,
                             450px 450px, 360px 360px, 500px 500px, 420px 420px, 390px 390px,
                             470px 470px, 430px 430px, 520px 520px, 400px 400px, 550px 550px,
                             480px 480px, 440px 440px, 530px 530px, 460px 460px, 490px 490px,
                             510px 510px, 540px 540px;
            background-repeat: repeat;
            opacity: 0.6;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
            animation: starGlow 7s infinite alternate;
        }

        @keyframes starGlow {
            0% { opacity: 0.5; }
            50% { opacity: 0.8; }
            100% { opacity: 0.55; }
        }

        .paragraph-list {
            display: flex;
            flex-direction: column;
            gap: 1.8rem;
            position: relative;
            z-index: 30;
        }

        .p-item {
            color: rgba(235, 240, 255, 0.9);
            font-size: 1.3rem;
            line-height: 1.8;
            text-shadow: 0 0 8px rgba(0, 10, 30, 0.7);
            font-weight: 300;
            letter-spacing: 0.4px;
            transition: all 0.4s ease;
            background: transparent;
            border-radius: 20px;
            padding: 0.8rem 1.2rem;
            margin: 0 -0.5rem;
            cursor: default;
            word-break: break-word;

            /* скрыты в темноте */
            opacity: 0.08;
            filter: blur(2.5px) brightness(0.15);
            transform: scale(0.98);
            transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                        filter 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                        transform 0.35s ease,
                        box-shadow 0.4s ease,
                        text-shadow 0.4s ease;
        }

        .paragraph-list:hover .p-item {
            opacity: 0.05;
            filter: blur(4px) brightness(0.1);
            transform: scale(0.97);
            transition: opacity 0.45s, filter 0.45s, transform 0.35s;
        }

        .p-item:hover {
            opacity: 1 !important;
            filter: blur(0) brightness(1.25) !important;
            transform: scale(1.02) translateY(-2px);
            color: #f5f9ff;
            transition: opacity 0.3s, filter 0.3s, transform 0.25s, box-shadow 0.3s;

            /* мягкое свечение теплым фонариком на синем фоне */
            box-shadow:
                0 0 0 2px rgba(210, 230, 255, 0.2),
                0 0 40px 20px rgba(180, 210, 255, 0.35),
                0 0 90px 35px rgba(140, 180, 250, 0.3),
                inset 0 0 30px 10px rgba(230, 240, 255, 0.25);
            text-shadow: 0 0 20px #d4e4ff, 0 0 50px #9bb9ff, 2px 2px 12px #030c1a;
            background: radial-gradient(ellipse at center, rgba(200, 220, 255, 0.12) 0%, rgba(160, 190, 240, 0.03) 70%);
            border-radius: 28px;
        }

        .paragraph-list .p-item:hover ~ .p-item {
            opacity: 0.04;
            filter: blur(4.5px) brightness(0.08);
        }

        /* строчки текста */
        .line {
            display: block;
            white-space: nowrap;
            font-size: 1.3rem;
        }

        .line:not(:last-child) {
            margin-bottom: 0.5rem;
        }

        /* текст рассказа (5 абзацев по 4 строки) */
        .line:nth-child(1)::before { content: "— Ты здесь?"; }
        .line:nth-child(2)::before { content: "— Не знаю. Темно. Кажется, да."; }
        .line:nth-child(3)::before { content: "— Я не вижу тебя, но слышу."; }
        .line:nth-child(4)::before { content: "— Значит, я существую в твоём голосе."; }

        .p-item:nth-child(2) .line:nth-child(1)::before { content: "— Помнишь сон про лестницу в небо?"; }
        .p-item:nth-child(2) .line:nth-child(2)::before { content: "— Он снится мне до сих пор."; }
        .p-item:nth-child(2) .line:nth-child(3)::before { content: "— Там наверху кто-то ждал."; }
        .p-item:nth-child(2) .line:nth-child(4)::before { content: "— Или это был просто свет."; }

        .p-item:nth-child(3) .line:nth-child(1)::before { content: "— Если включить свет, мы исчезнем?"; }
        .p-item:nth-child(3) .line:nth-child(2)::before { content: "— Мы исчезнем для тех, кто снаружи."; }
        .p-item:nth-child(3) .line:nth-child(3)::before { content: "— А для нас?"; }
        .p-item:nth-child(3) .line:nth-child(4)::before { content: "— Для нас начнётся утро."; }

        .p-item:nth-child(4) .line:nth-child(1)::before { content: "— Твоя рука... она холодная."; }
        .p-item:nth-child(4) .line:nth-child(2)::before { content: "— Это потому что темнота забрала тепло."; }
        .p-item:nth-child(4) .line:nth-child(3)::before { content: "— Дай я согрею."; }
        .p-item:nth-child(4) .line:nth-child(4)::before { content: "— Не убирай ладонь."; }

        .p-item:nth-child(5) .line:nth-child(1)::before { content: "— Слышишь? Кто-то ходит за стеной."; }
        .p-item:nth-child(5) .line:nth-child(2)::before { content: "— Это сны ворочаются."; }
        .p-item:nth-child(5) .line:nth-child(3)::before { content: "— Или мы им снимесь."; }
        .p-item:nth-child(5) .line:nth-child(4)::before { content: "— Тогда пусть этот сон длится вечно."; }

        h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 300;
            color: #d0dcf5;
            letter-spacing: 6px;
            font-size: 1.1rem;
            text-transform: uppercase;
            opacity: 0.8;
            text-shadow: 0 0 12px #3d5f9e, 0 0 25px #1f3a6b;
            position: relative;
            z-index: 30;
        }

        .constellation-sign {
            text-align: right;
            margin-top: 30px;
            color: #7f95c0;
            font-size: 0.9rem;
            border-top: 1px dashed #2f4468;
            padding-top: 12px;
            opacity: 0.6;
            letter-spacing: 1.2px;
            position: relative;
            z-index: 30;
            text-shadow: 0 0 8px #1f3b60;
        }
    </style>
</head>
<body>
    <div class="twinkling-stars"></div>
    <div class="story-container">
        <div class="star-bg"></div>
        <h2>✧ РАЗГОВОР В ТЕМНОТЕ ✧</h2>
        <div class="paragraph-list">
            <div class="p-item">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
            <div class="p-item">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
            <div class="p-item">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
            <div class="p-item">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
            <div class="p-item">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </div>
        </div>
        <div class="constellation-sign">
            ⋆･ﾟ:⋆･ﾟ наведи, чтобы подслушать  ⋆･ﾟ:⋆･ﾟ
        </div>
    </div>
</body>
</html>[/html]

Ответить
Страница:   1 … 8 9 10 11 12 13 14  

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


Вы здесь » NO FANDOM » Болталка » Флуд во имя Флуда