Новый Вид материалов

648
10 из 10
Проголосовало: 6






Простой вид материалов с оригинальным Hover-эффектом подойдёт для сайтов с игровой тематикой.

Установка:

Добавить данный код в ПУ > Управление дизайном > Нужный Вам модуль > Вид материалов

Код

<a href="$ENTRY_URL$">  
  <div class="v_mat">  
  <div class="v_mat_img">  
  <img src="$IMG_URL1$" alt="$TITLE$">  
  <div class="v_mat_blur">  
  <span class="v_mat_blur_img" style="background-image: url('$IMG_URL1$')"></span>  
  <div class="v_mat_title"><h1>$TITLE$</h1>  
  <div class="v_mat_message">$MESSAGE$</div>  
  </div>  
  </div>  
  <div class="v_mat_info">  
  <div class="v_mat_left">$CATEGORY_NAME$</div>  
  <div class="v_mat_right">$DATE$ в $TIME$</div>  
  </div>  
  </div>  
  </div>  
  </a>


А этот код в ПУ > Управление дизайном > Таблица стилей (CSS)

Код

.v_mat {box-shadow: 0 0 3px 1px rgba(0,119,255,.45); display: inline-block; float: left; width: calc(50% - 10px); height: 300px; margin: 5px; background: rgba(0,0,0,.15); border-radius: 3px; overflow: hidden;}  
  .v_mat:hover {box-shadow: 0 0 3px 3px rgba(0,119,255,.65);}  
  .v_mat_img {width: 100%; height: 300px;}  
  .v_mat_img img {width: 100%; height: 300px; object-fit: cover;}  
  .v_mat_blur {width: 100%; height: 50px; overflow: hidden; transform: translate(0,-53px); box-shadow: 0 -2px 0 0 rgba(0,119,255,.65);}  
  .v_mat_blur_img {display: block; width: calc(100% + 20px); height: 320px; transform: translate(0,-255px); background-position: center; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); margin: -10px;}  
  .v_mat_title {width: calc(100% - 30px); height: 50px; padding: 0 15px; transform: translate(0,-300px); color: rgba(0,0,0,.75); background-color: rgba(255,255,255,.25); overflow: hidden;}  
  .v_mat_title h1 {line-height: 42px; text-transform: uppercase; font-family: 'Roboto',sans-serif; font-size: 28px; font-weight: bold;}  
  .v_mat_info {width: 100%; height: 20px; display: table; transform: translate(0,-353px); opacity: .65; background: rgba(0,0,0,.45);}  
  .v_mat_left, .v_mat_right {width: calc(50% - 10px); padding: 0 5px; display: table-cell; vertical-align: middle; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.85); font-size: 12px; font-weight: bold;}  
  .v_mat_right {text-align: right;}  
  .v_mat_message {height: 0; width: calc(100% - 10px); padding: 0 5px; overflow: hidden; font-size: 12px; line-htight: 12px; font-weight: normal; background: rgba(255,255,255,.3)}  

  .v_mat:hover .v_mat_blur {height: 330px; transform: translate(0,-303px);}  
  .v_mat:hover .v_mat_blur_img {transform: translate(0,0);}  
  .v_mat:hover .v_mat_title {height: 280px}  
  .v_mat:hover .v_mat_message {height: 200px; transform: translate(0,0);}  
  .v_mat:hover .v_mat_info {background: rgba(0,0,0,.85); opacity: 1; transform: translate(0,-353px);}  

  .v_mat, .v_mat_info, .v_mat_blur, .v_mat_title, .v_mat_message {transition: all linear .2s;}
Автор публикации: Загрузка
Загрузка
CbIPoK2513, это его n материал
  • Всего комментариев: 4

CbIPoK2513
+1
CbIPoK2513 написал: Написано 25 Марта 2016 в 07:06
Комментарий №2
Ой.. Я забыл оффнуть "Видео-рекламу" :с

tolyan163rus
0
tolyan163rus написал: Написано 25 Марта 2016 в 16:45
Комментарий №3
почему категория указывается в название?установил всё верно.

CbIPoK2513
0
CbIPoK2513 написал: Написано 25 Марта 2016 в 17:28
Комментарий №4
Будьте добры ссылку на сайт.

Вовчик
0
Вовчик написал: Написано 24 Марта 2016 в 17:53
Комментарий №1
выглядит хорошо на демо

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: