NO FANDOM

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

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

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

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

Страница:   1 … 4 5 6 7 8 … 14  
Ответить

Сообщений 51 страница 60 из 135

51

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

<!-- ===== ПЕРСОНАЖ 1 ===== -->
<div class="diary-book diary-one">

  <div class="diary-title">Дневник Клайда</div>

  <div class="diary-tabs">
    <div class="diary-tab active" data-page="d1p1">✦</div>
    <div class="diary-tab" data-page="d1p2">✦</div>
    <div class="diary-tab" data-page="d1p3">✦</div>
  </div>

  <div class="diary-pages">

    <div class="diary-page active" id="d1p1">
      <div class="diary-date">12 октября</div>
      <div class="diary-scroll">
        Текст первой записи...
      </div>
    </div>

    <div class="diary-page" id="d1p2">
      <div class="diary-date">19 октября</div>
      <div class="diary-scroll">
        Вторая запись...
      </div>
    </div>

    <div class="diary-page" id="d1p3">
      <div class="diary-date">31 октября</div>
      <div class="diary-scroll">
        Третья запись...
      </div>
    </div>

  </div>

</div>

<!-- ===== ПЕРСОНАЖ 2 ===== -->
<div class="diary-book diary-two">

  <div class="diary-title">Дневник Шона</div>

  <div class="diary-tabs">
    <div class="diary-tab active" data-page="d2p1">✧</div>
    <div class="diary-tab" data-page="d2p2">✧</div>
    <div class="diary-tab" data-page="d2p3">✧</div>
  </div>

  <div class="diary-pages">

    <div class="diary-page active" id="d2p1">
      <div class="diary-date">3 ноября</div>
      <div class="diary-scroll">
        Первая запись Шона...
      </div>
    </div>

    <div class="diary-page" id="d2p2">
      <div class="diary-date">15 ноября</div>
      <div class="diary-scroll">
        Вторая запись...
      </div>
    </div>

    <div class="diary-page" id="d2p3">
      <div class="diary-date">1 декабря</div>
      <div class="diary-scroll">
        Третья запись...
      </div>
    </div>

  </div>

</div>

</div>

<style>

/* ===== ОБЩИЙ КОНТЕЙНЕР ===== */

.diary-wrapper{
  width:100%;
  max-width:760px;
  margin:40px auto;
  display:flex;
  flex-direction:column;
  gap:80px;
  font-family:Georgia, serif;
  transform-origin:top center;
}

/* ===== ОСНОВА КНИГИ ===== */

