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

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

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

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

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

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

Красивый каркас для новостей uCoz

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

Адаптивные блоги на модуль сайта

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

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

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 Просмотров: 2047 Комментариев: (0)

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

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

Оставь свой отзыв

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