» »

Вид материалов для кино-сайтов


Вид материалов для кино-сайтов

Решил поменять недавно на одном из сайтов вид материалов каталога файлов, так как каркас был полностью табличный и дизайн к тому же приелся. Побродив по сайтам c ucoz скриптами нашёл подходящие шаблоны, но только тоже с табличной внутренностью и к тому же фиксированными размерами.

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

Добавлю что лепил под сайт с широким шаблоном, на сайте с шириной контента 960px и боковыми блоками самому не очень понравилось, но можно менять количество блоков в стилях меняя ширину в процентах.

HTML
Код

<div style="width:100%">
<div class="form-type">
<div class="img-form" style="background-image: url('$IMG_URL1$')"></div>
<div class="form-title"><a href="$ENTRY_URL$" title="Перейти к просмотру">
<?if(len($TITLE$)>50)?><?substr($TITLE$,0,50)?>...<?else?>$TITLE$<?endif?></a></div>
<div class="form-info">
<div class="left-info">
<a href="$CATEGORY_URL$" title="Категория"><b>$CATEGORY_NAME$</b></a><br>
Просмотры: <span class="numeral" title="Просмотры"><b style="margin:0 5px">$READS$</b></span>  
</div>
<div class="right-info">
<span class="numeral-rate" title="Рейтинг"><b style="margin:0 5px">$RATING$</b></span>
</div>
</div>
</div>


CSS
Код

.form-type {  
width:32%;  
float:left;
margin: 0.5% 0 0.5% 1%;
border: 1px solid #D3D3D3;
border-radius: 3px;  
}
.form-title {
font-size:16px;  
text-align:left;
height:34px;  
margin: 5px;  
}
.form-info {
width:100%;  
display: inline-block;
}
.left-info {
display: block;
float:left;
color: #000000;
font-size: 16px;
margin: 5px;
}
.right-info {
display: block;  
float:right;  
margin: 16px 5px 5px 5px;  
}
.img-form {
opacity: 1;  
z-index:1;
border-radius: 3px 3px 0 0;
display: block;
position: relative;
margin: 0;
padding-bottom: 135%;
height: 0;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.img-form:hover {  
opacity: 0.6;  
}
.numeral {
color:#FFFFFF;
font-size:14px;  
background:#CD5C5C;
border-radius:2px;
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.numeral-rate {  
color:#FFFFFF;
font-size:24px;  
background:#2E8B57;
border-radius:2px;
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.8);
}  
@media only screen and (max-width: 768px) {
.form-title {height:64px;}
}  
@media only screen and (max-width: 640px) {
.form-type {width:48%;}
.form-title {height:64px;}
}  


Вроде всё понятно в коде, поэтому кому нужно легко переделает это безобразие)))

Вид материала светлый для кино сайта
01.08.2016 Загрузок: 7 Просмотров: 523 Комментарий: (17)

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

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

Комментарий: 16
Kosten
Kosten 01.08.2016 21:561
0
Angerfist, скрин скинь, установлю.
Angerfist
Angerfist 01.08.2016 21:592
0
Не залились с первого раза, исправил)
Kosten
Kosten 01.08.2016 22:044
0
Это просто доработал как хотел видеть этот вид материала.
Kosten
Kosten 01.08.2016 22:013
0
Сейчас на кино сайт, основном такой вид ставят, но здесь что сделано, это все в плоть до просмотров в дизайн стоит, очень круто смотрится.
Angerfist
Angerfist 01.08.2016 22:075
+1
В принципе то что хотел сделать пока не вышло, потом буду ковыряться, из за того что надо подстраиваться под адаптивность многие замуты пока не выходят, тут я просто незаконченную работу выложил, может кто модернизирует
Сопрано
Сопрано 01.08.2016 22:086
0
А кто пишет "смотреть онлайн" иногда большие название есть, то можно просто на операторы поставить, и вывести сколько вам нужно знаков, для вид материала, это нормально.
Angerfist
Angerfist 01.08.2016 22:127
0
Ага), я когда тестировал запарился блок регулировать с названием,
только думаешь всё, как вспоминаешь про адаптацию и пришлось не только укорачивать текст но и медиа запрос написать.
tvkyrgyz
tvkyrgyz 30.08.2016 13:5615
0
Спасибо
Scheme
Scheme 01.08.2016 22:158
0
Но самый большой плюс, что он адаптирован, и сам вид материала смотрится отлично.
Maryges
Maryges 01.08.2016 22:229
0
Сейчас многие кино сайты делают адаптивные, здесь как раз этот вид материала пригодиться.
Tergran
Tergran 01.08.2016 22:2510
0
Но такая тематика не простая и адаптировать сложней, если еще плееры в каркасе стоят, если так, то нормально.
feliksteg
feliksteg 01.08.2016 23:2311
0
Если в ряду будет три фильма, то это нормально. То просто некоторые так сделают, что не понять какой фильм, главное больше на главную выставить.
tvkyrgyz
tvkyrgyz 30.08.2016 07:5412
-1
Подскажите, как сделать так чтоб и по изображению переходило-> на материал. Здесь только текст кликабельная, заранее спасибо, надеюсь на вашу помощь
Angerfist
Angerfist 30.08.2016 12:5613
+2
Вместо
Код
<div class="img-form" style="background-image: url('$IMG_URL1$')"></div>

Поставьте
Код

<div class="img-form" style="background-image: url('$IMG_URL1$'); cursor:pointer;" onclick="location.href='$ENTRY_URL$'"></div>

Я сделал кликабельным только текст, чтобы на мобильных устройствах люди случайно задев при перемотке не улетали в материал)
tvkyrgyz
tvkyrgyz 30.08.2016 13:5414
0
Заработало, спасибо вам большое
Kosten
Kosten 01.09.2016 18:5816
-1
Давайте писать нормальным шрифтом, но пока слепых на сайте на замечал.
avatar