ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

АКЦИЯ: Раздаём дизайны бесплатно

Доработаем макет под ваш проект;
Сверстаем;
Сделаем мобильную версию по желанию.

Подробнее

Поисковой ресурс

Проект от команды FD
для текстовых ролевиков

Спойлеры и обсуждение

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Конкурс! Интерфейс и взаимодействие! Главный приз - 2000 рублей.
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :)

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

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



Эксперименты Will O The Wisp

Сообщений 81 страница 90 из 102

81

один из моих вариантов для местного кода хтмл в категории, можно использовать как акции, как описание локаций, как новостной блог
за код в коде благодарим авторов кодепена

Код:
<!-- реклама в пустой категории -->
    </div></div><div width=100%>
    <script class="bannerN">
    var style='<style> tr#zzz .tcr, tr#zzz .tc3, tr#zzz .tc2{display:none!important}tr#zzz .tc2{wifth:100%}<style>'
    var a=$('script.bannerN');
    var id=a.parents('tr').attr('id');
    $('#'+id).parents('table:first').find('thead').hide();
    $(style.replace(/zzz/g,id)).insertBefore(a);
    a.parents('.tcl').find('.intd').remove();
    a.parents('.tcl').attr('colspan','4');
    a.remove();
    </script><div align=center>
    <!-- Тут Ваши баннеры -->

<header class="cont-slider">
    <section class="slider">
      <article class="slide uno"><h91>Добро пожаловать</h91><br><p> orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"></article><!--
      --><article class="slide dos"><h91>Добро пожаловать</h91><br><p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"></article><!--
      --><article class="slide tres"><h91>Добро пожаловать</h91><br><p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"></article><!--
      --><article class="slide cuatro"><h91>Добро пожаловать</h91><br><p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"></article><!--
      --><article class="slide cinco"><h91>Добро пожаловать</h91><br><p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"><img src="https://i.pinimg.com/564x/48/31/0d/48310dfcdac6f2e95d74087e603cd956.jpg"></article>
    </section>
</header>

