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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Предложения
СкрытьПоказать
На форуме идут технические работы. Кое-что кое-где может отображаться криво. Мы скоро всё поправим. :)

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

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

Подборка: шаблоны html

Страница: 1
Ответить

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

1

Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами.
Для поиска шаблонов на нужную тему воспользуйтесь навигацией:

Кнопки

Блоки/цитаты

Списки

Анкеты

Таблицы

Рамки

Ссылка-кнопка от ФД;

Алфавитный список "BOTTIN AVATARS"

ШАБЛОН "SET"

Таблица в объявление "IIIR";

Двойная смещённая рамка для фото;

+2

2

Двойная смещённая рамка для фотографии

https://i.imgur.com/JuPabpN.png

КОД

CSS:

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

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

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:

Код:
<style>
тут коды
<style>
Код:
     <!-- Стиль фоторамок двойная смещённая рамка -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

В постах изображения оборачиваем тэгами:

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

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

Или используем хтмл-код:

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

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

© Источник

+2

3

Таблица в объявление "IIIR"

[html]<style>
/* ТАБЛИЦА */
.IIIR {
margin:auto; width:800px; padding:15px 0;
text-align:center; line-height:16px; font-family:Arial;
background:#212121; /* ЦВЕТА */
}
.IIIR a {
text-decoration:none !important;
}
.boxIIIR {
display:inline-block; vertical-align:middle; margin-right:15px;
}
/* НОВОСТНОЙ БЛОК */
.ctxtIIIR {
margin-bottom:5px;
width:365px; height:91px; padding:5px; overflow:hidden;
font-size:10px; text-align:justify; line-height:15.5px;
background:grey; color:white; /* ЦВЕТА */
}
.ctxtIIIR:hover {
overflow-y:auto;
}
.imgIIIR {
position:absolute;
width:165px; height:55px;
}
/* ИКОНКИ */
.pfIIIR {
display:inline-block; vertical-align:bottom;
width:165px; padding:5px 0; overflow:hidden; text-align:left;
background:#E9E9E9; /* ЦВЕТА */
}
.pfIIIR img {
margin-left:5px;
width:35px; height:35px;
}
/* БЛОК АНОНСА */
.eventIIIR {
display:inline-block; vertical-align:bottom; margin-left:5px;
width:205px; height:95px; padding:5px 0; overflow:hidden;
font-size:9px; text-align:justify;
background:lightgrey; color:black; /* ЦВЕТА */
}
.eventIIIR p {
margin:0;
height:75px; padding:0 5px; overflow:hidden;
line-height:15px; font-family:Arial;
}
.eventIIIR p:hover {
overflow-y:auto;
}
/* ССЫЛКА В БЛОКЕ АНОНСА */
.eventIIIR a {
display:block; margin:5px auto 0;
width:195px; height:15px; overflow:hidden;
text-align:center; font-size:9px; text-transform:uppercase; line-height:15px;
background:black; color:white; /* ЦВЕТА */
}
/* БЛОК ССЫЛОК */
.lksIIIR {
width:190px; padding:7px 5px 2px;
text-transform:uppercase; text-align:center; line-height:18px; font-size:12px;
background:grey; /* ЦВЕТА */
}
/* ССЫЛКИ */
.lksIIIR a {
display:inline-block; vertical-align:top; margin-bottom:5px;
width:90px; height:18px; overflow:hidden; font-size:9px;
background:black; color:white !important; /* ЦВЕТА */
}
.lksIIIR a:nth-of-type(odd) {
margin-right:6px;
}
/* БЛОК ИКОНОК */
.partIIIR {
width:186px; height:85px; padding:10px 7px 15px; overflow:hidden; text-align:center;
background:#E9E9E9; /* ЦВЕТА */
}
.partIIIR img {
margin:5px;
width:35px; height:35px;
filter:grayscale(1); -webkit-filter:grayscale(1);
opacity:0.9; transition:all 0.65s ease-in-out; -webkit-transition:all 0.65s ease-in-out;
}
.partIIIR img:hover {
filter:grayscale(0); -webkit-filter:grayscale(0); opacity:1;
}
/* АМС */
#staffIIIR {
display:inline-block; vertical-align:middle; margin-right:-35px;
width:200px; height:200px; border-radius:100%; overflow:hidden;
}
.staffIIIR {
position:relative;
}
/* БЛОК АМС */
.tleSIIIR {
position:absolute; z-index:4; margin-left:50px; margin-top:50px;
width:100px; height:60px; padding-top:40px; border-radius:100px;
text-align:center; text-transform:uppercase; font-size:12px; font-weight:bold;
background:black; color:white; /* ЦВЕТА */
}
.SIIIR {
width:100px; height:100px;
font-size:11px; text-align:center; line-height:17px;
}
/* КОНТЕНТ БЛОКА АМС*/
.SIIIR div {
width:90px; height:75px; padding:25px 5px 0; overflow:hidden; border-radius:100px;
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease-in; -webkit-transition:all 0.45s ease-in;
background:#E9E9E9; color:black; /* ЦВЕТА */
}
.SIIIR:hover div {
position:absolute; z-index:5;
opacity:1;
}
/* АДМИНЫ */
.onIIIR {
display:block; padding-top:2px;
font-size:10px; text-transform:uppercase; line-height:normal;
background:lightgreen; color:black; /* ЦВЕТА */
}
/* МОДЕРЫ */
.offIIIR {
display:block; padding-top:2px;
font-size:10px; text-transform:uppercase; line-height:normal;
background:crimson; color:white; /* ЦВЕТА */
}
/* ССЫЛКИ НА ПРОФИЛИ АМС */
.SIIIR a {color:black; /* ЦВЕТА */}