.diary-book{
  width:100%;
  padding:40px;
  border-radius:18px;
  background:
    linear-gradient(#f4ecd8,#e8dcc2);
  box-shadow:
    0 15px 40px rgba(0,0,0,0.25),
    inset 0 0 40px rgba(0,0,0,0.05);
  position:relative;
  transition:0.5s ease;
}

/* ===== ЗАГОЛОВОК ===== */

.diary-title{
  text-align:center;
  font-size:26px;
  margin-bottom:30px;
  letter-spacing:3px;
  position:relative;
}

.diary-title::after{
  content:"";
  display:block;
  width:60%;
  margin:12px auto 0;
  height:1px;
  background:linear-gradient(to right,transparent,#b59a6a,transparent);
}

/* ===== ВКЛАДКИ ===== */

.diary-tabs{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:30px;
}

.diary-tab{
  width:45px;
  height:45px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  transition:0.3s;
}

.diary-tab.active{
  transform:scale(1.15);
}

/* ===== СТРАНИЦЫ ===== */

.diary-pages{
  position:relative;
  min-height:260px;
}

.diary-page{
  display:none;
  animation:pageTurn 0.6s ease;
}

.diary-page.active{
  display:block;
}

@keyframes pageTurn{
  from{ transform:rotateY(-20deg); opacity:0; }
  to{ transform:rotateY(0); opacity:1; }
}

/* ===== ДАТА ===== */

.diary-date{
  display:inline-block;
  padding:6px 14px;
  margin-bottom:18px;
  font-size:13px;
  letter-spacing:2px;
  border-radius:4px;
}

/* ===== ТЕКСТ ===== */

.diary-scroll{
  max-height:260px;
  overflow-y:auto;
  padding-right:10px;
  line-height:1.8;
  font-size:15px;
}

/* красивый скролл */

.diary-scroll::-webkit-scrollbar{
  width:6px;
}

.diary-scroll::-webkit-scrollbar-thumb{
  border-radius:4px;
}

/* ===== СТИЛЬ ПЕРВОГО ПЕРСОНАЖА ===== */

.diary-one{
  background:linear-gradient(#efe4cd,#e2d4b4);
  border-left:8px solid #5b3c2a;
}

.diary-one .diary-title{
  color:#4a2e1d;
}

.diary-one .diary-tab{
  background:#5b3c2a;
  color:#fff3d8;
}

.diary-one .diary-tab.active{
  background:#8a5a3d;
}

.diary-one .diary-date{
  background:#5b3c2a;
  color:#fff3d8;
}

.diary-one .diary-scroll::-webkit-scrollbar-thumb{
  background:#5b3c2a;
}

/* ===== СТИЛЬ ВТОРОГО ПЕРСОНАЖА ===== */

.diary-two{
  background:linear-gradient(#f1f3f7,#dcdfea);
  border-left:8px solid #2f3e5a;
  font-family:"Palatino Linotype", serif;
}

.diary-two .diary-title{
  color:#2f3e5a;
}

.diary-two .diary-tab{
  background:#2f3e5a;
  color:#ffffff;
}

.diary-two .diary-tab.active{
  background:#4a5f85;
}

.diary-two .diary-date{
  background:#2f3e5a;
  color:#ffffff;
}

.diary-two .diary-scroll::-webkit-scrollbar-thumb{
  background:#2f3e5a;
}

</style>

<script>

document.querySelectorAll(".diary-tab").forEach(tab=>{
  tab.addEventListener("click", function(){

    let book = this.closest(".diary-book");

    book.querySelectorAll(".diary-tab").forEach(t=>t.classList.remove("active"));
    book.querySelectorAll(".diary-page").forEach(p=>p.classList.remove("active"));

    this.classList.add("active");

    let page = book.querySelector("#"+this.dataset.page);
    if(page) page.classList.add("active");

  });
});

</script>

[/html]

52

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <!-- КАРТЫ -->
  <div class="diary-cards">
    <div class="d-card active" data-card="1">Карта I</div>
    <div class="d-card" data-card="2">Карта II</div>
    <div class="d-card" data-card="3">Карта III</div>
  </div>

  <div class="card-content active" data-content="1">
    Значение первой карты.
  </div>
  <div class="card-content" data-content="2">
    Значение второй карты.
  </div>
  <div class="card-content" data-content="3">
    Значение третьей карты.
  </div>

  <!-- КНИГА -->
  <div class="book">

    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

        <div class="entry">
          Текст записи первого персонажа. Мягкие чернила,
          спокойный почерк, аккуратные строки.
        </div>

      </div>
    </div>

    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry">
          Второй персонаж пишет резче. Стиль холодный,
          моноширинный, без лишней мягкости.
        </div>

      </div>
    </div>

    <div class="nav">
      <div class="arrow prev"></div>
      <div class="arrow next"></div>
    </div>

  </div>

</div>

<style>

/* ОСНОВА */
.diary-wrapper{
  width:100%;
  max-width:760px;
  margin:40px auto;
  font-size:16px;
}

/* КАРТЫ */
.diary-cards{
  display:flex;
  gap:15px;
  justify-content:center;
  margin-bottom:15px;
  flex-wrap:wrap;
}

.d-card{
  padding:10px 20px;
  background:#e8dcc7;
  border-radius:14px;
  cursor:pointer;
  font-family:Georgia, serif;
  box-shadow:0 6px 14px rgba(0,0,0,0.2);
  transition:.3s;
}

.d-card.active,
.d-card:hover{
  background:#d6c3a1;
}

.card-content{
  display:none;
  background:#f4ead7;
  padding:18px;
  border-radius:16px;
  margin-bottom:25px;
  font-family:Georgia, serif;
  box-shadow:inset 0 0 18px rgba(0,0,0,0.08);
}

.card-content.active{
  display:block;
}

/* КНИГА */
.book{
  position:relative;
  height:520px;
  background:#f7f1e4;
  border-radius:22px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    inset 0 0 50px rgba(0,0,0,0.06);
  overflow:hidden;
}

/* СТРАНИЦА */
.page{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transform:rotateY(90deg);
  transform-origin:left;
  transition:.7s ease;
}

.page.active{
  opacity:1;
  transform:rotateY(0);
}

.page-inner{
  height:100%;
  padding:45px 55px;
  overflow-y:auto;
}

/* СКРОЛЛ */
.page-inner::-webkit-scrollbar{
  width:7px;
}
.page-inner::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.25);
  border-radius:4px;
}

/* ПЕРСОНАЖ 1 */
.character-one{
  background:#fdf6e6;
  font-family:Georgia, serif;
  color:#4b3e2f;
}

.character-one .date-plate{
  font-size:18px;
  padding:6px 20px;
  border:1px solid #c8b79c;
  border-radius:30px;
  background:#efe3cb;
  margin-bottom:25px;
  display:inline-block;
}

.character-one .entry{
  line-height:1.8;
  border-left:3px solid #c8b79c;
  padding-left:22px;
}

/* ПЕРСОНАЖ 2 */
.character-two{
  background:#efe9dd;
  font-family:"Courier New", monospace;
  color:#2e2a25;
}

.character-two .date-plate{
  font-size:15px;
  padding:6px 14px;
  background:#2e2a25;
  color:#fff;
  letter-spacing:2px;
  margin-bottom:25px;
  display:inline-block;
}

.character-two .entry{
  line-height:1.7;
  border-top:1px dashed #2e2a25;
  padding-top:15px;
}

/* СТРЕЛКИ */
.nav{
  position:absolute;
  bottom:20px;
  right:25px;
  display:flex;
  gap:15px;
}

.arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#d6c3a1;
  cursor:pointer;
  position:relative;
  display:none;
  transition:.3s;
}

.arrow:hover{
  background:#cbb48e;
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-top:2px solid #4b3e2f;
  border-right:2px solid #4b3e2f;
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  display:block;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}
updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

let cards=document.querySelectorAll('.d-card');
let contents=document.querySelectorAll('.card-content');

cards.forEach(card=>{
  card.onclick=function(){
    cards.forEach(c=>c.classList.remove('active'));
    contents.forEach(c=>c.classList.remove('active'));
    card.classList.add('active');
    document.querySelector('.card-content[data-content="'+card.dataset.card+'"]').classList.add('active');
  }
});

</script>

[/html]

53

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

        <div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>

      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry">
          Почерк резче. Буквы угловатые.
          Чернила темнее. Строки будто процарапаны
          по поверхности страницы.
        </div>

      </div>
    </div>

    <!-- СТРЕЛКИ -->
    <div class="nav">
      <div class="arrow prev"></div>
      <div class="arrow next"></div>
    </div>

  </div>

</div>

<style>

/* ОБЁРТКА */
.diary-wrapper{
  width:100%;
  max-width:760px;
  margin:50px auto;
  perspective:2000px;
}

/* КНИГА */
.book{
  position:relative;
  height:520px;
  background:#f3e8d6;
  border-radius:22px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.25),
    inset 0 0 50px rgba(0,0,0,0.08);
  overflow:hidden;
}

