» »

Красивое оформление картинки для новости


Красивое оформление картинки для новости

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

Проверка на тестовом сайте:



1.В таблицу стилей css:

Код
.example3 {  
  display:inline-block;  
  position:relative;  
  }  
  .example3 .example_text {  
  display:block;  
  position:absolute;  
  left:0;  
  bottom:0;  
  width:100%;  
  box-sizing:border-box;  
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;  
  color:#fff;  
  padding:5px;  
  background:url("http://zornet.ru/Ajaxoskrip/zornet/97d036db52d5.png") repeat;}  
  .example3 h5 {  
  font-weight:normal;font-style:normal;font-size:15px;padding:0;margin:1px 0 1px;font-family:OpenSansLight; color: #fff;  
  }  
  .example3 span {  
  font-size:12px;  
  }  

  .category-title {border-top: 5px solid rgba(0, 125, 173, 0.75);bottom: 100%;margin:10px 0px 20px 0px;left: 0;color: #fff; position: absolute;text-align: center;width: 100%;z-index: 4;}  
  .category-title span {background: rgba(0, 125, 173, 0.85);position: absolute;left: 240px;bottom: -14px;padding: 8px;-webkit-border-radius: 3px;border-radius: 3px;color: #fff;font-size: .625rem;font-weight: bold;text-transform: uppercase;}  
  .news-movie-filetype {  
  background: 0pt 0pt rgba(0, 0, 0, 0.6);  
  border-radius: 0 4px 4px 0;  
  display: block;  
  color: #fff;  
  float: left;  
  font: 12px "Tahoma";  
  margin-top: 10px;  
  padding: 5px 20px;  
  position: absolute;  
  text-align: left;  
  text-shadow: 20pt 20pt 20px;  
  }


2. На страницу материала и комментария к нему вставляем код:

Код
<div class="example3">  
  <div class="news-movie-filetype">Просмотров: $READS$</div>  
  <img src="$IMG_URL1$" alt="" style="width:569px;">  
  <div class="example_text">  
  <h3 style="margin: 5px 0 5px 5px;">  
  <span style="color:#FFFFFF;">  
  <span style="font-family:tahoma,geneva,sans-serif;">  
  <span style="font-size:16px;">$ENTRY_TITLE$</span></span></span></h3>  
  <div class="category-title"><span>$CAT_NAME$</span></div>  
  </div></div>
27.01.2016 Просмотров: 850 Комментарий: (19)

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

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

Комментарий: 18
Kosten
Kosten 27.01.2016 20:101
0
Надо посмотреть на тестовом, как работать будет, то по изображению не понять эффекты.
Kosten
Kosten 27.01.2016 20:212
0
Так очень грамотно сделано, нужно вид материала и комментариев код ставить, чтоб отображалась изображение.

tsakonter
tsakonter 27.01.2016 20:393
0
Это хороший скрипт, кто делает сайт, так как там нет скрина виде мат. и комментариев, они этот могут установить и он получше других смотреться будет.

Просто не пойму, почему под новости, так как можно и на файлы его поставить.
КиношаHD
КиношаHD 27.01.2016 20:584
0
Это чисто к слову smile
Kosten
Kosten 27.01.2016 21:045
0
На каталог файлов ставил и нормально, но понимаю, что нужно что то добавить, хотя так нормально все.
Сопрано
Сопрано 27.01.2016 21:216
0
Скажу очень даже не чего смотрится и правильно сказано, что лучше чем ставят сейчас.
ucozmental
ucozmental 28.01.2016 02:0812
0
Но можно еще покрасить его и закруглить углы.
Maryges
Maryges 28.01.2016 01:147
0
Вообще редкий код сам по себе, так как в поиске не найти и по какому запросу искать, просто самому только делать, отлично тому, кто сделал такой.
Kosten
Kosten 28.01.2016 01:288
0
Все исправил категорию, не тот оператор поставил и теперь нормально выводит.
AnTron
AnTron 28.01.2016 01:329
0
Но можно было прописать закругление углов, но всегда шло так, где border-radius: 5px;, что кто то не захотел.
Сафрон
Сафрон 28.01.2016 01:3610
0
Что то пробовал, но не стал сильно вникать, но получилось окно, но там поехало. Его скрипт нужно правильно еще выставить, чтоб стоял нормально и по ширине был как по сайту.
Tergran
Tergran 28.01.2016 02:0011
0
Здесь не указана ширина какая должна быть, это как на вид материалов, но есть такие, которые только под фиксированную идут, но всего один такой вид материала встречал.
1 2 »
avatar