Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Вид материлов с адаптацией под моб. телефоны
Скрипты

Всем привет! сегодня выкладываю вид материалов для сайта любой тематике данный вид материалов написан мной полностью с нуля но за идею взят материал с форума сайта зорнет

Вид при наведении в полной версии



Вид в моб. версии простой и при наведении



Установка



В вид материалов
Код
<div id="wid_m_bc">
  <div id="wid_m_left">
  <div id="wid_m_cat">$CATEGORY_NAME$</div>
  <div id="wid_m_kp">
  <span><i class="fa fa-thumbs-o-up"></i> $RATING$</span>
  <span> <i class="fa fa-comments-o"></i> $COMMENTS_NUM$</span>
  </div>
  <div id="wid_m_img"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>
  </div>
  <div id="wid_m_right"><a href="$ENTRY_URL$">
  <div id="wid_m_border"></div>
  <h2>$TITLE$</h2>
  <p>
  $MESSAGE$  
  </p></a>
  </div>
  <div id="clr"></div>
</div>


В таблицу стилей
Код

#wid_m_bc {
  position: relative;
  overflow: hidden;
  margin: 20px;
  background: #FFF;
  height: 250px;
}
#wid_m_left {float: left;width: 40%;position: relative;}
#wid_m_right {margin-left: 40%;width: 60%;padding: 0px 15px;}
#wid_m_cat {
  position: absolute;
  background: #0276DD;
  opacity: .7;
  color: #FFF;
  padding: 6px 15px;
}
#wid_m_img {
  max-width: 100%;
  height: 250px;
  overflow: hidden;
}
#wid_m_img img {
  max-width: 100%;
  min-width: 100%;
  height: 250px;
  object-fit: cover;
}
#wid_m_kp {
  position: absolute;
  bottom: 5px;
  right: 10px;
  color: #FFF;
  font-size: 16px;
}
#wid_m_border {
  width: 40px;
  height: 5px;
  background: #0276DD;
  position: absolute;
  bottom: 0;
}
#wid_m_bc:hover #wid_m_border {
  width: 100%;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
#wid_m_bc h2 {
  padding: 10px 0;
  display: block;
  color: #434343;
  font-size: 24px;
}
#wid_m_bc:hover h2 {
  color: #0276DD;
}
#wid_m_bc p {
  display: block;
  color: #;
  font-size: 14px;
  max-height: 160px;
  overflow: hidden;
  color: #999999;
}
#clr {clear: both;}

@media screen and (max-width: 600px) {
  #wid_m_bc {height: auto;padding-bottom: 10px;}
  #wid_m_left {float: none;width: 100%;}
#wid_m_right {margin-left: 0px;width: 100%;padding: 0px;position: relative;}
#wid_m_border {top: 0px;}
#wid_m_bc h2 {padding: 10px 15px;}
#wid_m_bc p {padding: 15px;}
}


Так же в данном материале используются шрифтовые иконки для их подключения вам нужно добавить в самый верх вашей таблицы стилей такую строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Если они у вас уже подключены вам этот шаг делать не нужно

Особености:

Тематика
Любой сайт
Браузеры
Все последней версии
Адаптация
Есть

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

Нет комментариев

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.