/* СТРАНИЦА */
.page{
  position:absolute;
  width:100%;
  height:100%;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.03), transparent 120px),
    #fdf6e8;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

.page-inner{
  height:100%;
  padding:50px 60px;
  overflow-y:auto;
}

/* СКРОЛЛ */
.page-inner::-webkit-scrollbar{
  width:6px;
}
.page-inner::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.25);
  border-radius:4px;
}

/* =========================
   ПЕРСОНАЖ 1 — МЯГКИЙ
========================= */

.character-one{
  font-family:Georgia, serif;
  color:#4a3d2c;
}

.character-one .date-plate{
  font-size:18px;
  padding:6px 22px;
  border-radius:30px;
  border:1px solid #c9b79a;
  background:#efe1c6;
  display:inline-block;
  margin-bottom:30px;
  letter-spacing:1px;
}

.character-one .entry{
  line-height:1.9;
  border-left:3px solid #c9b79a;
  padding-left:25px;
}

/* =========================
   ПЕРСОНАЖ 2 — РЕЗКИЙ
========================= */

.character-two{
  font-family:"Courier New", monospace;
  color:#2b2722;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.05), transparent 140px),
    #efe6d6;
}

.character-two .date-plate{
  font-size:15px;
  padding:6px 16px;
  background:#2b2722;
  color:#fff;
  letter-spacing:3px;
  margin-bottom:30px;
  display:inline-block;
}

.character-two .entry{
  line-height:1.7;
  border-top:1px dashed #2b2722;
  padding-top:18px;
}

/* =========================
   СТРЕЛКИ
========================= */

.nav{
  position:absolute;
  bottom:20px;
  right:25px;
  display:flex;
  gap:15px;
}

.arrow{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#d8c3a3;
  cursor:pointer;
  position:relative;
  display:none;
  transition:.3s;
}

.arrow:hover{
  background:#cbb189;
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-top:2px solid #4a3d2c;
  border-right:2px solid #4a3d2c;
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  display:block;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

54

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

        <div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
м
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>

      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry">
          Почерк резче. Буквы угловатые.
          Чернила темнее. Строки будто процарапаны
          по поверхности страницы.
        </div>

      </div>
    </div>




  </div>
  <div class="arrow next"></div>
</div>

<style>

/* ОБЁРТКА */
.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
}

/* КНИГА */
.book{
  position:relative;
  height:860px;
  background:#e9dcc6;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,0.25); /* мягче */
}

/* СТРАНИЦА */
.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* ВНУТРЕННОСТЬ */
.page-inner{
  height:100%;
  padding:90px 80px;
  padding-bottom:160px; /* нижний воздух */
  box-sizing:border-box;
  overflow-y:auto;
}

/* ===== СКРОЛЛ БЕЗ ВЫЛЕЗАНИЯ ===== */

.page-inner{
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.35) transparent;
}

.page-inner::-webkit-scrollbar{
  width:6px;
}

.page-inner::-webkit-scrollbar-track{
  background:transparent;
  margin:20px 0; /* чтобы не касался краёв */
}

.page-inner::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:20px;
}

/* =========================
   ПЕРСОНАЖ 1
========================= */

.character-one{
  background:#fdf8ee;
  font-family:"Times New Roman", serif;
  color:#2f3a40;
}

