биндер

Поделиться1Сегодня 04:10:30

Автор: незнайка
Администратор
Сообщений: 153
Уважение: +0
Позитив: +0
Последний визит:
Сегодня 04:30:05

ы

Поделиться2Сегодня 04:10:36

Автор: незнайка
Администратор
Сообщений: 153
Уважение: +0
Позитив: +0
Последний визит:
Сегодня 04:30:05

[hideprofile][html]

<style>
.oa-cdlite{--case-dark:#17223e;--case-light:#355487;--accent:#9fdfee;--sheet:#edf2fb;--ink:#2d3a5a;--film:rgba(255,255,255,.12);--film-edge:rgba(255,255,255,.35);--coin-film:none;box-sizing:border-box;width:min(620px,100%);margin:18px auto;padding:14px;border-radius:27px;background:linear-gradient(130deg,var(--case-dark),var(--case-light));color:#fff;font:12px/1.4 "Trebuchet MS",Arial,sans-serif}
.oa-cdlite *,.oa-cdlite *:before,.oa-cdlite *:after{box-sizing:border-box}
/* ОБЫЧНАЯ ПЛЁНКА: почти прозрачный кармашек */
.oa-cdlite[data-film="clear"]{
--film:
linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 42%,rgba(255,255,255,.08) 74%,rgba(255,255,255,.16));
--film-edge:rgba(255,255,255,.44);
--coin-film:none;
}
/* ПЕРЛАМУТР: мягкий перелив НА ВСЁМ КВАДРАТНОМ ВКЛАДЫШЕ */
.oa-cdlite[data-film="pearl"]{
--film:
linear-gradient(130deg,rgba(164,220,255,.34),rgba(248,205,237,.28) 45%,rgba(224,244,255,.20) 72%,rgba(181,196,255,.26));
--film-edge:rgba(255,255,255,.84);
--coin-film:none;
}
/* HOLO: радужный вкладыш с блёстками НА ВСЁМ КАРМАШКЕ */
.oa-cdlite[data-film="holo"]{
--film:
radial-gradient(circle at 14% 18%,rgba(255,255,255,.92) 0 1.4px,transparent 2.8px),
radial-gradient(circle at 82% 20%,rgba(255,255,255,.80) 0 1.3px,transparent 2.7px),
radial-gradient(circle at 74% 77%,rgba(255,255,255,.88) 0 1.4px,transparent 2.8px),
radial-gradient(circle at 26% 73%,rgba(255,255,255,.76) 0 1.2px,transparent 2.6px),
radial-gradient(circle at 50% 48%,rgba(255,255,255,.62) 0 1px,transparent 2.3px),
linear-gradient(127deg,rgba(255,108,174,.30),rgba(255,226,121,.26) 22%,rgba(111,235,237,.29) 45%,rgba(154,125,251,.30) 68%,rgba(176,248,206,.22) 86%,rgba(255,133,207,.28));
--film-edge:rgba(255,255,255,.92);
--coin-film:none;
}