/* ЛЕВЫЙ ВЕРХНИЙ УГОЛ АМС */
.ISIIIR {
position:absolute; border-top-left-radius:100px;
}
.ISIIIR:hover div {
margin-left:50px; margin-top:50px;
}
/* ВЕРХНИЙ ПРАВЫЙ УГОЛ АМС */
.IISIIIR {
position:absolute; margin-left:100px;
border-top-right-radius:100px;
}
.IISIIIR:hover div {
margin-left:-50px; margin-top:50px;
}
/* НИЖНИЙ ЛЕВЫЙ УГОЛ АМС */
.IIISIIIR {
position:absolute; margin-top:100px;
border-bottom-left-radius:100px;
}
.IIISIIIR:hover div {
margin-left:50px; margin-top:-50px;
}
/* НИЖНИЙ ПРАВЫЙ УГОЛ АМС */
.IVSIIIR {
position:absolute; margin-top:100px; margin-left:100px;
border-bottom-right-radius:100px;
}
.IVSIIIR:hover div {
margin-left:-50px; margin-top:-50px;
}</style>
<div class="IIIR"><!-- НОВОСТИ ИЛИ ОПИСАНИЕ / ИКОНКИ / АНОНС --><div class="boxIIIR"><!-- НОВОСТИ ИЛИ ОПИСАНИЕ ФОРУМА --><div class="ctxtIIIR">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet quam vel lectus posuere viverra ac nec elit. Ut elementum ultricies tortor, et varius est facilisis in. Donec nulla tellus, sollicitudin id tellus sed, vestibulum tempus neque. Mauris aliquam commodo velit convallis imperdiet. Quisque laoreet, sem ut tincidunt tempor, est mauris ornare arcu, in tincidunt mauris orci eu purus. Suspendisse vel dolor ante. In sit amet bibendum erat. Quisque non aliquet tellus, sit amet accumsan neque. Donec rhoncus suscipit vestibulum. Mauris et rutrum urna, nec fermentum ligula. Nulla ultricies massa sit amet nulla posuere, quis gravida risus interdum. Cras pulvinar consequat tellus.</div><!-- ИЗОБРАЖЕНИЕ 165*55 --><img class="imgIIIR" src="https://www.aht.li/3208058/16555GREY.png" />
<!-- 4 ИКОНКИ РАЗМЕРОМ 35*35 --><div class="pfIIIR"><!-- I --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- II --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- III --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a><!-- IV --><a href="..." target="_blank"><img src="https://www.aht.li/3208070/3535BW.png" /></a></div><!-- БЛОК АНОНСА --><div class="eventIIIR"><!-- ТЕКСТ АНОНСА --><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet quam vel lectus posuere viverra ac nec elit. Ut elementum ultricies tortor, et varius est facilisis in. Donec nulla tellus, sollicitudin id tellus sed, vestibulum tempus neque.</p><!-- LIEN --><a href="..." target="_blank">доп. информация</a></div></div>
<!-- ССЫЛКИ & ИКОНКИ --><div class="boxIIIR"><!-- 8 ССЫЛОК --><div class="lksIIIR"><!--  I --><a href="..." target="_blank">Ссылка</a><!-- II --><a href="..." target="_blank">Ссылка</a><!-- III --><a href="..." target="_blank">Ссылка</a><!-- IV --><a href="..." target="_blank">Ссылка</a><!-- V --><a href="..." target="_blank">Ссылка</a><!-- VI --><a href="..." target="_blank">Ссылка</a><!-- VII --><a href="..." target="_blank">Ссылка</a><!-- VIII --><a href="..." target="_blank">Ссылка</a></div>
<!-- 8 ИКОНОК РАЗМЕРОМ 35*35 - СМЕНА ЦВЕТА ПРИ НАВЕДЕНИИ --><div class="partIIIR"><!-- I --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- II --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- III --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- IV --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><br/><!-- V --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VI --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VII --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a><!-- VIII --><a href="..." target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a></div></div><!-- АМС - ИЗОБРАЖЕНИЯ 100*100 --><div id="staffIIIR"><div class="staffIIIR"><!-- БЛОК --><div class="tleSIIIR">АМС</div><!-- I - ИЗОБРАЖЕНИЕ --><div class="SIIIR ISIIIR" style="background:url(https://www.aht.li/3208040/100100L.png);"><!-- КОНТЕНТ I --><div>Ник<!-- ОБЯЗАННОСТИ И СТАТУС I --><span class="onIIIR">Админ</span><!-- ССЫЛКА НА ПРОФИЛЬ I --><a href="..." target="_blank">Профиль</a></div></div><!-- II - ИЗОБРАЖЕНИЕ --><div class="SIIIR IISIIIR" style="background:url(https://www.aht.li/3208041/100100LBW.png)"><!-- КОНТЕНТ II --><div>Ник<!-- ОБЯЗАННОСТИ II --><span class="offIIIR">Модер</span><!-- ССЫЛКА НА ПРОФИЛЬ II --><a href="..." target="_blank">Профиль</a></div></div><!-- III - ИЗОБРАЖЕНИЕ --><div class="SIIIR IIISIIIR" style="background:url(https://www.aht.li/3208041/100100LBW.png)"><!-- КОНТЕНТ III --><div>Ник<!-- ОБЯЗАННОСТИ III --><span class="onIIIR">Админ</span><!-- ССЫЛКА НА ПРОФИЛЬ III --><a href="..." target="_blank">Профиль</a></div></div><!-- IV - ИЗОБРАЖЕНИЕ --><div class="SIIIR IVSIIIR" style="background:url(https://www.aht.li/3208040/100100L.png)"><!-- КОНТЕНТ IV --><div>Ник<!-- ОБЯЗАННОСТИ IV --><span class="offIIIR">Модер</span><!-- ССЫЛКА НА ПРОФИЛЬ IV --><a href="..." target="_blank">Профиль</a></div></div></div></div></div>
[/html]

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

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

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

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