.character-one .date-plate{
  font-size:17px;
  padding:10px 32px;
  border:2px solid #2f3a40;
  display:inline-block;
  margin-bottom:50px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.character-one .entry{
  line-height:2.1;
  border-left:4px solid #2f3a40;
  padding-left:28px;
  font-size:16px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
    #2a1f1f;
  font-family:"Courier New", monospace;
  color:#e4d6d6;
}

.character-two .date-plate{
  font-size:15px;
  padding:8px 22px;
  background:#5b0f0f;
  color:#fff;
  letter-spacing:3px;
  margin-bottom:50px;
  display:inline-block;
  text-transform:uppercase;
}

.character-two .entry{
  line-height:1.9;
  border-top:1px solid #5b0f0f;
  padding-top:25px;
  font-size:15px;
  text-shadow:0 0 6px rgba(0,0,0,0.5);
}

/* =========================
   СТРЕЛКИ ПО БОКАМ (РАБОТАЮТ)
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:#c8b18c;
  cursor:pointer;
  display:none;
  transition:.3s ease;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

.prev{
  left:-80px;
}

.next{
  right:-80px;
}

.arrow:hover{
  background:#b79b70;
  transform:translateY(-50%) scale(1.08);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  display:block;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

55

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

        <div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
м
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>

      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>

      </div>
    </div>




  </div>
  <div class="arrow next"></div>
</div>

<style>

/* ОБЁРТКА */
.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent; /* полностью прозрачный */
}

/* КНИГА */
.book{
  position:relative;
  height:660px;
  background:#e9dcc6;
  border-radius:32px;
  overflow:hidden;
  box-shadow:none; /* убрали грязную тень */
}

/* СТРАНИЦА */
.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* ВНУТРЕННОСТЬ */
.page-inner{
  height:100%;
  padding:90px 90px 160px 90px;
  box-sizing:border-box;
  overflow-y:auto;
}

/* ==== СКРОЛЛ АККУРАТНЫЙ ==== */

.page-inner{
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.35) transparent;
}

.page-inner::-webkit-scrollbar{
  width:6px;
}

.page-inner::-webkit-scrollbar-track{
  background:transparent;
}

.page-inner::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:20px;
}

/* =========================
   ПЕРСОНАЖ 1
========================= */

.character-one{
  background:#fdf8ee;
  font-family:"Times New Roman", serif;
  color:#2f3a40;
}

.character-one .date-plate{
  font-size:17px;
  padding:10px 32px;
  border:2px solid #2f3a40;
  display:inline-block;
  margin-bottom:50px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.character-one .entry{
  line-height:2.1;
  border-left:4px solid #2f3a40;
  padding-left:28px;
  font-size:16px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
    #2a1f1f;
  font-family:"Courier New", monospace;
  color:#e4d6d6;
}

.character-two .date-plate{
  font-size:15px;
  padding:8px 22px;
  background:#5b0f0f;
  color:#fff;
  letter-spacing:3px;
  margin-bottom:50px;
  display:inline-block;
  text-transform:uppercase;
}

.character-two .entry{
  line-height:1.9;
  border-top:1px solid #5b0f0f;
  padding-top:25px;
  font-size:15px;
  text-shadow:0 0 6px rgba(0,0,0,0.5);
}

/* =========================
   СТРЕЛКИ НА ЛИСТЕ
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:#c8b18c;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  z-index:5;
}

/* появляются при наведении на книгу */
.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px; /* ВНУТРИ ЛИСТА */
}

.next{
  right:25px; /* ВНУТРИ ЛИСТА */
}

.arrow:hover{
  background:#b79b70;
  transform:translateY(-50%) scale(1.08);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}
.arrow:hover{
  background:#b79b70;
  transform:translateY(-50%) scale(1.08);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  display:block;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

56

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
м
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>
</div>
      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry-bubble">
        <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>
</div>
      </div>
    </div>




  </div>
  <div class="arrow next"></div>
</div>

<style>

/* =========================
   ОБЁРТКА
========================= */

.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent;
}

/* =========================
   КНИГА
========================= */

.book{
  position:relative;
  height:660px;
  background:#e9dcc6;
  border-radius:32px;
  overflow:hidden;
  box-shadow:none;
}

/* =========================
   СТРАНИЦЫ
========================= */

.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* =========================
   ВНУТРЕННОСТЬ
========================= */

.page-inner{
  height:100%;
  padding:90px 90px 90px 90px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* =========================
   ПУЗЫРЬ (СКРОЛЛ ТОЛЬКО ЗДЕСЬ)
========================= */

.entry-bubble{
  flex:1;
  margin-top:50px;
  border-radius:22px;
  padding:40px 45px;
  overflow-y:auto;
  position:relative;

  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.35) transparent;
}

.entry-bubble::-webkit-scrollbar{
  width:6px;
}

.entry-bubble::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:20px;
}

.entry-bubble::-webkit-scrollbar-track{
  background:transparent;
}

/* =========================
   ПЕРСОНАЖ 1
========================= */

.character-one{
  background:#fdf8ee;
  font-family:"Times New Roman", serif;
  color:#2f3a40;
}

