» »

Вид материалов Filmy для кино онлайн uCoz

Вид материалов Filmy для кино онлайн uCoz

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

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

Здесь рассмотрим как он будет визуально смотреться на светлом фоне.

Светлый вид материала на кино сайт

Приступаем к установке:

Здесь полностью в админ панель заменяем код.

Код
<div class="load-vid">

  <div class="load-vid-img">
  <a href="$ENTRY_URL$">
<img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$">
  </a>
  </div>
  <div class="load-vid-eTitle"><h2>$TITLE$</h2></div>
<div class="eDetails">
  <div style="float:right"><?if($RATING$)?><span class="e-rating"><span class="ed-value"><span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></span></span><?endif?></div>
<span class="e-reads"><span class="ed-value">$READS$</span></span>
  <?if($COMMENTS_URL$)?><a class="e-comments" href="$COMMENTS_URL$">($COMMENTS_NUM$)</a><?endif?>
</div>
<div class="eDetails3"><div style="float:right"><a href="$ENTRY_URL$" class="dalee-knopochka">Смотреть</a></div> <span class="e-date"><span class="ed-value" title="$TIME$">$DATE$</span></span> </div>
</div>


CSS:

Код
.load-vid-eTitle {
  color: #FFFFFF;
  padding: 3px 5px 10px 5px;
  background-color: rgba(18, 18, 18, 0.8);
  height: 70px;
  text-align: center;
  opacity: 0.9;
  margin-top: -83px;
  border-radius: 0 0 8px 8px;
}

.load-vid-eTitle h2 {
  font-size: 13px;
  color: #fff;
  font-family: Play;
  font-weight: bold;
}

.load-vid-img {
  height: 350px;
}
.load-vid-img img {
object-fit: cover;
  height: 350px;
  border-radius: 8px;
}

a.dalee-knopochka {
display: inline-block;
  padding: 2px 10px;
  background-color: #3498DB;
  color: #ffffff;
  position: relative;
  font-family: Play;
  border-radius: 8px;
}

a.dalee-knopochka:before {
background-color: rgba(255,255,255,0.3);
content: "";
width: 80px;
height: 40px;
position: absolute;
left: -40px;
top: -10px;
transform: rotate(-45deg);
}

a.dalee-knopochka:hover {
background-color: #658539;
color: #ffffff;
}
.eDetails3 {
  font-family: Play;
  font-size: 12px;
  color: #939fae;
  border-top: solid 2px #E4E4E4;
  overflow: hidden;
  padding: 5px 0 5px 0;
}

#allEntries div[id*="entryID"]{margin:0 2% 20px 0;width:23.5%;float:left;}
#allEntries div[id*="entryID"]:nth-child(4n){margin:0 0 20px 0;}

@media only screen and (max-width: 940px) {
#allEntries div[id*="entryID"]{width:48%;margin: 0 4% 20px 0;}
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 0 20px 0 !important;}  
#allEntries div[id*="entryID"]:nth-child(3n){margin: 0 4% 20px 0;}
}
@media screen and (max-width: 640px) {
#allEntries div[id*="entryID"]{width:auto !important;margin: 0 0 20px 0 !important;float:none !important;}
}

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

Автор: ДимДимыч
Если копируем, то автора обязательно ставим.
07.03.2017 Просмотров: 1361 Комментарий: (13)

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

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

Комментарий: 13
Kolinkor
Kolinkor 07.03.2017 16:271
0
Сейчас вид материала под кино сайт делают и под софт, просто не какой разницы нет, нужно было это написать, то может под софт портал ищет хороший вид, а этот как раз подойдет, и больщие название здесь в точку уместны будут.
Scheme
Scheme 07.03.2017 16:322
0
Вил мне не очень, просто они все уже здесь точно одинаковы, а вот кнопка сделано красиво, что по софт, да это не открытие и все понимают что может подойти и открою страшную тайну, он еще может подойти на игровой сайт. 47a
tsakonter
tsakonter 07.03.2017 16:343
0
ДимДимыч решил поделится своим материалом, но у него всегда качественный, нет не кокс, а элементы дизайн.
ДимДимыч
ДимДимыч 07.03.2017 16:364
0
Этот вид уже адаптивный под все устройства, а по поводу похож не похож вы не правы они все разные и если можете то придумайте что то другое.
Когда вышел первый сайт в рунете только только появились интерент странички они были уникальны а сейчас всё одно и то же. Не правда ли? мы щас можем просто менять местами элементы не более так как велосипед уже изобретён.
Kosten
Kosten 07.03.2017 16:537
0
Этот адаптирован точно, так как он на сайте стоит, не на тестовом, а на официальном.
Angerfist
Angerfist 11.03.2017 12:508
0
Что в твоём понятии адаптивность под все устройства? Я глянул код и сразу же интерес был увидеть воочию (не ошибся он стоит на твоём сайте, ссылку в вк нашёл).
Короче поразмышляй на досуге что я имел ввиду...
Kosten
Kosten 11.03.2017 15:209
0
Angerfist, ты что не в курсе, что домен сменил, если что то kinovego.ru, как найдешь не забудь поразмышлять.)
Angerfist
Angerfist 12.03.2017 02:2012
0
я промолчу...с вами спорить бесполезно
Kosten
Kosten 12.03.2017 11:3413
0
Просто нужно учитывать диапазон возможного.)
csretven
csretven 07.03.2017 16:485
0
ДимДимыч, у тебя всегда отличный материал и всегда адаптирован, хотя мне колонки не очень нравятся, мне просто твой подход к созданию нравится, это взять и создать какой то элемент дизайн, как вид материала и полностью его довести до ума.
Советник
Советник 07.03.2017 16:516
0
Красиво сделан, разве что иконки по ярче вывести.
ДимДимыч
ДимДимыч 11.03.2017 20:1510
0
Ребят. Хотелось бы отметить тот факт что я делаю для себя и мне нравится. Затем я даю Костену тот или иной материал и говарю нужно вылаживай нет в мусорку, кому нравится берите нет проходите лесом. Я не волшебник я такой какой есть 41b
Kolinkor
Kolinkor 11.03.2017 20:2111
0
Все правильно, но нет такого, что всем нравилось и также не кому не нравилось, потому и делают в разном дизайн.
avatar