© Код взят с CCCRUSH, переведён специально для FD

+1

4

Алфавитный список "BOTTIN AVATARS"

Просьба не убирать копирайт из кода!

[html]<style>
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
.ABC {
margin:auto; width:460px;
text-align:center; font-family:Arial; line-height:16px;
}
.ABC a {
text-decoration:none !important;
}
.cdtABIC {
display:none;
}
.listABC {
margin:30px auto 0;
width:450px;
}
.LTRS {
display:inline-block; vertical-align:top; margin:0 5px 10px;
width:15px; height:15px; padding:5px; border-radius:100%;
text-align:center; font-size:11px; line-height:15px;
background:grey; color:white;
}
.IIND {
background:#191919; color:white;
}
.LTI div {
border:5px dashed;
border-color:grey;
}
.LTI a {
position:absolute; margin-top:-15px; margin-left:-203px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:grey; color:white;
}
.LTI p {
padding:0px 10px;
text-align:left; font-size:10px; font-family:Arial;
}
.LTII div {
border:5px solid;
border-color:#191919;
}
.LTII a {
position:absolute; margin-top:-15px; margin-left:185px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:#191919; color:white;
}
.LTII p {
padding:0px 10px;
text-align:right; font-size:10px; font-family:Arial;
}
</style>
<div class="ABC"><!-- CREDIT : CODAGE PAR SKAEMP, CCCRUSH / ПЕРЕВОД: FORUMD.RU --><a class="cdtABIC" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- БУКВЫ В ОГЛАВЛЕНИИ --><a class="LTRS" href="#A">A</a><a class="LTRS IIND" href="#B">Б</a><a class="LTRS" href="#V">В</a><a class="LTRS IIND" href="#G">Г</a><a class="LTRS" href="#D">Д</a><a class="LTRS IIND" href="#EH">E</a><a class="LTRS" href="#YOR">Ё</a><a class="LTRS IIND" href="#ZH">Ж</a><a class="LTRS" href="#Z">З</a><a class="LTRS IIND" href="#I">И</a><a class="LTRS" href="#J">Й</a><a class="LTRS IIND" href="#K">K</a><a class="LTRS" href="#L">Л</a><br/><a class="LTRS IIND" href="#Μ">Μ</a><a class="LTRS" href="#N">Н</a><a class="LTRS IIND" href="#O">O</a><a class="LTRS" href="#P">П</a><a class="LTRS IIND" href="#R">Р</a><a class="LTRS" href="#S">С</a><a class="LTRS IIND" href="#T">T</a><a class="LTRS" href="#U">У</a><a class="LTRS IIND" href="#F">Ф</a><a class="LTRS" href="#H">Х</a><a class="LTRS IIND" href="#TS">Ц</a><a class="LTRS" href="#CH">Ч</a><a class="LTRS IIND" href="#SH">Ш</a><a class="LTRS" href="#SHCH">Щ</a><a class="LTRS IIND" href="#Y">Ы</a><a class="LTRS" href="#E">Э</a><a class="LTRS IIND" href="#YU">Ю</a><a class="LTRS" href="#YA">Я</a>