.character-one .date-plate{
  font-size:17px;
  padding:10px 32px;
  border:2px solid #2f3a40;
  display:inline-block;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* Вертикальная линия — ЧАСТЬ СТРАНИЦЫ */

.character-one .page-inner::before{
  content:"";
  position:absolute;
  left:70px;              /* по границе контента */
  top:160px;              /* ниже даты */
  bottom:90px;            /* до нижнего отступа */
  width:3px;
  background:#2f3a40;
  opacity:0.35;
}

/* Пузырь аккуратно вписан */

.character-one .entry-bubble{
  background:#fffaf2;
  padding-left:60px;      /* чтобы текст не налезал на линию */
}

.character-one .entry{
  line-height:2.1;
  font-size:16px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
    #2a1f1f;
  font-family:"Courier New", monospace;
  color:#e4d6d6;
}

.character-two .date-plate{
  font-size:15px;
  padding:8px 22px;
  background:#5b0f0f;
  color:#fff;
  letter-spacing:3px;
  display:inline-block;
  text-transform:uppercase;
}

.character-two .entry-bubble{
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.1);
}

.character-two .entry{
  line-height:1.9;
  font-size:15px;
  text-shadow:0 0 6px rgba(0,0,0,0.6);
}

/* =========================
   СТРЕЛКИ (без изменений логики)
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:#c8b18c;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  z-index:5;
}

/* появляются при наведении */
.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

.arrow:hover{
  background:#b79b70;
  transform:translateY(-50%) scale(1.08);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

57

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
м
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>
</div>
      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry-bubble">
        <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>
</div>
      </div>
    </div>




  </div>
  <div class="arrow next"></div>
</div>

<style>

/* =========================
   ОБЁРТКА
========================= */

.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent;
}

/* =========================
   КНИГА
========================= */

.book{
  position:relative;
  height:660px;
  border-radius:36px; /* обновлено */
  overflow:hidden;
  background:#e9dcc6; /* базовый цвет на случай прозрачности */
}

/* =========================
   СТРАНИЦЫ
========================= */

.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* =========================
   ВНУТРЕННОСТЬ
========================= */

.page-inner{
  height:100%;
  padding:80px 90px 80px 90px; /* обновлено */
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* =========================
   ПУЗЫРЬ (СКРОЛЛ ТОЛЬКО ЗДЕСЬ)
========================= */

.entry-bubble{
  flex:1;
  margin-top:30px; /* было 50px */
  border-radius:26px; /* обновлено */
  padding:50px 60px; /* обновлено */
  overflow-y:auto;
  position:relative;

  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.35) transparent;
}

.entry-bubble::-webkit-scrollbar{
  width:6px;
}

.entry-bubble::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:20px;
}

.entry-bubble::-webkit-scrollbar-track{
  background:transparent;
}

/* =========================
   ПЕРСОНАЖ 1
========================= */

.character-one{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5), transparent 60%),
    #f4ead7;
  font-family:"Georgia", serif; /* обновлено */
  color:#2b2a26; /* обновлено */
}

.character-one .date-plate{
  font-size:18px;
  padding:12px 36px;
  border:2px solid rgba(0,0,0,0.4);
  display:inline-block;
  letter-spacing:3px;
  text-transform:uppercase;
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:.3s ease;
}

.character-one .date-plate:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
}

/* Вертикальная линия — ЧАСТЬ СТРАНИЦЫ */

.character-one .page-inner::before{
  content:"";
  position:absolute;
  left:75px;      /* обновлено */
  top:150px;      /* обновлено */
  bottom:80px;    /* обновлено */
  width:2px;      /* обновлено */
  background:linear-gradient(to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.15));
}

/* Пузырь аккуратно вписан */