<style>
.cont-slider {
    position: relative;
    height: 100px;
    max-height: 100px;
    width: auto;
    min-width: 255%;
    margin: 0 auto;
    overflow: hidden;
}
.slider {
    animation: deslizante 100s ease-out 0s backwards infinite;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
}
.slide {
    display: inline-block;
    position: relative;
    width: 20%;
    height: 100%;    
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    text-align: left;
}
.slide p{
background: rgba(0, 0, 0, 0.3);
color: #FFF;
position: relative;
left: 5px;
top: 8px;
font-size: 1em;
line-height: 1em;
border: 1px solid rgba(255,255,255,.45);
display: block;
text-align: left;
width: 500px;
height: 50px;
overflow: auto;
}
.slide img{
position: relative;
left: 530px;
top: -68px;
outline: 1px solid rgba(255,255,255,.45);
display: inline-block;
width: 110px;
padding: 1px;
}
.slide h91{
background: rgba(0, 0, 0, 0.3);
color: #FFF;
position: relative;
left: 5px;
top: 20px;
font-size: 1em;
line-height: 1em;
border: 1px solid rgba(255,255,255,.45);
display: block;
text-align: left;
width: 500px;
}
.uno {
  background-image: url(https://rare-gallery.com/uploads/posts/980729-samurai-digital-castle-artwork-men-Japan-cyan.jpg);background-color: #ccc;
background-blend-mode: overlay;transition: ease 3s;  transition-delay: 1s;box-shadow: inset 0px 0px 100px #7a95ad85;}
.dos {
  background-image: url(https://www.teahub.io/photos/full/106-1063328_2560x1600-chinese-landscape-wallpaper-china-art-landscape-chinese.jpg);background-color: #ccc;
background-blend-mode: overlay;transition: ease 3s;  transition-delay: 1s;box-shadow: inset 0px 0px 100px #7a95ad85;}
.tres {
  background-image: url(https://wallpaperaccess.com/full/3078670.jpg);background-color: #ccc;
background-blend-mode: overlay;transition: ease 3s;  transition-delay: 1s;box-shadow: inset 0px 0px 100px #7a95ad85;}
.cuatro {
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1b3ce854-1494-42a1-9931-f64b799e1bbb/d6z0i59-6942a97f-e5a1-48b6-beeb-69653340116d.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFiM2NlODU0LTE0OTQtNDJhMS05OTMxLWY2NGI3OTllMWJiYlwvZDZ6MGk1OS02OTQyYTk3Zi1lNWExLTQ4YjYtYmVlYi02OTY1MzM0MDExNmQuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.95PJft1wGDH30ojZ0SGMS8VFg4IKC-uWnC2LSQbMACs);background-color: #ccc;
background-blend-mode: overlay;transition: ease 3s;  transition-delay: 1s;box-shadow: inset 0px 0px 100px #7a95ad85;}
.cinco {
  background-image: url(https://wallpaperaccess.com/full/108867.jpg);background-color: #ccc;
background-blend-mode: overlay;transition: ease 3s;  transition-delay: 1s;box-shadow: inset 0px 0px 100px #7a95ad85;}

.uno:hover, .dos:hover, .tres:hover, .cuatro:hover, .cinco:hover {background-blend-mode: normal;transition: ease 3s;  transition-delay: 1s;}

@keyframes deslizante {
  0% {left: 0%; }
  15% {left: 0%; }
  20% {left: -40%; }
  35% {left: -40%; }
  40% {left: -80%; }  
  55% {left: -80%; }
  60% {left: -120%; }
  75% {left: -120%; }
  80% {left: -160%; }
  95% {left: -160%; }   
  100% {left: 0; }
}
</style>

+2

82

для хтмл шаблона эпизода

Код:
[html]<style>
/*переменные для стиля*/
#game {
    --c: 200px; /*Высота блока, высота картинки*/
    --b: #dbc3db; /*цвет текста, цвет рамки*/
    --g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
    --f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
  padding: 7px;
  border: 1px solid var(--b);
  height: calc(var (--c));
  width: calc(var(--g));
}
/*стиль самой картинки*/  
.e1 img {
  width: calc(var(--g));
  height: calc(var(--c));
}
 /*стиль названия эпизода*/ 
.e2 {
  width: 70px;
  border-right: 1px solid var(--b)!important;
  color: var(--b);
  vertical-align: top;
  padding-right: 10px!important;
  text-align:  right;  font-size:  30px;
  font-family:  impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/  
.e3 {
  padding: 10px;
  text-align: justify;
  padding-right: 0px;
  vertical-align: top;
}
/*по желанию - стиль буквицы*/
//  .e3::first-letter {
	  float: left;
  line-height: 35px;
  font-size: 3em;
  color: var(--b);
  border: solid var(--b);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 5px;
  margin-bottom: -5px;
   } 
/*стиль блока участники*/  
.e4 {
  padding: 7px;
  border: 1px solid var(--b);
  width: calc(var(--g));
    height: 22px;
    font-size: 1.1em;
    font-family: var(--f);
}
</style>

<div id="game">
<div align="center">
	<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
	<table style="width:calc(var(--g));" border="0">
    <tbody>
    	<tr>
        <td class="e2">Название эпизода</td>
        <td class="e3">
Описание эпизода:
<br>
        	— Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
        </td>
    	</tr>
    </tbody>
	</table>
	<div class="e4">
     Участники эпизода
	</div>
</div></div>[/html]

Отредактировано Will O The Wisp (14.11.22 11:20)

+3

83

вашему удовольствию: прокрутка баннеров в две строки с затуханием; медленно и печально;

Код:
[html]
<style>
:root {
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}



.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

/* Parent wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
}


</style>
<script>
</script>

<article class="wrapper">
  <div class="marquee">
    <div class="marquee__group">
<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>

    <div aria-hidden="true" class="marquee__group">
<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>
  </div>

  <div class="marquee marquee--reverse">
    <div class="marquee__group">
<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>

    <div aria-hidden="true" class="marquee__group">
<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

    </div>
  </div>
</article>


[/html]

+4

84

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

+5

85

сегодня в программе тексты

Тянем букву ОООООО

Код:
[html]
<style>
h17 {
  --color-one: hsl(210 80% 50%);
  --color-two: hsl(320 100% 75%);
  --stretch-multiplier: 5;
  font-size: clamp(2rem, 14vmin, 8rem);
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  display: grid;
  line-height: 1;
}



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;  
}



[aria-hidden] {
  display: flex;
  gap: 0.02ch;
  align-items: center;
  color: black;
}


.stretch-o {
  height: 1.12ch;
  width: calc(var(--stretch) * 1.16ch);
  translate: 0 -0.01ch;
  border: 0.25ch solid black;
  border-radius: 1ch;
  transition: width 0.2s;
  position: relative;
}

h17 {
  --stretch: 1;
}

h17:hover {
  --stretch: var(--stretch-multiplier);
}


.stretch-o:after,
.stretch-o:before {
  content: "";
  border: 0.25ch solid var(--color);
  position: absolute;
  inset: -0.25ch;
  border-radius: 1ch;
  opacity: calc(-1 + var(--stretch));
  transition: opacity 0.2s;
}

.stretch-o:before {
  --color: var(--color-one);
}

.stretch-o:after {
  --color: var(--color-two);
  mask:
    radial-gradient(
      circle at top left,
      black,
      transparent
    );
}

</style>
<h17>
  <span>Это</span>
  <span class=sr-only>
    Овощ
  </span>
  <span aria-hidden="true">
    <span></span>
    <span class=stretch-o></span>
    <span>В</span>
    <span class=stretch-o></span>
    <span>Щ</span>
  </span>
  <span>чтоб вы знали</span>
</h17>
[/html]

переливаем цвета

Код:
[html]
<style>
h81 {
  text-transform:uppercase;
  font-size:clamp(2rem, 10vw, 6rem);
  word-wrap: break-word;
  letter-spacing:3px;
  background-image:linear-gradient( 130deg,#acbfcd,#c1c8d5 41.07%,#319197 76.05%);
  -webkit-background-clip:text;
  color:hsl(0, 100%, 100%, 1);
}

.pulse {
  transition:color 350ms ease;
}

h81:hover .pulse {
  color:hsl(0, 100%, 100%, 0);
  cursor:pointer;
}

</style>
<script>
console.clear();
const styledText = document.querySelector("h81");

const splitText = (text)=> {
  
  let delay = 0;
  let splittedText = text.innerText.split("");
  text.innerText = "";
  
  splittedText.forEach(el => {
    
    let span = document.createElement("span");
    span.innerText = el;
    span.classList.add("pulse");
    span.style.transitionDelay = `${delay}s`;
    text.appendChild(span);
    delay +=0.04;
    
  });
  
  
};

 splitText(styledText);
</script>
<h81>Толстые голуби</h81>

[/html]

разрезанный текст

Код:
[html]
<style>
:root {
  --background-color: black;
  --text-color: hsl(0, 0%, 100%);
}
.wrapper {
  display: grid;
  place-content: center;
  background-color: var(--background-color);
  min-height: 100vh;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-color);
}

.wrapper > div {
  grid-area: 1/1/-1/-1;
}
.top3 {
  clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottom {
  clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
  color: transparent;
  background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
  background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
  background-clip: text;
  -webkit-background-clip: text;
  transform: translateX(-0.02em);
}

</style>


<section class="wrapper">
  <div class="top3">Sliced</div>
  <div></div>
  <div class="bottom" aria-hidden="true">Sliced</div>
</section>

[/html]

+2

86

#p176439,Will O The Wisp написал(а):

один из моих вариантов для местного кода хтмл в категории, можно использовать как акции, как описание локаций, как новостной блог

Что-то не могу понять: куда это ставить надо? В описание раздела?

Подпись автора

If you don't know what is it about, it's about money (польская пословица)
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

0

87

Automation Baby
это к коду  Реклама или объявление между категориями/форумами - в описании форума ;

+1

88

как можно сделать факушку хотя именно этот вариант можно и проще

Код:
[html]
<style>
main {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 50px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background-image: url(https://i.imgur.com/khglonO.jpg);
background-size: cover;
background-repeat: no-repeat;
}

.live-search-box {
  width: 100%;
  display: block;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #3498db;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.topic {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: solid 1px #ebebeb;
}

.open {
  cursor: pointer;
  display: block;
  padding: 0px;
background: #ffffffa8;
}

.open:hover {
  opacity: 0.7;
}

.expanded {
  background-color: #f5f5f5;
  transition: all .3s ease-in-out;
}

.ptag {
  display: none;
}

.question {
  padding-top: 30px;
  padding-right: 40px;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #526ee4;
}

.answer {
  font-size: 16px;
  line-height: 26px;
  display: none;
  margin-bottom: 30px;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
}

.faq-t {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
  float: right;
  position: relative;
  top: -55px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-left: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  transition: all .3s ease-in-out;
}

.faq-o {
  top: -50px;
  -moz-transform: rotate(-224deg);
  -ms-transform: rotate(-224deg);
  -webkit-transform: rotate(-224deg);
  transform: rotate(-224deg);
}
</style>
<script>
$(".open").click(function() {
  var container = $(this).parents(".topic");
  var answer = container.find(".answer");
  var trigger = container.find(".faq-t");

  answer.slideToggle(200);

  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  } else {
    trigger.addClass("faq-o");
  }

  if (container.hasClass("expanded")) {
    container.removeClass("expanded");
  } else {
    container.addClass("expanded");
  }
});

jQuery(document).ready(function($) {
  $('.question').each(function() {
    $(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

  });

  $('.live-search-box').on('keyup', function() {

    var searchTerm = $(this).val().toLowerCase();

    $('.question').each(function() {

      if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
        $(this).parent().parent().show();
      } else {
        $(this).parent().parent().hide();
      }

    });

  });

});
</script>
<main>
  <div class="topic">

    <div class="open">

      <h2 class="question">1. How can i delete my complaint/comment?<span class="ptag">SIEBEL</span></h2>
      <span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</main>
[/html]

+1

89

Кастомизация выделения

Код:
[html]<style>
.magic {
  color: transparent;
}

::selection {
  color: darkgrey;
}

</style>
<script>

</script>
<p>
  <span class="magic">✨🦄</span> Select the text or press "<b>cmd</b> + <b>a</b>" to see some magic.<span class="magic">✨🦄</span>
</p>
[/html]

+1

90

Для фака, либо для блоков правил. Не измененное. Автор в скрипте.

Код:
[html]
<style>
.heading-design {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-design:hover {
    background-color: #ff9800;
    border-bottom: solid 1px #ff9800;
}

.heading-prog {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
}

.heading-prog:hover {
    color: #eeeeee;
    background-color: #212121;
    border-bottom: solid 1px #212121;
}

.heading-music {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-music:hover {
    background-color: #ff6f61;
    border-bottom: solid 1px #ff6f61;
}

.tab-content {
    display: none;
}

.left-content {
    padding-left: 4rem;
    padding-top: 4rem;
    font-size: 3.75rem;
}

.right-content {
    padding-left: 4rem;
    padding-top: 4rem;
}

.img-custwidth {
    padding-top: 4rem;
    width: 512px;
}

</style>
<script>
// Author: Nicholas Fazzolari
// Basic tab switching code in pure ES6

// TODO:   Add default tab open feature with an on off switch
//         Make the event listener assignments general

function openTab(tabName) {
    let i;
    let tabContent;
    
    tabContent = document.getElementsByClassName("tab-content");
    
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }
    
    document.getElementById(tabName).style.display = "flex";
}


// This needs to DRY'ed up so it can be used with a CMS
let designLinkEl = document.getElementById("DesignLink");
let progLinkEl = document.getElementById("ProgLink");
let musicLinkEl = document.getElementById("SupportLink");

designLinkEl.addEventListener("click", function(){openTab("Design")}, false);
progLinkEl.addEventListener("click", function(){openTab("Programming")}, false);
musicLinkEl.addEventListener("click", function(){openTab("Support")}, false);
</script>
<div class="container-fluid">
    <div class="row">
        <div id="DesignLink" class="col-sm-4 heading-design">
            <h5 class="mb-0">01.</h5>
            <h1 class="mb-0"><strong>Design</strong></h1>
        </div>
        <div id="ProgLink" class="col-sm-4 heading-prog">
            <h5 class="mb-0">02.</h5>
            <h1 class="mb-0"><strong>Programming</strong></h1>
        </div>
        <div id="SupportLink" class="col-sm-4 heading-music">
            <h5 class="mb-0">03.</h5>
            <h1 class="mb-0"><strong>Support</strong></h1>
        </div>
    </div>
</div>

<div id="Design" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Design is Human.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/head_vector_styled.svg" alt="Line art of human head." class="imf-fluid img-custwidth">
            </div>
        <div class="col-sm-6 right-content">
            <h3><strong>Design is human. Design is making ideas real.</strong></h3>
            <p>Human centered design is at the core of product development. Empathetic communication with the client is a key part of the development process from the beginning until the product launch and support phases.</p>
            <p>Design thinking is iterative, and cyclic. Combining raw creative out with theoretical structure is the best way to deliver high quality products to clients. Listening and guiding are core communication principles between the developer and client.</p>
            <p>When developing new web sites and applications our job as a development studio is to meet client needs through empathetic research and interaction. Listening to the client is key when solving in an unfamiliar domain of expertise. Guiding must be approached as a craft of finess to bridge the gulf between possible and not possible.</p>
        </div>
    </div>
        <div class="row">
        </div>
    </div>
</div>
<div id="Programming" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Programming Delivers Solutions.</strong><br>
                <img src="http://nickfazz.me/codepen_assets/vectors/code_art.svg" alt="Binary digits and line art." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Programming Delivers Solutions. Engineering and Development Thrive on Strong Design.</strong></h3>
            <p>Using current software development technologies and proven best practices in software engineering, coupled with a formal background in computer science drives and delivers high quality web development solutions.</p>
            <p>Adaptive development methods ensure cross-device and cross-platform consistent software solutions.</p>
            <p>Understanding client levels of technical knowledge is important. We understand that some clients require to be more involved in the development process than others. Transparency is a key factor which addresses security and technical issues across domains. When working with clients from the science and engineering field open communication and input regarding technology is welcome. We are always open to learning and compormise.</p>
            </div>
        </div>
    </div>
</div>
<div id="Support" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Support is Trust.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/support_vector.svg" alt="Line art of key." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Support is Trust. Product Life Cycle Beyond Development.</strong></h3>
            <p>Client support is rooted in the mindset of client empathy and need. Delivering emerging technologies to strengthen the product and both user and client experience are integral to our support role.</p>
            <p>Security features are updated to protect against current threats to protect the business, technology, and users. Best practices are communicated and implemented with the client and user in mind.</p>
            <p>Support is an ongoing role which extends the development period of the software. Scale, security and usability are key support concepts which we deliver in our product support role.</p>
            </div>
        </div>
    </div>
</div>
[/html]

+2