<!-- СПИСОК --><div class="listABC"><!-- A --><div class="LTI"><div><a id="A">A</a></div><!-- Список A --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Б --><div class="LTII"><div><a id="B">Б</a></div><!-- СПИСОК Б --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- В --><div class="LTI"><div><a id="V">В</a></div><!-- СПИСОК В --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Г --><div class="LTII"><div><a id="G">Г</a></div><!-- СПИСОК Г --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Д --><div class="LTI"><div><a id="D">Д</a></div><!-- СПИСОК Д --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Е --><div class="LTII"><div><a id="EH">Е</a></div><!-- СПИСОК Е --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ё --><div class="LTI"><div><a id="YOR">Ё</a></div><!-- СПИСОК Ё --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ж --><div class="LTII"><div><a id="ZH">Ж</a></div><!-- СПИСОК Ж --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- З --><div class="LTI"><div><a id="Z">З</a></div><!-- СПИСОК З --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- И --><div class="LTII"><div><a id="I">И</a></div><!-- СПИСОК И --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- J --><div class="LTI"><div><a id="J">Й</a></div><!-- СПИСОК К --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- K --><div class="LTII"><div><a id="K">K</a></div><!-- СПИСОК К --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Л --><div class="LTI"><div><a id="L">Л</a></div><!-- СПИСОК Л --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Μ --><div class="LTII"><div><a id="Μ">Μ</a></div><!-- СПИСОК М --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Н --><div class="LTI"><div><a id="N">Н</a></div><!-- СПИСОК Н --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- O --><div class="LTII"><div><a id="O">O</a></div><!-- СПИСОК О --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- П --><div class="LTI"><div><a id="P">П</a></div><!-- СПИСОК П --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Р --><div class="LTII"><div><a id="R">Р</a></div><!-- СПИСОК Р --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- С --><div class="LTI"><div><a id="S">С</a></div><!-- СПИСОК С --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- T --><div class="LTII"><div><a id="T">T</a></div><!-- СПИСОК T --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- У --><div class="LTI"><div><a id="U">У</a></div><!-- СПИСОК У --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ф --><div class="LTII"><div><a id="F">Ф</a></div><!-- СПИСОК Ф --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Х --><div class="LTI"><div><a id="H">Х</a></div><!-- СПИСОК Х --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ц --><div class="LTII"><div><a id="TS">Ц</a></div><!-- СПИСОК Ц --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ч --><div class="LTI"><div><a id="CH">Ч</a></div><!-- СПИСОК Ч --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ш --><div class="LTII"><div><a id="SH">Ш</a></div><!-- СПИСОК Ш --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Щ --><div class="LTI"><div><a id="SHCH">Щ</a></div><!-- СПИСОК Щ --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ы --><div class="LTII"><div><a id="Y">Ы</a></div><!-- СПИСОК Ы --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Э --><div class="LTI"><div><a id="E">Э</a></div><!-- СПИСОК Э --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Ю --><div class="LTII"><div><a id="YU">Ю</a></div><!-- СПИСОК Ю --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Я --><div class="LTI"><div><a id="YA">Я</a></div><!-- СПИСОК Я --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