.character-one .entry-bubble{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(3px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    inset 0 0 40px rgba(0,0,0,0.03);
  padding-left:70px;
}

.character-one .entry{
  line-height:2.05;
  font-size:17px;
  letter-spacing:0.3px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    radial-gradient(circle at 70% 30%, rgba(120,0,0,0.25), transparent 60%),
    linear-gradient(#130c0c,#0b0505);
  font-family:"Cormorant Garamond", serif; /* обновлено */
  color:#f1e7e7;
}

.character-two .date-plate{
  font-size:17px;
  padding:10px 28px;
  background:linear-gradient(90deg,#6e0f0f,#9b1c1c);
  color:#fff;
  letter-spacing:4px;
  display:inline-block;
  text-transform:uppercase;
  box-shadow:
    0 0 20px rgba(180,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.6);
  transition:.3s ease;
}

.character-two .date-plate:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 30px rgba(220,0,0,0.6),
    0 15px 40px rgba(0,0,0,0.8);
}

.character-two .entry-bubble{
  background:rgba(15,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    inset 0 0 50px rgba(150,0,0,0.15);
  padding:50px 60px;
}

.character-two .entry{
  line-height:1.95;
  font-size:18px;
  letter-spacing:0.4px;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
}

/* =========================
   СТРЕЛКИ (без изменения логики)
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  z-index:5;
}

/* появляются при наведении */
.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

/* Светлая стрелка */

.character-one ~ .arrow{
  background:#d6c3a3;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* Темная стрелка */

.character-two ~ .arrow{
  background:#4a0c0c;
}

.arrow:hover{
  transform:translateY(-50%) scale(1.1);
}

/* Стрелки с треугольниками (оставляем прежнюю форму) */

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

58

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
          Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
м
  Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки. Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.Бумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.мБумага слегка шершавая. Чернила мягкие.
          Почерк аккуратный, почти каллиграфический.
          Строки ложатся ровно, без спешки.
        </div>
</div>
      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry-bubble">
        <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>
</div>
      </div>
    </div>




  </div>
  <div class="arrow next"></div>
</div>

<style>

/* =========================
   ОБЁРТКА
========================= */

.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent;
}

/* =========================
   КНИГА
========================= */

.book{
  position:relative;
  height:660px;
  border-radius:36px;
  overflow:hidden;
  background:#e9dcc6;
}

/* =========================
   СТРАНИЦЫ
========================= */

.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* =========================
   ВНУТРЕННОСТЬ
========================= */

.page-inner{
  height:100%;
  padding:80px 90px 80px 90px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* =========================
   ПУЗЫРЬ
========================= */

.entry-bubble{
  flex:1;
  margin-top:30px;
  border-radius:26px;
  padding:50px 60px;
  overflow-y:auto;
  position:relative;

  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.35) transparent;
}

.entry-bubble::-webkit-scrollbar{
  width:6px;
}

.entry-bubble::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.35);
  border-radius:20px;
}

.entry-bubble::-webkit-scrollbar-track{
  background:transparent;
}

/* =========================
   ПЕРСОНАЖ 1 — ЗЕЛЕНАЯ, ТЁПЛАЯ
========================= */

.character-one{
  background:
    radial-gradient(circle at 20% 20%, rgba(210,245,190,0.6), transparent 60%),
    linear-gradient(160deg, #d7c9a7, #b5c49f); /* кожа + лесной оттенок */
  font-family:"Georgia", serif;
  color:#2b2a26;
}

.character-one .date-plate{
  font-size:18px;
  padding:12px 36px;
  border:2px solid rgba(60,80,40,0.6); /* мягкий темно-зеленый */
  display:inline-block;
  letter-spacing:3px;
  text-transform:uppercase;
  background:rgba(200,230,180,0.6);
  backdrop-filter:blur(2px);
  box-shadow:0 6px 15px rgba(0,0,0,0.08);
  transition:.3s ease;
}

.character-one .date-plate:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,0.12);
}

/* Вертикальная линия — лесной мягкий тон */

.character-one .page-inner::before{
  content:"";
  position:absolute;
  left:75px;
  top:150px;
  bottom:80px;
  width:2px;
  background:linear-gradient(to bottom,
    rgba(60,80,40,0.2),
    rgba(60,80,40,0.6),
    rgba(60,80,40,0.2));
}

/* Пузырь полностью закрашен */

.character-one .entry-bubble{
  background:rgba(190,220,160,0.85); /* мягкий зеленый */
  box-shadow:
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 0 30px rgba(255,255,255,0.1);
  padding-left:70px;
  border:none;
}

.character-one .entry{
  line-height:2.05;
  font-size:17px;
  letter-spacing:0.3px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    radial-gradient(circle at 70% 30%, rgba(120,0,0,0.25), transparent 60%),
    linear-gradient(#130c0c,#0b0505);
  font-family:"Cormorant Garamond", serif;
  color:#f1e7e7;
}

.character-two .date-plate{
  font-size:17px;
  padding:10px 28px;
  background:linear-gradient(90deg,#6e0f0f,#9b1c1c);
  color:#fff;
  letter-spacing:4px;
  display:inline-block;
  text-transform:uppercase;
  box-shadow:
    0 0 20px rgba(180,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.6);
  transition:.3s ease;
}

.character-two .date-plate:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 30px rgba(220,0,0,0.6),
    0 15px 40px rgba(0,0,0,0.8);
}

.character-two .entry-bubble{
  background:rgba(15,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    inset 0 0 50px rgba(150,0,0,0.15);
  padding:50px 60px;
}

.character-two .entry{
  line-height:1.95;
  font-size:18px;
  letter-spacing:0.4px;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
}

/* =========================
   СТРЕЛКИ
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  z-index:5;
}

.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

.character-one ~ .arrow{
  background:#9ebc80; /* мягкий зеленый */
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.character-two ~ .arrow{
  background:#4a0c0c;
}

.arrow:hover{
  transform:translateY(-50%) scale(1.1);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #2f3a40;
  border-right:2px solid #2f3a40;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

59

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
        </div>
</div>
      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry-bubble">
        <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>
</div>
      </div>
    </div>

  <!-- СТРАНИЦА 1 -->
    <div class="page character-one">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
        </div>
</div>
      </div>
    </div>

  </div>
  <div class="arrow next"></div>
</div>

<style>

/* =========================
   ОБЁРТКА
========================= */

.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent;
}

/* =========================
   КНИГА
========================= */

.book{
  position:relative;
  height:660px;
  border-radius:36px;
  overflow:hidden;
  background:#e9dcc6;
}

/* =========================
   СТРАНИЦЫ
========================= */

.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* =========================
   ВНУТРЕННОСТЬ
========================= */

.page-inner{
  height:100%;
  padding:80px 90px 80px 90px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* =========================
   ПУЗЫРЬ
========================= */

.entry-bubble {
  flex: 1 1 auto;          /* растягиваем, но не “ломаем” высоту */
  margin-top: 30px;
  border-radius: 26px;
  padding: 25px 60px 35px 70px; /* уменьшили верхний padding, добавили нижний */
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;  /* padding включен в высоту */

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) transparent;
}

.entry-bubble::-webkit-scrollbar {
  width: 6px;
}

.entry-bubble::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.35);
  border-radius: 20px;
}