.oa-cdlite-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 8px 13px}.oa-cdlite-head b{font-size:21px;letter-spacing:.3px}.oa-cdlite-head b span{color:var(--accent)}.oa-cdlite-head small{color:#d5e2f5;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.oa-cdlite-body{position:relative;height:720px;padding:15px 15px 15px 65px;border-radius:22px;background:rgba(8,16,33,.19)}
.oa-cdlite-zip{position:absolute;top:13px;bottom:13px;left:15px;width:35px;border-radius:18px;border:1px solid rgba(255,255,255,.22);background:rgba(7,15,31,.37);pointer-events:none}
.oa-cdlite-zip:before{content:"";position:absolute;left:16px;top:11px;bottom:11px;border-left:2px dashed rgba(210,227,248,.55)}
.oa-cdlite-nav{position:static;z-index:3;width:27px;margin-left:-46px;margin-top:46px;display:flex;flex-direction:column;gap:10px}.oa-cdlite-row{position:static}.oa-cdlite-row input{position:absolute;width:1px;height:1px;opacity:0}
.oa-cdlite-row label{display:grid;place-items:center;height:27px;border-radius:9px;background:#31486e;color:#fff;border:1px solid #7794bb;cursor:pointer;font-size:10px}
.oa-cdlite-row input:checked + label{background:var(--accent);color:#182b49;border-color:#fff;font-weight:bold}
.oa-cdlite-row input:focus-visible + label{outline:2px solid #fff;outline-offset:2px}
.oa-cdlite-page{display:none;position:absolute;top:15px;bottom:15px;left:65px;right:15px;padding:15px;border-radius:19px;background:var(--sheet);color:var(--ink)}
.oa-cdlite-row input:checked ~ .oa-cdlite-page{display:flex;flex-direction:column}.oa-cdlite-pagetop{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:11px}.oa-cdlite-pagetop span{color:#7182a2;font-size:10px}
.oa-cdlite-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
.oa-cdlite-pocket{min-width:0;min-height:0;position:relative;display:grid;place-items:center;border:1px solid #d3deef;border-radius:13px;background:#f8fbff;overflow:hidden}
.oa-cdlite-pocket:after{content:"";position:absolute;inset:0;background:var(--film);border:1px solid var(--film-edge);border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}
.oa-cdlite-pocket:before{content:"";position:absolute;left:8%;right:8%;top:5%;height:14%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));opacity:.55;pointer-events:none}
.oa-cdlite-coin{position:relative;width:88%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#e5ecf7;border:2px solid #d3e0ef;box-shadow:inset 0 2px 6px rgba(58,83,124,.1)}
.oa-cdlite-coin img{width:100%;height:100%;display:block;object-fit:contain}

@media (max-width:600px){.oa-cdlite{padding:9px;border-radius:20px}.oa-cdlite-body{height:505px;padding-left:48px}.oa-cdlite-zip{left:8px;width:29px}.oa-cdlite-zip:before{left:13px}.oa-cdlite-nav{margin-left:-39px;width:27px}.oa-cdlite-page{left:48px;right:9px;padding:9px}.oa-cdlite-grid{gap:6px}.oa-cdlite-pocket{border-radius:8px}.oa-cdlite-coin{position:relative;width:84%;border-width:1px}.oa-cdlite-head b{font-size:18px}.oa-cdlite-head small{font-size:9px}}

/* ПУСТЫЕ МЕСТА: пока не вставлена ссылка, кружки остаются пустыми.
Строки ССЫЛКА НА ФИШКУ 01 и т. д. заменяются адресами картинок. */
.oa-cdlite-coin img[src^="ССЫЛКА НА ФИШКУ"] { display: none; }

/* 6. УВЕЛИЧЕНИЕ ФИШКИ ПО НАЖАТИЮ
Один тег img: ссылку нужно подставить только один раз.
Повторное нажатие по затемнённому экрану закрывает увеличение. */
.oa-cdlite .oa-cdlite-zoom { display:block; width:100%; height:100%; }
.oa-cdlite .oa-cdlite-zoom summary {
display:flex; align-items:center; justify-content:center;
width:100%; height:100%; padding:0; margin:0;
list-style:none; cursor:zoom-in; pointer-events:none;
}
.oa-cdlite .oa-cdlite-zoom summary::-webkit-details-marker { display:none; }
.oa-cdlite .oa-cdlite-zoom summary img {
display:block; width:100%; height:100%; object-fit:contain; pointer-events:auto;
}
/* Полноэкранная подложка и та же картинка в крупном размере */
.oa-cdlite .oa-cdlite-zoom[open] summary {
position:fixed; left:0; top:0; right:0; bottom:0;
width:100vw; height:100vh; z-index:99999;
padding:20px; background:rgba(9,14,30,.88);
cursor:zoom-out; pointer-events:auto;
}
.oa-cdlite .oa-cdlite-zoom[open] summary img {
width:min(78vw,480px); height:min(78vw,480px);
max-height:78vh; object-fit:contain;
background:rgba(245,248,255,.05);
border:3px solid rgba(255,255,255,.78);
border-radius:50%;
box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.oa-cdlite .oa-cdlite-zoom[open] summary:after {
content:"× закрыть";
position:absolute; right:24px; top:22px;
color:#fff; font:13px/1.4 "Trebuchet MS",Arial,sans-serif;
letter-spacing:1px;
}
/* Пустая ячейка не нажимается: кликабельна только настоящая картинка. */

.oa-cdlite .oa-cdlite-coin .oa-cdlite-zoom img[src^="ССЫЛКА НА ФИШКУ"] { display:none; }
</style>

<!--
ON:AIR / CHIP CASE 3×4
ВАЖНО: менять только текст и src в подписанных местах.

ЦВЕТ ЧЕХЛА: --case-dark, --case-light и --accent ниже в style="..."
ПОКРЫТИЕ: data-film="clear" (обычное), "pearl" (перламутр), "holo" (радужное)
ФИШКИ: заменить "ССЫЛКА НА ФИШКУ 01" и т.д. на прямые URL изображений
СТРАНИЦЫ: для третьего листа скопировать целиком блок .oa-cdlite-row
и поменять id/for + номер листа, оставив то же name.
-->
<div class="oa-cdlite" data-film="holo"
style="--case-dark:#17223e;--case-light:#355487;--accent:#9fdfee;">

<div class="oa-cdlite-head">
<b>ON<span>:AIR</span> / CHIP CASE</b>
<small>вертикальный альбом • 3×4</small>
</div>

<div class="oa-cdlite-nav">

<div class="oa-cdlite-row">
<input type="radio" name="OA_BINDER_V001" id="oa-binder-v001-p01" checked>
<label for="oa-binder-v001-p01" title="Открыть страницу 1">01</label>

<div class="oa-cdlite-page">
<div class="oa-cdlite-pagetop">
<b>лист 01</b>
<span>12 мест для фишек</span>
</div>

<div class="oa-cdlite-page">
<div class="oa-cdlite-pagetop">
<b>лист 02</b>
<span>12 мест для фишек</span>
</div>

[/html]
[/hideprofile]

0

Поделиться3Сегодня 04:11:08

Автор: незнайка
Администратор
Сообщений: 153
Уважение: +0
Позитив: +0
Последний визит:
Сегодня 04:30:05

data-film меняем clear/pearl/holo

0

yanichegoneznayu

Меню навигации

Пользовательские ссылки

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

биндер

Сообщений 1 страница 3 из 3

Поделиться1Сегодня 04:10:30

Поделиться2Сегодня 04:10:36

Поделиться3Сегодня 04:11:08