ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Скрипты и стили для МуBB и не только » Универсальные Javascript, Jquery и CSS решения » Подборка html-шаблонов (html, css)
Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами. Шаблоны, представленные тут абсолютно универсальны для любой платформы.
Для поиска шаблонов на нужную тему воспользуйтесь навигацией:
Кнопки | Блоки/цитаты | Списки |
Анкеты | Таблицы | Рамки |
Двойная смещённая рамка для фотографии
CSS:
Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:
Код:<style> тут коды <style>Код:<!-- Стиль фоторамок двойная смещённая рамка --> <link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" /> <!-- Конец -->
В постах изображения оборачиваем тэгами:
Или используем хтмл-код:
© Источник
If you don't know what is it about, it's about money (польская пословица)
Таблица в объявление "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
If you don't know what is it about, it's about money (польская пословица)
Алфавитный список "BOTTIN AVATARS"
Просьба не убирать копирайт из кода!
[html]<style> <!-- СПИСОК --><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> <!-- СПИСОК --><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
Внимание! Клик по буквам через html будет работать только если отключить безопасный HTML в постах (Администрирование - Скрипты - HTML в постах - Нет - Сохранить) и установить "небезопасный" html в постах: HTML в постах с допуском по группам
If you don't know what is it about, it's about money (польская пословица)
Ссылка-кнопка
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>
Таким же образом можно создать сразу несколько кнопок-ссылок, различающихся по форме, цвету, размеру и так далее.
If you don't know what is it about, it's about money (польская пословица)
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]
© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD
If you don't know what is it about, it's about money (польская пословица)
Оформление поста 'AZA'
Красивое оформление поста с цветочками. К сожалению, шрифт в заголовке поддерживает только латиницу, но можно заменить его на тот что поддерживает русский.
[html]
<style>
/* ШРИФТ */
@font-face {
font-family: 'Finger Paint';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/s/fingerpaint/v10/0QInMXVJ-o-oRn_7dron8YW-9JzT.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* НАЗВАНИЕ */
.AZA {
margin:auto; width:560px; height:568px;
background:url(//www.aht.li/2910691/RPAZA.png); line-height:16px;
}
/* ЗАГОЛОВОК */
.tleAZA {
position:absolute; margin-top:105px; margin-left:75px;
width:455px; font-family:Finger Paint; font-size:24px; color:white;
transform:rotate(-7deg); -webkit-transform:rotate(-7deg);
}
/* СООБЩЕНИЕ */
.msgAZA {
position:absolute; margin-top:185px; margin-left:120px;
width:380px; height:185px; padding:5px; overflow:hidden;
font-size:12px; text-align:justify; font-family:Arial; color:black;
}
/* СООБЩЕНИЕ ПРИ НАВЕДЕНИИ */
.msgAZA:hover {
overflow:auto;
}
/* ПОДПИСЬ */
.ftAZA {
position:absolute; margin-top:440px; margin-left:260px;
width:250px; font-family:Finger paint; font-size:14px; color:white;
transform:rotate(-18deg); -webkit-transform:rotate(-18deg);
}
/* КОПИРАЙТ */
.cdtAZA {
position:absolute; margin-left:48px; margin-top:250px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.55s; -webkit-transition:-webkit-transform ease-in-out 0.55s;
}
/* АНИМАЦИЯ ПРИ НАВЕДЕНИИ НА КОПИРАЙТ И ЗАГОЛОВОК */
.AZA:hover .cdtAZA {
transform:scale(1); -webkit-transform:scale(1);
}
/* КАРТИНКИ И ОФОРМЛЕНИЕ */
.AZAII {
margin:auto; width:560px; line-height:16px; text-align:left;
}
.topAZA {
position:relative; z-index:2; margin-bottom:-100px; margin-left:-10px;
width:570px; height:206px; background:url(https://forumupload.ru/uploads/0007/e3/ … 236189.png); /* Картинка в заголовок */
}
.msgIIAZA {
margin:auto; width:450px; min-height:100px; padding-top:70px; padding-bottom:75px;
background:url(https://forumupload.ru/uploads/0007/e3/ … 330498.png); /* Фон сообщения */
}
.msgIIAZA p{
position:relative; z-index:3;
margin-left:70px; width:360px;
font-size:12px; text-align:justify; font-family:Arial; color:black;
}
.ftIIAZA {
position:absolute; z-index:3; margin-top:122px; margin-left:260px;
width:250px; font-family:Finger paint; font-size:14px; color:white;
transform:rotate(-18deg); -webkit-transform:rotate(-18deg);
}
.cdtAZAII {
position:absolute; z-index:5; margin-left:43px; margin-top:150px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.55s; -webkit-transition:-webkit-transform ease-in-out 0.55s;
}
.AZAII:hover .cdtAZAII {
transform:scale(1); -webkit-transform:scale(1);
}
.btmAZA {
position:relative; z-index:2; margin-top:-155px; margin-left:-5px;
width:555px; height:250px; background:url(https://forumupload.ru/uploads/0007/e3/ … 495731.png); /* Картинка в подпись */
}</style>[/html]
TITLE
Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции требуют определения и уточнения позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет выполнять важные задания по разработке дальнейших направлений развития.
Signature
Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style>:
Код:<style> тут коды <style>Или отдельным файлом:
Код:<!-- Оформление поста AZA --> <link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" /> <!-- Конец -->
© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD
If you don't know what is it about, it's about money (польская пословица)
Простая таблица "9 блоков по 3 в ряд"
Простенькая таблица для 9 равных по размеру блоков, сгруппированных по 3 в ряд. Ширина указана в процентах, а значит таблица адаптивная, однако, вы можете указать и фиксированную ширину в пикселях.
Настройки из кода:
table width="100%" - ширина таблицы;
border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;
tbody align="center" - контент таблицы будет расположен по центру.
Эскиз:
# увеличивается по клику
If you don't know what is it about, it's about money (польская пословица)
Простая таблица "2 колонки и строки"
Простенькая таблица для 7 блоков с 2 колонками, между которыми расположены строчки.
# увеличивается по клику
Настройки из кода:
table width="100%" - ширина таблицы;
border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;
tbody align="center" - контент таблицы будет расположен по центру;
td rowspan="3" - объединение строк;
td colspan="3" - объединение столбцов;
If you don't know what is it about, it's about money (польская пословица)
Простая таблица "Колонка по центру"
Простенькая таблица для 6 блоков с 2 столбцами строк, между которыми, по центру таблицы, расположена одна колонка.
# увеличивается по клику
Настройки из кода:
table width="100%" - ширина таблицы;
border="1" - толщина рамки, чтобы границ не было видно, надо поставить 0;
tbody align="center" - контент таблицы будет расположен по центру;
td rowspan="3" - объединение строк;
td colspan="3" - объединение столбцов;
If you don't know what is it about, it's about money (польская пословица)
Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Скрипты и стили для МуBB и не только » Универсальные Javascript, Jquery и CSS решения » Подборка html-шаблонов (html, css)
