ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный вид материалов для uCoz на CSS

Адаптивный вид материалов для uCoz на CSS

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

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

Все было проверено на тестовом сайте, где убраны лишние элементы, чтоб оставить только востребованную информацию.

У всех по умолчанию:

Примерно на смартфоне:

Мобильная версия:

Мобильная версия в колонку

HTML

Код

<div class="saheavy_gexpensem">
<div class="kaslargen_gastooles">
<?if($IMG_URL1$)?>
<img src="$IMG_URL1$" class="amplitudes_gdersavermin"/>
<?else?>
<img src="http://zornet.ru/ZORNET-RU/ZR/niBj9DQDTV_GoFha4g1TLA.png" class="amplitudes_gdersavermin"/>
<?endif?>
</div>
<a href="$ENTRY_URL$"><h4 class="kosresources">$TITLE$</h4></a>
<span class="bigenses"><i class="fa fa-calendar icons"></i> Дата файла : $DATE$</span>
<div class="greater_pudendum">
<p class="adeflectedun_angles">
$MESSAGE$
</p>
</div>
</div>

CSS

Код

.saheavy_gexpensem {
  padding: 19px;
  border: 0px solid rgba(54, 64, 74, 0.02);
  border-radius: 5px;
  margin-bottom: 18.5px;
  background-clip: padding-box;
  background-color: #f3f3f3;
  box-shadow: 0 0 9px 1px rgba(101, 95, 95, 0.71);
}
a {
  text-decoration: none;
}
.kosresources {margin-bottom: 12px !important;color: #4a4141 !important;font-weight: 700;text-decoration:none;font-size: 17px;overflow: hidden;height: 18px;line-height: 15.9px;white-space: nowrap; overflow: hidden; padding: 0px; text-overflow: ellipsis;}
.kosresources:hover {
color : #454647 !important;
text-decoration:none;
}
.bigenses {
font-size : 12.3px ;
margin-top: 0px !important;
color : #f5f2f2;
font-weight: 300;
background-color: #12a70d;
padding: 2px;
border-radius: 2px;
padding-right: 10px;
padding-left: 10px;
}
.amplitudes_gdersavermin {
border-radius : 5px 5px 3px 3px;
margin-bottom: 10px !important;
width:100%;
height:209px;
}
.adeflectedun_angles {
font-size : 15px !important;
margin-top: 9px !important;
margin-bottom: 4.7px !important;
color: #5e6266 !important;
}
.kaslargen_gastooles:hover img {
opacity: 0.7;
-webkit-filter: grayscale(1);
filter: grayscale(1);

}
.kaslargen_gastooles img {
transition: all .3s cubic-bezier(0.25, 0.1, 0.18, 0.99);
-webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.2, 0.89);
-moz-transition: all .3s cubic-bezier(0.25, 0.1, 0.23, 0.9);}
.greater_pudendum {
overflow: hidden;
height: 83px;
line-height: 23px;
}
.icons {
padding-right: 3.8px;
}
.portunitys:nth-child(even) {
  margin-right: 3.8%;
}
@media (max-width: 500px) {
  .portunitys {
  width: 100%;
  }
  .portunitys:nth-child(even) {
  margin-right: 0%;
  }
}

На обновленных браузерех, нужно после установки почистить историй, что после этого смотреть как вид установился на площадку.

Источник: www.7uarts.ga

25 Января 2018 Просмотров: 2140 Комментариев: (0)

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

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

Kosten

Комментарии: 0