важная тема
Сообщений 1 страница 5 из 5
Поделиться22025-07-05 22:57:42
[backdrop]<img src="https://upforme.ru/uploads/001c/2b/a3/11/726849.png" class="first_pesonal_bg">[/backdrop][nameinfo]пупупу[/nameinfo]
тест фона
Поделиться32025-09-10 00:35:45
#header_wrapper {
width: auto;
height: 287px;
box-sizing: border-box;
color: var(--text2);
font: 400 10px/150% var(--font);
display: flex;
gap: 10px;
justify-content: flex-end;
background: url(https://forumstatic.ru/files/001c/52/69/11309.png);
flex-direction: column;
margin: -40px -40px 0;
border-radius: 29px 29px 0 0;
padding: 0 60px;
position: relative;
}
.header-heart {
width: 111px;
position: absolute;
z-index: 10;
left: -15px;
bottom: -28px;
pointer-events: none
}
.header-star {
width: 154px;
position: absolute;
top: 38px;
left: 160px;
z-index: 10;
pointer-events: none
}
.header_plashes {
background: var(--dark600);
margin: 15px -40px 10px;
height: 30px;
box-sizing: border-box;
padding: 5px !important;
padding-left: 60px !important;
display: flex;
gap: 5px;
align-items: center;
overflow: hidden;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.header_plashes a {
height: 100%;
background: var(--accent);
color: var(--text3) !important;
border-radius: 15px;
padding: 0px 20px !important;
white-space: nowrap;
display: flex;
position: relative;
}
.header_plashes a:before {
content: "";
background: var(--accent);
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
border-radius: 15px;
transition: all .6s cubic-bezier(0.25, 1, 0.5, 1) 0s !important;
transform: scale(0);
transform-origin: bottom;
filter: blur(20px)
}
.header_plashes a:hover:before {
background: var(--accent2);
transform: scale(1);
filter: blur(0px)
}
.plashes-item {
display: flex;
gap: 10px;
align-items: center;
font: normal 11px var(--font);
text-transform: uppercase;
position: relative;
z-index: 1
}
.plashes-item b {
font-weight: 300;
border-right: 1px solid rgba(255,255,255,.25);
padding-right: 10px;
}
.plashes-item p {
font-weight: 700
}
.header-content {
display: flex;
gap: 10px;
box-sizing: border-box;
color: var(--text1);
max-height: 122px;
}
.header-item {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
background: var(--fill);
border-radius: 15px;
padding: 15px;
box-sizing: border-box
}
.header-title {
color: var(--text2);
text-transform: uppercase;
}
.header-title a {
font-weight: 700;
}
.header-bestpost {
width: 410px;
height: 117px;
}
.header-bestpost p {
overflow-y: auto;
height: calc(100% - 15px);
font-size: 11px;
padding-right: 10px;
text-transform: lowercase
}
.header-bestep {
width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
text-transform: uppercase
}
.header-bestep p {
margin-top: 3px;
}
.header-bestep a {
font-size: 11px;
font-weight: 700;
text-align: center
}
.header-links {
height: auto;
align-self: flex-end;
margin: 0 25px 10px;
width: 209px;
padding: 0;
}
.header-links .slide_button {
text-transform: uppercase;
font-weight: 700;
text-align: center;
padding: 5px 15px;
cursor: pointer
}
.header-links .slide_block {
display: none;
position: absolute;
border-radius: 15px;
bottom: calc(100% + 5px);
width: 100%;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
background: var(--fill);
}
.header-links .link {
padding: 15px;
display: flex;
flex-direction: column;
gap: 2px;
}
.header-links .link a {
background: var(--beg100);
padding: 2px 10px;
border-radius: 7px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
text-align: center;
transition: all .3s linear 0s !important;
}
.header-links .link a:hover {
background: var(--accent);
color: var(--text3) !important;
}
.header-persons {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: right;
padding: 10px 15px;
}
.header-persons .header-title {
width: 100%;
}
.persons {
display: flex;
flex-wrap: wrap;
gap: 2px 5px;
}
.persons a {
width: 30px;
height: 30px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.persons img {
width: 30px;
height: 30px;
object-fit: cover;
filter: grayscale(100%)
}
.persons a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--accent2);
z-index: 1;
opacity: .3;
transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1) 0s
}
.persons a:hover:before {
transform: rotate(360deg) scale(0)
}
Поделиться42025-09-10 00:36:11
<div id="header_wrapper">
<img src="https://forumstatic.ru/files/001c/52/69/95211.png" class="header-star">
<img src="https://forumstatic.ru/files/001c/52/69/52920.png" class="header-heart">
<div class="header-screen-left"></div>
<div class="header-screen-right"></div>
<div class="header-content">
<div class="header-item header-bestpost">
<span class="header-title">лучший пост от <a href="https://moonsonata.rusff.me/viewtopic.php?id=872#p86500">киёна</a></span>
<p>Обыденным стало не умолкая трындеть, делясь со спящим Данте последними сплетнями из «Сонаты», кондитерским находками, историями из коротких путешествий по маршруту работа — дом. Ближе к рассвету Киён варил себе какой-то странный экспериментальный кисель, забирался в кресло с очередным томиком детектива и читал вслух, пока его не вырубало на собирании внутренностей очередной жертвы на месте преступления. И во всей этой бесконечной пародии на взаимодействие умудрялся жутко скучать по Данте — его голосу, мимике, хитрым-невинным-вызывающим взглядам, да по всему, во что он успел влюбиться по щелчку.</p>
</div>
<div class="header-item header-bestep">
<span class="header-title">лучший эпизод:</span>
<p>донни & ши ын</p>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=914">«poker face»</a>
</div>
<div class="header-item header-links">
<div class="slide_button"><span>полезные ссылки</span></div>
<!-- полезные ссылки -->
<div class="slide_block">
<div class="link">
<a href="https://moonsonata.rusff.me/viewtopic.php?id=6">гостевая</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=4">внешности</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=5">персонажи</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=12">faq</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=14">матчасть</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=9">организации</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=11">нужные</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=22">банк</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=18">артефакты</a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=19">профиль</a>
</div>
</div>
</div>
<div class="header-item header-persons">
<div class="persons">
<span class="header-title">активисты</span>
<a href="https://moonsonata.rusff.me/profile.php?id=104" title="Ён Керр"><img src="https://upforme.ru/uploads/001c/2b/a3/11/150648.png"></a>
<a href="https://moonsonata.rusff.me/profile.php?id=214" title="Фэн Шуй"><img src="https://upforme.ru/uploads/001c/2b/a3/11/522920.png"></a>
<a href="https://moonsonata.rusff.me/profile.php?id=235" title="Лета Морен"><img src="https://upforme.ru/uploads/001c/2b/a3/11/168139.png"></a>
</div>
<div class="persons">
<span class="header-title">постописцы</span>
<a href="https://moonsonata.rusff.me/profile.php?id=236" title="Лим Сончжэ"><img src="https://upforme.ru/uploads/001c/2b/a3/11/147651.png"></a>
<a href="https://moonsonata.rusff.me/profile.php?id=238" title="Лим Ходжин"><img src="https://upforme.ru/uploads/001c/2b/a3/11/626183.png"></a>
<a href="https://moonsonata.rusff.me/profile.php?id=237" title="Эш Ли"><img src="https://upforme.ru/uploads/001c/2b/a3/11/81875.png"></a>
</div>
</div>
</div>
</div>
<div class="header_plashes">
<!--плашки -->
<a href="https://moonsonata.rusff.me/viewtopic.php?id=15&p=2#p87821"><div class="plashes-item">
<b>07.09</b>
<p>новости</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=954#p87820"><div class="plashes-item">
<b>07.09</b>
<p>support for paws</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=953#p87819"><div class="plashes-item">
<b>07.09</b>
<p>dream team</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=952#p87818"><div class="plashes-item">
<b>07.09</b>
<p>мультопрос</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=869#p87815"><div class="plashes-item">
<b>07.09</b>
<p>бинго</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=328&p=12#p87814"><div class="plashes-item">
<b>07.09</b>
<p>пара картинок</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=780#p87816"><div class="plashes-item">
<b>07.09</b>
<p>пазлики</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=906#p87817"><div class="plashes-item">
<b>07.09</b>
<p>тест</p>
</div></a>
<a href="https://moonsonata.rusff.me/viewtopic.php?id=3#p87813"><div class="plashes-item">
<b>07.09</b>
<p>удаления</p>
</div></a>
<!--плашки -->
</div>



























