Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами.
Для поиска шаблонов на нужную тему воспользуйтесь навигацией:
Кнопки | Блоки/цитаты | Списки | Анкеты | Таблицы | Рамки |
ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Гайды, уроки, подборки по вебдизайну » Подборка: шаблоны html
Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами.
Для поиска шаблонов на нужную тему воспользуйтесь навигацией:
Кнопки | Блоки/цитаты | Списки | Анкеты | Таблицы | Рамки |
Двойная смещённая рамка для фотографии
CSS:
Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style> или отдельным файлом:
Код:<style> тут коды <style>Код:<!-- Стиль фоторамок двойная смещённая рамка --> <link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" /> <!-- Конец -->
В постах изображения оборачиваем тэгами:
Или используем хтмл-код:
© Источник
Таблица в объявление "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
Алфавитный список "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
Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Гайды, уроки, подборки по вебдизайну » Подборка: шаблоны html