Благодарим за выбор нашего сервиса!
- Подпись автора
Текст Текст Текст
Тестовое сообщение
Страница: 1
Сообщений 1 страница 4 из 4
Поделиться12024-03-17 12:35:28
- длинный длинный статус на две строки и даже больше
-
positing infinity, the rest is easy - Агент "Сетевого Дозора", нетраннер
- Сообщений: 72
- Уважение: +0
Поделиться22024-03-22 15:42:32
- длинный длинный статус на две строки и даже больше
-
positing infinity, the rest is easy - Агент "Сетевого Дозора", нетраннер
- Сообщений: 72
- Уважение: +0
боалджовкждлпоукцлп
- Подпись автора
Текст Текст Текст
Поделиться32024-05-01 00:05:44
- длинный длинный статус на две строки и даже больше
-
positing infinity, the rest is easy - Агент "Сетевого Дозора", нетраннер
- Сообщений: 72
- Уважение: +0
[html]
<style>
.ep-wrapper {border-image-source: linear-gradient(to bottom, #ff00c840, #00000033);}
.ep-title {background: linear-gradient(90deg, rgb(0 147 255 / 50%) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5) 81%, rgb(0 147 255 / 50%) 100%);}
.players-uniq{background: linear-gradient(90deg, rgb(0 147 255 / 50%) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5) 81%, rgb(0 147 255 / 50%) 100%);}
.plot-uniq{background: linear-gradient(90deg, rgb(110 0 255 / 24%) 0%, rgba(0, 0, 0, 0.5) 58%);}
.parallax {background: url(https://i.imgur.com/cXQnwq5.jpeg);}
.double {background: url(https://i.imgur.com/ud9LiYh.png);}
.triple {background: url(https://i.imgur.com/BtVWc7Y.png);}
</style>
<div class="ep-wrapper">
<div class="parallax" data-speed="0.02"></div>
<div class="parallax double" data-speed="0.04"></div>
<div class="parallax triple" data-speed="0.06"></div>
<div class="ep-title"><p>Название Эпизода</p></div>
<div class="players-uniq"><a href="#">Участник 1</a>, <a href="#">Участник 2</a>, <a href="#">Участник 3</a></div>
<div class="plot-uniq">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla dolores architecto corrupti rem aperiam obcaecati suscipit! Eveniet laboriosam maiores illo. Ea placeat velit numquam tenetur iste. Vitae repellendus excepturi facilis commodi molestias tenetur vero nemo illum, accusantium maiores optio.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla dolores architecto corrupti rem aperiam obcaecati suscipit! Eveniet laboriosam maiores illo.
</div>
</div>
<div>[/html]
- Подпись автора
Текст Текст Текст
Поделиться42024-05-01 23:02:46
- длинный длинный статус на две строки и даже больше
-
positing infinity, the rest is easy - Агент "Сетевого Дозора", нетраннер
- Сообщений: 72
- Уважение: +0
Пояснения к коду
Отличный генератор градиентов: CSS Gradient
Градиенты менять не обязательно, но убирать их нельзя, иначе собьётся отображение.<style>
.ep-wrapper {border-image-source: linear-gradient(to bottom, #ff00c840, #00000033);} //Это цвет рамки всей шапки эпизода
.ep-title {background: linear-gradient(90deg, rgb(0 147 255 / 50%) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5) 81%, rgb(0 147 255 / 50%) 100%);} //Это цвета градиента для названия эпизода
.players-uniq{background: linear-gradient(90deg, rgb(0 147 255 / 50%) 0%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.5) 81%, rgb(0 147 255 / 50%) 100%);} //Это цвета градиента для списка участников эпизода
.plot-uniq{background: linear-gradient(90deg, rgb(110 0 255 / 24%) 0%, rgba(0, 0, 0, 0.5) 58%);} //Это цвета градиента для описания эпизода
.parallax {background: url(https://i.imgur.com/cXQnwq5.jpeg);} //Это картинка-фон для всей шапки. Она обязательна. желательно использовать квадрат 800x800px
.double {background: url(https://i.imgur.com/ud9LiYh.png);} //Это средний уровень эффекта смещения
.triple {background: url(https://i.imgur.com/BtVWc7Y.png);} //Это самый первый слой эффекта смещения.
</style>//Ниже начинается разметка самой шапки.
<div class="ep-wrapper">
<div class="parallax" data-speed="0.02"></div> //Это контейнер фона для всей шапки
<div class="parallax double" data-speed="0.04"></div> //Это средний уровень эффекта смещения. Если не нужен - просто удалить эту строку.
<div class="parallax triple" data-speed="0.06"></div> //Это самый верхний уровень эффекта смещения. Если не нужен - просто удалить эту строку.
<div class="ep-title"><p>Название Эпизода</p></div>
<div class="players-uniq"><a href="#">Участник 1</a>, <a href="#">Участник 2</a>, <a href="#">Участник 3</a></div><div class="plot-uniq">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla dolores architecto corrupti rem aperiam obcaecati suscipit! Eveniet laboriosam maiores illo. Ea placeat velit numquam tenetur iste. Vitae repellendus excepturi facilis commodi molestias tenetur vero nemo illum, accusantium maiores optio.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla dolores architecto corrupti rem aperiam obcaecati suscipit! Eveniet laboriosam maiores illo.
</div>
</div>
<div>
- Подпись автора
Текст Текст Текст
Страница: 1
