• Страница 1 из 1
  • 1
Форум » ...iT заметки [общие компьютерные темы] » Выбор CMS » ucoz » Оригинальный адаптивный вид материалов ucoz
Оригинальный адаптивный вид материалов ucoz
avatar
Админ | Оффлайн


Это в вид материалов или в информер

Код
<div class="nbd_in_ua_sabtunim_left">
<div class="nbd_in_ua_sabtunim_title_left">
<a href="$ENTRY_URL$"><i class="fa fa-fire"></i> $TITLE$</a>
</div>
<div class="vid_messagess_left">$MESSAGE$</div>
<div class="nbd_in_ua_sabtunim_info_left">
<span class="info_reads"><i class="fa fa-eye fa-fw"></i> $READS$</span>
<span class="info_comm"><i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$</span>
<span class="info_rating"><i class="fa fa-star-half-o"></i> $RATING$</span>
<span class="info_cat"><i class="fa fa-folder-o"></i><a href="$CATEGORY_URL$"> $CATEGORY_NAME$</a></span>
</div>
<div class="info_date_left"><i class="fa fa-clock-o"></i> $DATE$</div>
<div class="info_button"><a href="$ENTRY_URL$">ещё</a></div>
<div class="nbd_in_ua_sabtunim_image_left " style="background: url($IMG_URL1$) center 100% no-repeat;">
<a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$"></a>
</div>
</div><link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" />


это в CSS добавить, или взять в
Код
<style> </style>


Код
.nbd_in_ua_sabtunim {
position: relative;
width: 99%;
margin: 10px;
background: #48433f;
border: 1px solid #504137;
border-radius: 3px;
}
.nbd_in_ua_sabtunim:hover{background: #1B1917 !important; border: 1px solid #f8b700; border-radius: 3px;}
.nbd_in_ua_sabtunim_image {
display:block;
float: right;
height:200px;
top:0;
left:0;
overflow:hidden;
}
.nbd_in_ua_sabtunim_image img {
object-fit: cover;
width: 100%;
max-width: 100%;
height: 200px;
max-height: 200px;
}
.nbd_in_ua_sabtunim_title a {
color: #fff;
float:left;
font-size: 14px;
font-weight: 600;
padding: 4px;
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nbd_in_ua_sabtunim_title:hover a {
color: red;
}
.nbd_in_ua_sabtunim_left {
position: relative;
width: 99%;
margin: 10px;
background: #48433f;
border: 1px solid #504137;
border-radius: 2px;
}
.nbd_in_ua_sabtunim_left:hover{background: #1B1917 !important; border: 1px solid #f8b700; border-radius: 3px;}
.nbd_in_ua_sabtunim_image_left {
display:block;
float: left;
height:200px;
top:0;
right:0;
overflow:hidden;
}
.nbd_in_ua_sabtunim_image img,.nbd_in_ua_sabtunim_image_left img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.nbd_in_ua_sabtunim_image img:hover,.nbd_in_ua_sabtunim_image_left img:hover{
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-o-transform: scale(1.07);
}
.nbd_in_ua_sabtunim_image_left img {
object-fit: cover;
width: 100%;
max-width: 100%;
height: 200px;
max-height: 200px;
}
.nbd_in_ua_sabtunim_title_left a {
color: #fff;
float: left;
font-size: 14px;
font-weight: 600;
padding: 4px;
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
top:0;
right:0;
}
.nbd_in_ua_sabtunim_title_left:hover a {
color: red;
}
.nbd_in_ua_sabtunim_info_left {
position: absolute;
right: 6%;
bottom: 10px;
}
.nbd_in_ua_sabtunim_info {
position:absolute;
left:5px;
bottom:10px;
}
.info_reads {
color: #48556d;
background:#DED6C9;
border: #c77e19 1px solid;
padding: 2px 8px;
border-radius: 3px;
}
.info_comm {
color: silver;
background:#DED6C9fff;
border: #c77e19 1px solid;
padding: 2px 8px;
border-radius: 3px;
}
.info_rating {
color: #e2fcff;
background: #535861;
border: #c77e19 1px solid;
padding: 2px 8px;
border-radius: 3px;
}
.info_cat {
color: #48556d;
background:#ffd36b;
border: #c77e19 1px solid;
padding: 2px 8px;
border-radius: 3px;
}
.vid_messagess {
position:absolute;
top: 27px;
width: 50%;
color: rgba(255,255,255,.5);
padding:5px 10px;
margin-bottom: 5px;
height: 123px;
overflow: hidden;
text-align: justify;
line-height: 140%;
}
.info_button a{border: 1px solid #c77e19;
position:absolute;
right: 7px;
bottom: 6px;
color: #f7b10a;
background: rgba(159,22,0,.6);
padding: 5px 7px;
}
.info_button:hover a{ position:absolute;
border: 1px solid #c77e19;
color: #ffd36b;
background: #9f1600;
box-shadow: 0 6px 11px 0 rgba(62, 177, 244, 0.35);
}
.info_date {
position:absolute;
right: 0px;
top: 0px;
color: #f1eaea;
background: rgba(49, 48, 48, 0.57);
padding:8px 9.3px;
border-bottom: #c77e19 2px solid;
font-size: 12px;
}
.vid_messagess_left {
position:absolute;
right: 7px;
top: 27px;
width: 50%;
color: rgba(255,255,255,.5);
padding:5px 10px;
margin-bottom: 5px;
height: 123px;
overflow: hidden;
text-align: justify;
line-height: 140%;
}

.info_date_left {
position:absolute;
left: 0px;
top: 0px;
color: #f1eaea;
background: rgba(49, 48, 48, 0.57);
padding:8px 9.3px;
border-bottom: #c77e19 2px solid;
font-size: 12px;
}

Ещё даю адаптивность для самого минимального разрешения 240 х 320, даже на древних телефонах будет нормально смотреться.

Код
@media screen and (min-width: 240px) and (max-width: 399px) {
.mtr,.mtr_left {display:block} .numf{display:none}
.viewn_cont,.h-container,.hf-bottom {font-size: 9px;white-space: wrap;}
.nbd_in_ua_sabtunim_image,.nbd_in_ua_sabtunim_image_left {max-width: 100%}
.nbd_in_ua_sabtunim_title a {max-width: 100%}
.nbd_in_ua_sabtunim_title_left a {color: #fff;
float: right;font-size: 14px;font-weight: 600;padding: 4px;
position: absolute;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
width: 100%;left:0}
.mtr .im {display:block;margin-bottom:10px;padding-right:0px}
.mtr .inim, .mtr .inim img,.inim img_left{width:100%;}
.mtr_td,.mtr_td_left {display:block}
.nbd_in_ua_sabtunim_info_left { position:absolute; bottom:10px;
color: #fff; float: left; white-space: wrap; width: 100%; }
}


В этой теме Вы можете задать вопрос о материале Оригинальный адаптивный вид материалов ucoz.
[Сообщение # 1]  
Форум » ...iT заметки [общие компьютерные темы] » Выбор CMS » ucoz » Оригинальный адаптивный вид материалов ucoz
  • Страница 1 из 1
  • 1
Поиск:

close