</div></div>[/html]

[html]<style>
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
.ABC {
margin:auto; width:460px;
text-align:center; font-family:Arial; line-height:16px;
}
.ABC a {
text-decoration:none !important;
}
.cdtABIC {
display:none;
}
.listABC {
margin:30px auto 0;
width:450px;
}
.LTRS {
display:inline-block; vertical-align:top; margin:0 5px 10px;
width:15px; height:15px; padding:5px; border-radius:100%;
text-align:center; font-size:11px; line-height:15px;
background:grey; color:white;
}
.IIND {
background:#191919; color:white;
}
.LTI div {
border:5px dashed;
border-color:grey;
}
.LTI a {
position:absolute; margin-top:-15px; margin-left:-203px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:grey; color:white;
}
.LTI p {
padding:0px 10px;
text-align:left; font-size:10px; font-family:Arial;
}
.LTII div {
border:5px solid;
border-color:#191919;
}
.LTII a {
position:absolute; margin-top:-15px; margin-left:185px;
width:15px; height:15px; padding:5px; border-radius:100%; font-size:11px;
background:#191919; color:white;
}
.LTII p {
padding:0px 10px;
text-align:right; font-size:10px; font-family:Arial;
}
</style>
<div class="ABC"><!-- CREDIT : CODAGE PAR SKAEMP, CCCRUSH / ПЕРЕВОД: FORUMD.RU --><a class="cdtABIC" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- БУКВЫ В ОГЛАВЛЕНИИ --><a class="LTRS" href="#A">A</a><a class="LTRS IIND" href="#B">B</a><a class="LTRS" href="#C">C</a><a class="LTRS IIND" href="#D">D</a><a class="LTRS" href="#E">E</a><a class="LTRS IIND" href="#F">F</a><a class="LTRS" href="#G">G</a><a class="LTRS IIND" href="#H">H</a><a class="LTRS" href="#I">I</a><a class="LTRS IIND" href="#J">J</a><a class="LTRS" href="#K">K</a><a class="LTRS IIND" href="#L">L</a><a class="LTRS" href="#M">M</a><br/><a class="LTRS IIND" href="#N">N</a><a class="LTRS" href="#O">O</a><a class="LTRS IIND" href="#P">P</a><a class="LTRS" href="#Q">Q</a><a class="LTRS IIND" href="#R">R</a><a class="LTRS" href="#S">S</a><a class="LTRS IIND" href="#T">T</a><a class="LTRS" href="#U">U</a><a class="LTRS IIND" href="#V">V</a><a class="LTRS" href="#W">W</a><a class="LTRS IIND" href="#X">X</a><a class="LTRS" href="#Y">Y</a><a class="LTRS IIND" href="#Z">Z</a>