.entry-bubble::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================
   ПЕРСОНАЖ 1 — МУЖСКОЙ ДНЕВНИК
========================= */

.character-one{
  background:
    radial-gradient(circle at 25% 25%, rgba(50,80,50,0.4), transparent 60%),
    linear-gradient(160deg, #3b2f25, #1f3a2a); /* коричнево-хвойный */
  font-family:"Georgia", serif;
  color:#e4dbc6; /* читаемый контрастный текст */
}

.character-one .date-plate{
  font-size:18px;
  padding:12px 36px;
  border:2px solid rgba(100,120,80,0.8); /* темно-зеленый */
  display:inline-block;
  letter-spacing:2px;
  text-transform:uppercase;
  background:rgba(50,70,40,0.5);
  color:#f1f0e6;
  backdrop-filter:blur(2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:.3s ease;
}

.character-one .date-plate:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}

/* Вертикальная линия — коричнево-зеленая */

.character-one .page-inner::before{
  content:"";
  position:absolute;
  left:75px;
  top:150px;
  bottom:80px;
  width:2px;
  background:linear-gradient(to bottom,
    rgba(80,90,60,0.2),
    rgba(50,70,40,0.6),
    rgba(80,90,60,0.2));
}

/* Пузырь — тёплый, закрашенный */

.character-one .entry-bubble{
  background:#3a4a36; /* глубокий зеленый */
  box-shadow:
    0 12px 28px rgba(0,0,0,0.2),
    inset 0 0 35px rgba(0,0,0,0.08);
  color:#e4dbc6; /* текст читаемый */
  padding-left:70px;
  border:none;
}

.character-one .entry{
  line-height:2.05;
  font-size:17px;
  letter-spacing:0.2px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    radial-gradient(circle at 70% 30%, rgba(120,0,0,0.25), transparent 60%),
    linear-gradient(#130c0c,#0b0505);
  font-family:"Cormorant Garamond", serif;
  color:#f1e7e7;
}

.character-two .date-plate{
  font-size:17px;
  padding:10px 28px;
  background:linear-gradient(90deg,#6e0f0f,#9b1c1c);
  color:#fff;
  letter-spacing:4px;
  display:inline-block;
  text-transform:uppercase;
  box-shadow:
    0 0 20px rgba(180,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.6);
  transition:.3s ease;
}

.character-two .date-plate:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 30px rgba(220,0,0,0.6),
    0 15px 40px rgba(0,0,0,0.8);
}

.character-two .entry-bubble{
  background:rgba(15,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    inset 0 0 50px rgba(150,0,0,0.15);
  padding:50px 60px;
}

.character-two .entry{
  line-height:1.95;
  font-size:18px;
  letter-spacing:0.4px;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
}

/* =========================
   СТРЕЛКИ
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  z-index:5;
}

.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

.character-one ~ .arrow{
  background:#2e452e; /* глубокий зеленый */
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.character-two ~ .arrow{
  background:#4a0c0c;
}

.arrow:hover{
  transform:translateY(-50%) scale(1.1);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #e4dbc6;
  border-right:2px solid #e4dbc6;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

60

  • Автор: Фиксатор
  • Мастер настроек
  • Фиксатор
  • Зарегистрирован: 2013-12-25
  • Приглашений: 0
  • Сообщений: 115
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 9 часов
  • Последний визит:
    Вчера 00:13:52

[html]
<!-- Подключаем шрифт прямо через head -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>

<div class="diary-wrapper">

  <div class="arrow prev"></div>
  <div class="book">

    <!-- СТРАНИЦА 1 -->
    <div class="page character-one active">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
        </div>
</div>
      </div>
    </div>

    <!-- СТРАНИЦА 2 -->
    <div class="page character-two">
      <div class="page-inner">

        <div class="date-plate">13 октября</div>

        <div class="entry-bubble">
         <div class="entry">
          Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
        </div>
</div>
      </div>
    </div>

  <!-- СТРАНИЦА 1 -->
    <div class="page character-one">
      <div class="page-inner">

        <div class="date-plate">12 октября</div>

       <div class="entry-bubble">
<div class="entry">
          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
        </div>
</div>
      </div>
    </div>

  </div>
  <div class="arrow next"></div>
</div>

<style>

/* =========================
   ОБЁРТКА
========================= */

.diary-wrapper{
  position:relative;
  width:100%;
  max-width:780px;
  margin:80px auto;
  background:transparent;
}

/* =========================
   КНИГА
========================= */

.book{
  position:relative;
  height:660px;
  border-radius:36px;
  overflow:hidden;
  background:#e9dcc6;
}

/* =========================
   СТРАНИЦЫ
========================= */

.page{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:rotateY(90deg);
  opacity:0;
  transition:0.8s ease;
  backface-visibility:hidden;
}

.page.active{
  transform:rotateY(0deg);
  opacity:1;
}

/* =========================
   ВНУТРЕННОСТЬ
========================= */

.page-inner{
  height:100%;
  padding:80px 90px 80px 90px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* =========================
   ПУЗЫРЬ
========================= */

.entry-bubble {
  flex: 1 1 auto;          /* растягиваем, но не “ломаем” высоту */
  margin-top: 20px;
  border-radius: 26px;
  padding: 25px 40px 35px 45px; /* top right bottom left */
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;  /* padding включен в высоту */

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) transparent;
}

.entry-bubble::-webkit-scrollbar {
  width: 6px;
}

.entry-bubble::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.35);
  border-radius: 20px;
}

.entry-bubble::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================
   ПЕРСОНАЖ 1 — МУЖСКОЙ ДНЕВНИК
========================= */

.character-one{
  background:
    radial-gradient(circle at 25% 25%, rgba(50,80,50,0.4), transparent 60%),
    linear-gradient(160deg, #3b2f25, #1f3a2a); /* коричнево-хвойный */
  font-family:"Georgia", serif;
  color:#e4dbc6; /* читаемый контрастный текст */
}

.character-one .date-plate{
  font-size:18px;
  padding:12px 36px;
  border:2px solid rgba(100,120,80,0.8); /* темно-зеленый */
  display:inline-block;
  letter-spacing:2px;
  text-transform:uppercase;
  background:rgba(50,70,40,0.5);
  color:#f1f0e6;
  backdrop-filter:blur(2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:.3s ease;
}

.character-one .date-plate:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}

/* Вертикальная линия — коричнево-зеленая */

.character-one .page-inner::before{
  content:"";
  position:absolute;
  left:75px;
  top:150px;
  bottom:80px;
  width:2px;
  background:linear-gradient(to bottom,
    rgba(80,90,60,0.2),
    rgba(50,70,40,0.6),
    rgba(80,90,60,0.2));
}

/* Пузырь — тёплый, закрашенный */

.character-one .entry-bubble{
  background:#3a4a36; /* глубокий зеленый */
  box-shadow:
    0 12px 28px rgba(0,0,0,0.2),
    inset 0 0 35px rgba(0,0,0,0.08);
  color:#e4dbc6; /* текст читаемый */
  padding-left:40px;
  border:none;
}

.character-one .entry{
  line-height:2.05;
  font-size:17px;
  letter-spacing:0.2px;
}

/* =========================
   ПЕРСОНАЖ 2
========================= */

.character-two{
  background:
    radial-gradient(circle at 70% 30%, rgba(120,0,0,0.25), transparent 60%),
    linear-gradient(#130c0c,#0b0505);
  font-family:"Cormorant Garamond", serif;
  color:#f1e7e7;
}

.character-two .date-plate{
  font-size:17px;
  padding:10px 28px;
  background:linear-gradient(90deg,#6e0f0f,#9b1c1c);
  color:#fff;
  letter-spacing:4px;
  display:inline-block;
  text-transform:uppercase;
  box-shadow:
    0 0 20px rgba(180,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.6);
  transition:.3s ease;
}

.character-two .date-plate:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 30px rgba(220,0,0,0.6),
    0 15px 40px rgba(0,0,0,0.8);
}

.character-two .entry-bubble{
  background:rgba(15,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    inset 0 0 50px rgba(150,0,0,0.15);
  padding:20px 40px;
}

.character-two .entry {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* =========================
   СТРЕЛКИ
========================= */

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:.3s ease;
  z-index:5;
}

.book:hover .arrow{
  opacity:1;
}

.prev{
  left:25px;
}

.next{
  right:25px;
}

.character-one ~ .arrow{
  background:#2e452e; /* глубокий зеленый */
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.character-two ~ .arrow{
  background:#4a0c0c;
}

.arrow:hover{
  transform:translateY(-50%) scale(1.1);
}

.arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  border-top:2px solid #e4dbc6;
  border-right:2px solid #e4dbc6;
}

.next::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.prev::before{
  transform:translate(-50%,-50%) rotate(-135deg);
}

.arrow.visible{
  opacity:1;
}

</style>

<script>

let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');

function updateNav(){
  prev.classList.toggle('visible',current>0);
  next.classList.toggle('visible',current<pages.length-1);
}

updateNav();

next.onclick=function(){
  if(current<pages.length-1){
    pages[current].classList.remove('active');
    current++;
    pages[current].classList.add('active');
    updateNav();
  }
};

prev.onclick=function(){
  if(current>0){
    pages[current].classList.remove('active');
    current--;
    pages[current].classList.add('active');
    updateNav();
  }
};

</script>

[/html]

Ответить
Страница:   1 … 4 5 6 7 8 … 14  

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

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


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