В блогах и форумах зачастую встроены древовидные комментарии. В этом уроке мы создадим простой макет древовидных комментариев основанный на HTML5 и CSS3.
Мы рассмотрим, как структурировать HTML5 документ, и как позиционировать элементы, используя CSS. На основе этого базового шаблона, разработчиком будет легко сделать изменения и реализацию такого рода блок комментариев под макет своих веб-сайтов.
Построение хэдера веб-страницы
Начнем с основного HTML шаблона, который мы используем в этом макете. Мы будем придерживаться HTML5 DOCTYPE закодированый в UTF-8, а также некоторых других элементов HTML5. Для веб-браузеров старше Internet Explorer 9, мы включили копию HTML5shiv скрипта, размещенного на Google dev серверах.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML5 & CSS3 комментарии</title> <link rel="shortcut icon" href="//www.yourwebsite.com/favicon.ico"> <link rel="icon" href="//www.yourwebsite.com/favicon.ico"> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Wellfleet"> <!--[if lt IE 9]> <script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head>
Это позволит новым элементам, таким как <header>, <footer> и <section> должным образом отображаться во всех браузерах. Единственной проблемой была бы работа в веб-браузерах с отключенным JavaScript. Вот еще один внешний ресурс для Wellfleet Google Шрифт, который стилизует текст заголовка страницы.
Внутренний body контент
Внутри <body> </body> тегов можно найти целую кучу внутренних div комментариев. Весь макет страницы завернут внутри div с ID #w для обертки. Все выравнивается по центру страницы с фиксированной шириной в 700px.
#container div является тем, что удерживает систему комментариев на месте, вдали от текста заголовка или других элементов страницы. Каждый поток комментариев проводится внутри неупорядоченного списка, где у корня <ul> есть ID #comments. Каждому внутреннему элементу задается класс .cmmnt и он воспроизводит практически тот же внутренний контент. Вот пример комментария с макета страницы:
<li> <div><a href="javascript:void(0);"> <img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></a></div> <div> <header><a href="javascript:void(0);">Pikabob</a> - <span>5 дней назад</span></header> <p>Слушай, я сейчас тебе расскажу очень смешную историю </a></p> </div> </li>
Внутренний комментарий содержит плавающее изображение аватара вместе с другим div, с помощью класса .cmmnt-content. Этот внутренний контейнер div помогает отличить от аватара колонки, чтобы наш контент находился только по правой стороне. Это также дает место для размещения <header> и <footer> тегов внутри body комментария, который может удерживать дополнительные ссылки для редактирования и обмена.
Внутренние комментарии используют неупорядоченные списки с классом .replies, прикрепленый к каждому из них. Это позволяет нам дублировать уровни комментариев на 3 или даже 4 подуровня.
<li>
<div><a href="javascript:void(0);"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></a></div>
<div>
<header><a href="javascript:void(0);">DarkCubes</a> - <span>1 неделю назад</span></header>
<p>ТЕКСТ КОММЕНТАРИЯ</p>
</div>
<ul>
<li>
<div><a href="javascript:void(0);"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></a></div>
<div>
<header><a href="javascript:void(0);">Sir_Pig</a> - <span>1 день назад</span></header>
<p>ТЕКСТ</p>
<p>ТЕКСТ КОММЕНТАРИЯ</p>
</div>
</li>
</ul>
</li>Обратите внимание, что даже самый низкий уровень древовидных комментариев следует точно такому же форматированию, как и верхний уровень.
Сбрасывание CSS стилей
Мы создали документ styles.css, который содержит весь CSS-код для позиционирования и дизайна содержания страницы.
Следующий фрагмент кода, сбросит все шрифты, поля, отступы, и что более важно, box-sizing для всех элементов на странице, в каждом браузере. Мы также использовали свойства для динамического обновления цвета CSS Highlight.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png');
font-size: 62.5%; line-height: 1;
font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav,
section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before,
blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }Двигаемся дальше. Мы включил код для сброса основных стилей на h1 элементе и параграфов на странице. Нам нужно настроить основные структуры для обёртки и контейнеров див. На контейнере, мы включили несколько CSS3 свойств для теней, чтобы выделиться из общего фона.
h1 { font-family: 'Wellfleet', 'Trebuchet MS',
Tahoma, Arial, sans-serif;
font-size: 2.85em; line-height: 1.6em;
font-weight: normal;
color: #756f8b;
text-shadow: 0px 1px 1px #fff;
margin-bottom: 21px; }
p { font-family: Arial, Geneva,
Verdana, sans-serif;
font-size: 1.3em;
line-height: 1.42em;
margin-bottom: 12px;
font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container {
display: block;
width: 100%;
background: #fff;
padding: 14px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}Стилизация страницы комментариев
#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt
{
display: block;
position: relative;
padding-left: 65px;
border-top: 1px solid #ddd;
}
#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }Каждый .сmmnt пункт списка предназначен для того, чтоб его “толкнули” вправо, с каждым внутренним контейнером <ul>. Мы установили значение padding-left: 65px; таким образом, чтобы каждый блок был оттеснен в сторону, независимо от длины или высоты. Каждый аватар позиционируется абсолютно по левую сторону, так что наличие дополнительного пэддинга, удерживает содержание подальше от края.
Мы применили уникальный CSS3 border-radius эффект и переход на аватары. Как только вы наведете курсор на каждый из них, непрозрачность будет постепенно сокращаться до 77% в течение 400 миллисекунд. Это очень интересный эффект при помощи лишь нескольких строк кода.
#comments .cmmnt .cmmnt-content
{
padding: 0px 3px;
padding-bottom: 12px;
padding-top: 8px;
}
#comments .cmmnt .cmmnt-content header {
font-size: 1.3em;
display: block;
margin-bottom: 8px;
}
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; }
#comments .cmmnt .replies { margin-bottom: 7px; }В этой последней части CSS кода, все что мы делаем, это позиционируем содержание, чтобы иметь дополнительный пэддинг, и обновляем цветовые схемы.
Высоких конверсий!