<!-- СПИСОК --><div class="listABC"><!-- A --><div class="LTI"><div><a id="A">A</a></div><!-- Список A --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- B --><div class="LTII"><div><a id="B">B</a></div><!-- СПИСОК B --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- C --><div class="LTI"><div><a id="C">C</a></div><!-- СПИСОК C --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- D --><div class="LTII"><div><a id="D">D</a></div><!-- СПИСОК D --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- E --><div class="LTI"><div><a id="E">E</a></div><!-- СПИСОК E --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- F --><div class="LTII"><div><a id="F">F</a></div><!-- СПИСОК F --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- G --><div class="LTI"><div><a id="G">G</a></div><!-- СПИСОК G --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- H --><div class="LTII"><div><a id="H">H</a></div><!-- СПИСОК H --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- I --><div class="LTI"><div><a id="I">I</a></div><!-- СПИСОК I --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- J --><div class="LTII"><div><a id="J">J</a></div><!-- СПИСОК J --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- K --><div class="LTI"><div><a id="K">K</a></div><!-- СПИСОК K --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- L --><div class="LTII"><div><a id="L">L</a></div><!-- СПИСОК L --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- M --><div class="LTI"><div><a id="M">M</a></div><!-- СПИСОК M --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- N --><div class="LTII"><div><a id="N">N</a></div><!-- СПИСОК N --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- O --><div class="LTI"><div><a id="O">O</a></div><!-- СПИСОК O --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- P --><div class="LTII"><div><a id="P">P</a></div><!-- СПИСОК P --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Q --><div class="LTI"><div><a id="Q">Q</a></div><!-- СПИСОК Q --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- R --><div class="LTII"><div><a id="R">R</a></div><!-- СПИСОК R --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- S --><div class="LTI"><div><a id="S">S</a></div><!-- СПИСОК S --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- T --><div class="LTII"><div><a id="T">T</a></div><!-- СПИСОК T --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- U --><div class="LTI"><div><a id="U">U</a></div><!-- СПИСОК U --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- V --><div class="LTII"><div><a id="V">V</a></div><!-- СПИСОК V --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- W --><div class="LTI"><div><a id="W">W</a></div><!-- СПИСОК W --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- X --><div class="LTII"><div><a id="X">X</a></div><!-- СПИСОК X --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Y --><div class="LTI"><div><a id="Y">Y</a></div><!-- СПИСОК Y --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div>

<!-- Z --><div class="LTII"><div><a id="Z">Z</a></div><!-- СПИСОК Z --><p><b>Имя прототипа</b> [Доп. инфа] - Персонаж</p></div></div></div>[/html]

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

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

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

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

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

0

5

Ссылка-кнопка

Css-код ссылки-кнопки, которая используется на ФД. Как это выглядит:

Просьба не убирать копирайт, иначе мы просто перестанем делиться материалом и кодами, если вы будете присваивать кодовые разработки от ФД.

CSS код
Скрытый текст:

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

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:

Код:
<style>
тут коды
<style>
Код:
     <!-- Ссылка-кнопка -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

В постах можно применять через бб-коды:

Код:
[block=superlink][url=https://forumd.ru/]Пример ссылки-кнопки[/url][/block]

Или через хтмл:

Код:
<div class="superlink"><a href="https://forumd.ru/" class="superlink a">Пример ссылки-кнопки</a></div>

Таким же образом можно создать сразу несколько кнопок-ссылок, различающихся по форме, цвету, размеру и так далее.

0

6

HTML-ШАБЛОН АНКЕТЫ "SET"

[html]<style>*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}

.boxSET {
display:inline-block; vertical-align:top; margin-left:10px;
}

.tIISET {
padding:5px 10px;
text-align:right; font-weight:bold; text-transform:uppercase; font-size:14px; letter-spacing:3px;
}

.SET:hover .cdtSET {
opacity:1;
}

/* АНКЕТА */
.SET {
box-shadow:0px 0px 5px rgba(0,0,0,0.2); background:grey;
border-color:#191919 !important; /* НИЖНЯЯ ПОЛОСА */
}

.SET {
margin:auto; width:545px; padding-top:20px; border-bottom:20px solid;
text-align:center; line-height:normal; font-family:Arial;
}

/* ИМЯ И ФАМИЛИЯ */
.npSET div {
background:#191919; color:white; text-shadow:0px 1px 2px rgba(255,255,255,0.5);
max-width:500px; padding:10px 0 10px 20px;
font-family:Arial; font-size:18px; font-style:italic; text-transform:uppercase; text-align:left; letter-spacing:3px;
}

.npSET {
margin:0 auto -10px; position:relative; z-index:5;
width:545px; text-align:left;
}

/* ИНФОРМАЦИЯ */
.abtSET {
display:inline-block; vertical-align:top;
width:200px; height:320px; overflow:hidden;
}
.abtSET div {
position:absolute;
width:180px; height:300px; padding:10px; overflow-y:auto;
text-align:justify; font-size:11px; font-family:Arial;
opacity:0; transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in;
background:rgba(255,255,255,0.9); color:black;
}
.abtSET:hover div {
opacity:1;
}
.abtSET img {
width:200px; min-height:320px;
}

/* НАЗВАНИЕ ПУНТКТОВ "ВНЕШНОСТЬ" и "ХАРАКТЕР" */
.tSET {
margin:auto;
width:75%; padding:5px 0; border-radius:0px 0px 15px 15px;
letter-spacing:3px; text-align:center; text-transform:uppercase; font-size:12px;
background:#191919; color:white;
}

