Красивая лента новостей

Для вашего сайта может понадобиться сделать ленту новостей с указанием времени публикации новости. Приведем один из возможных вариантов стильного оформления такой ленты новостей с использованием css. Ниже - пример реализации стильной новостной ленты.

---

Если вам понравилась наша лента новостей, то вы можете использовать следующие стили для установки такой же на вашем сайте:

#stream> .title{line-height:1em}
#stream>.list{margin-bottom:15px}
#stream>.list>.item{display:table-row; font-size:15px; width:100%; line-height:19px;}
#stream>.list>.item>.time{display:table-cell;vertical-align:middle; 
background-color:#323232; background-image:url(/design/timeline_grade.png); 
background-repeat:repeat-y;background-position:left top;color:#fff; 
text-decoration:none;text-align:center;width:55px;padding:10px 10px; 
border-bottom:1px solid #949494}
#stream>.list>.item>.title
{display:table-cell;padding:10px;border-bottom:1px solid #d9d9d9;
width: calc(100%);
color:#323232}
#stream>.list>.item>.title:visited{color:#a5a5a5}
#stream>.list>.item.highlight>.title{background-color:#cddae4;font-weight:700}
#stream>.list>.item.highlight>.title:visited{color:#5c5c5c}
#stream>.list>.item.yellow>.title{background-color:#f9e9a0}
#stream>.list>.item.yellow>.title>.marker{float:right;margin:0 0 0 20px; 
height:24px;font-size:12px;line-height:12px;width:85px; padding-right:28px; 
background:url(/static/images/unimproved_info_icon.png)no-repeat center right; 
text-align:right}
#stream>.list>.item.yellow>.title>.marker>span{display:none; 
color:#323232;font-weight:400!important}
#stream>.list>.item.yellow:hover>.title>.marker>span{display:block}
#stream>.list>.item:hover>.time{opacity:.8}
#stream>.list>.item:last-child>.time{border-bottom:none}
#stream>.list>.item:last-child>.title{border-bottom:none}
#stream>.list>.item:nth-child(3)>.time{background-color:#414141}
#stream>.list>.item:nth-child(4)>.time{background-color:#464646}
#stream>.list>.item:nth-child(5)>.time{background-color:#4c4c4c}
#stream>.list>.item:nth-child(6)>.time{background-color:#515151}
#stream>.list>.item:nth-child(7)>.time{background-color:#565656}
#stream>.list>.item:nth-child(8)>.time{background-color:#5b5b5b}
#stream>.list>.item:nth-child(9)>.time{background-color:#606060}
#stream>.list>.item:nth-child(10)>.time{background-color:#656565}
#stream>.list>.item:nth-child(11)>.time{background-color:#6a6a6a}
#stream>.list>.item:nth-child(12)>.time{background-color:#6f6f6f}
#stream>.list>.item:nth-child(13)>.time{background-color:#747474}
#stream>.list>.item:nth-child(14)>.time{background-color:#797979}
#stream>.list>.item:nth-child(15)>.time{background-color:#7f7f7f}
#stream>.list>.item:nth-child(16)>.time{background-color:#848484}
#stream>.list>.item:nth-child(17)>.time{background-color:#898989}
#stream>.list>.item:nth-child(18)>.time{background-color:#8e8e8e}
#stream>.list>.item:nth-child(19)>.time{background-color:#939393}
#stream>.list>.item:nth-child(20)>.time{background-color:#989898}
#stream>.list>.item:nth-child(21)>.time{background-color:#9d9d9d}

Для стилей вам понадобится картинка, которую можно забрать здесь. А также, следует разместить на страницу, саму ленту новостей. Ниже приведен фрагмент кода ленты, которую вы видите выше.
<div id="stream"> <div class="list"> <div class="item"> <a class="time" href="/faq/" rel="nofollow"> 23.05 </a> <a class="title" href="/faq/">Новый сервис на сайте - ваши вопросы и наши ответы</a> </div> <div class="item highlight"> <a target="_blank" class="time" href="https://vk.com/upbyte" rel="nofollow"> 20:20 </a> <a target="_blank" class="title" href="https://vk.com/upbyte"> У нас появилась официальная группа вКонтакте</a> </div> <div class="item yellow"> <a title="Редактор формул" class="time" href="upbyte.net" rel="nofollow"> 19:15 </a> <a title="Редактор формул" class="title" href="upbyte.net"> Попробуйте наш редактор математических формул онлайн бесплатно</a> </div> </div> </div>