» »

Записи в ленточной форме для сайта на CSS3


Записи в ленточной форме для сайта на CSS3

Красиво созданные записи в адаптированном варианте, которые сделаны для оформление и создаются для информационного блога на сайте. Вы можете сделать как на отдельной странице и написать в разных вариациях правила. Но также можно информировать пользователей и гостей в оригинальной стилистике. Здесь идет как комментарий, только сделано под материал, что можно перейти на основной, так как в низу установлена кнопка. Так что вам решать, где можно установить такой вариант, чтоб было красиво и стильно смотрелось. Но здесь вы можете разместить в сам вид материалов и комментариев к нему, главное чтоб было по смыслу установка.

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

Так будет после установки:

Ленточный вариант записей на CSS3 и jQuery

Приступаем к установке:

Сразу после /head на нужных страницах вставляйте:

Код
<link rel="stylesheet" type="text/css" href="/css/style.css">  
<script type='text/javascript' src="/js/modernizr.js"></script>  
<script type='text/javascript' src="/js/main.js"></script>

Теперь нам нужно на странице оформить этот стиль, что за ранее готовим его и потом ставим так где решили.

Код
<section class="cd-container" id="cd-timeline">  
  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-picture"><img alt="Picture" src=  
  "/img/cd-icon-picture.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>ZORNET.RU</h2>  
  <p>На сайте найдете все для создание сайта</p><a class="cd-read-more"  
  href="#0">ХОЧУ!</a> <span class="cd-date">6 Декабря</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  

  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-movie"><img alt="Movie" src=  
  "/img/cd-icon-movie.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>Название под номером 2</h2>  
  <p>И когда она выйдет на 7 ноября, это будет стоить $ 499 - вдвое больше, чем текущий Xbox One S.</p><a class=  
  "cd-read-more" href="#0">Read more</a> <span class=  
  "cd-date">Jan 18</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  

  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-picture"><img alt="Picture" src=  
  "/img/cd-icon-picture.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>Title под номером 3</h2>  
  <p>Названный «Xbox One X,» это мощный игровой автомат предназначен для полного на 4K игр и воспроизведения медиа. </p><a class=  
  "cd-read-more" href="#0">Read more</a> <span class=  
  "cd-date">Jan 24</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  

  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-location"><img alt="Location" src=  
  "/img/cd-icon-location.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>Title под номером четыре</h2>  
  <p>Во время вчерашней пресс-конференции E3, Microsoft представила готовую версию своего долгожданного полшага консоли. </p><a class="cd-read-more" href=  
  "#0">Read more</a> <span class="cd-date">Feb 14</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  

  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-location"><img alt="Location" src=  
  "/img/cd-icon-location.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>Здесь титле</h2>  
  <p>Вы сможете играть системы Link-совместимых игр через каждое поколение консоли Xbox, от оригинала до последней Xbox One X.</p><a class=  
  "cd-read-more" href="#0">Read more</a> <span class=  
  "cd-date">Feb 18</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  

  <div class="cd-timeline-block">  
  <div class="cd-timeline-img cd-movie"><img alt="Movie" src=  
  "/img/cd-icon-movie.svg"></div>  
  <!-- cd-timeline-img -->  
  <div class="cd-timeline-content">  
  <h2>Названые поста</h2>  
  <p>Оригинальные игры Xbox не только ближайшие к семье Xbox One.</p><span class=  
  "cd-date">Feb 26</span>  
  </div><!-- cd-timeline-content -->  
  </div><!-- cd-timeline-block -->  
  </section>

Здесь еще устанавливается дата, что можете в ручную поставить или чтоб она работала, то оператор поможет. Чтоб примерно посмотреть как все отображаться будет, то можете посмотреть демонстрацию, но и на источнике узнать подробнее.

Здесь также по этой теме: codyhouse.co/gem/vertical-timeline
14.06.2017 Загрузок: 1 Просмотров: 388 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Сопрано
Сопрано 14.06.2017 02:131
0
На одном сайте видел такую структуру, он у конструктора неофициальный сайт, очень красиво выглядеть и в самом материале, точно не скажу, но там мануал написан и все как говорят по полочкам разложено.
Kosten
Kosten 14.06.2017 02:214
0
Да можно посмотреть, ссылки все в материале предоставлены.
Scheme
Scheme 14.06.2017 02:162
0
На темном фоне не очень, нужно делать на светлом, что на DEMO показано.
Gerat
Gerat 14.06.2017 02:193
0
Не слишком все мудрено.
Kosten
Kosten 14.06.2017 02:225
0
Кому как, кому то это нужно, кто то считает это сложной установкой и просто пролистает.
avatar