/* ХАРАКТЕР */
.caraSET {
margin-bottom:10px;
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.caraSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.caraSET:hover p {
overflow-y:auto;
}
/* ВНЕШНОСТЬ */
.phyzSET {
width:300px; height:155px; padding:0 5px; border-left:5px solid;
border-color:#191919 !important; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
background:rgba(250,250,250,0.3); color:black;
}
.phyzSET p {
margin-top:5px;
height:115px; padding:0 5px 5px; overflow:hidden;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}
.phyzSET:hover p {
overflow-y:auto;
}
/* НАЗВАНИЕ ПУНКТОВ "БИО" И "ОБ ИГРОКЕ" */
.tIISET {
background:#191919; color:white;
}
/* БИО */
.storySET {
margin:15px auto 0; width:525px;
background:rgba(0,0,0,0.3); color:white;
}
.storySET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:15px;
}

/* ОБ ИГРОКЕ */
.USET {background:rgba(0,0,0,0.3); color:white;
margin:10px auto; width:525px;
}
.USET p {
margin:0; padding:10px;
text-align:justify; font-size:11px; font-family:Arial; line-height:16px;
}
}
/* КОПИРАЙТ. ПЕРЕВОД ОТ forumd.ru */
.cdtSET {
position:absolute; margin-top:3px; width:545px;
font-size:10px; font-family:Arial; text-align:center;
opacity:0 !important; transition:opacity 0.55s ease !important; -webkit-transition:opacity 0.55s ease !important;
}
.cdtSET a {
display:block; margin:auto;
text-decoration:none !important;
color:#CCC !important;
position: absolute;
    margin-top: 3px;
    width: 545px;
    font-size: 10px;
    font-family: Arial;
    text-align: center;
}
.cdtSET a::before {content:'Ʃkaemp はは ™'; }

.SET:hover .cdtSET {opacity:1;}</style>
<!-- ИМЯ И ФАМИЛИЯ --><div class="npSET"><div>Имя Фамилия</div></div><div class="SET"><div class="abtSET">

<!-- КРАТКАЯ ИНФОРМАЦИЯ О ПЕРСОНАЖЕ --><div><center><b>Имя прототипа для персонажа</b></center><br/>

<b>Возраст</b> : ...<br/>

<b>Национальность</b> : ...<br/>

<b>Профессия / род занятий</b> : ...<br/>

<b>Семейный статус</b> : <i>Женат, холост, состоит в отношениях, разведен, вдовец</i><br/>

<b>Коротко о семье:</b> : ...<br/>
<b>Коротко о финансах</b> : ...</div>

<!-- КАРТИНКА 200*320 - АВТОМАТИЧЕСКО СЖАТИЕ --><img src="https://www.aht.li/3138179/200320BW.png" /></div>

<!-- ХАРАКТЕР И ВНЕШНОСТЬ --><div class="boxSET">

<!-- ХАРАКТЕР --><div class="caraSET"><div class="tSET">Характер</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>

<!-- ВНЕШНОСТЬ --><div class="phyzSET"><div class="tSET">Внешность</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div></div>

<!-- БИОГРАФИЯ --><div class="storySET">
<div class="tIISET">БИО</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum placerat suscipit. Aenean placerat nunc egestas interdum luctus. Proin tincidunt tempus dui id lacinia. Nullam quis interdum ligula. Pellentesque hendrerit feugiat gravida. Duis faucibus elementum elementum. Morbi at nisi vitae urna vulputate eleifend. Praesent id ante ac mi sollicitudin fringilla. Mauris consequat quis libero id lobortis. Proin a libero non lorem porttitor tempus.</p></div>

<!-- ОБ ИГРОКЕ --><div class="USET">
<div class="tIISET">О вас</div>
<p><b>Ник</b> : ...<br/><b>Имя</b> : ...<br/><b>Возраст</b> : ...<br/><b>Комментарий</b> : ...</p></div>

<!-- КОПИРАЙТ (ПРОСЬБА НЕ УБИРАТЬ) --><div class="cdtSET"><a href="https://crushcrushcrush.actifforum.com/" target="_blank"></a></div></div>[/html]

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

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

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

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

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

+1

Ответить
Страница: 1

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

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


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."