Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно

Добро пожаловать!
Сделай
Cайт
Лучше
  • Главная страница
  • Форум Помощь
  • Файлы Каталог файлов
  • Полезно Рекомендуем
  • Новое На сайте
  • Правила Читать всем

Уникальный вид коментариев для Ucoz в стиле 3D

Твитнуть
02 Июл 2025
Уникальный вид комментариев выполнен в стиле 3D, отлично смотрится на любом дизайне. Вид комментариев полностью рабочий, отображается во всех браузерах одинаково и установка не займет у Вас много времени. Автор постарался на славу. Предлагаю посмотреть видео обзор этого вида комментариев для ucoz



Установка:

В самый низ вашего css вставляйте:

Код
/*--ubutton-fix--*/  
  .myBtnLeft img, .myBtnRight img, .myBtnLeftA img, .myBtnRightA img, .myBtnRight + td input, .myBtnRightA + td input { display: block }  
  .myBtnCenter, .myBtnCenterA { line-height:19px !important }  
  .myBtnCont { height:19px; padding-bottom:0 !important }  

  @font-face {  
  font-family: 'fontawesome-selected';  
  src: url("/css/fontawesome-selected.eot");  
  src:  
  url("/css/fontawesome-selected.eot?#iefix") format('embedded-opentype'),  
  url("/css/fontawesome-selected.woff") format('woff'),  
  url("/css/fontawesome-selected.ttf") format('truetype'),  
  url("/css/fontawesome-selected.svg#fontawesome-selected") format('svg');  
  font-weight: normal;  
  font-style: normal;  
  }  

  .timeline {  
  position: relative;  
  list-style-type: none;  
  padding: 30px 0 50px 0;  
  font-family: 'Gorditas', Arial, sans-serif;  
  width:650px;  
  background:#ddd  
  }  

  .timeline:before {  
  content: '';  
  position: absolute;  
  width: 5px;  
  height: 100%;  
  top: 0;  
  left: 165px;  
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);  
  color:#aaa  
  }  

  .event {  
  position: relative;  
  margin-bottom: 80px;  
  padding-right: 40px;  
  }  

  .thumb {  
  position: absolute;  
  width: 100px;  
  height: 100px;  
  box-shadow:  
  0 0 0 8px rgba(65,131,142,1),  
  0 1px 1px rgba(255,255,255,0.5);  
  background-repeat: no-repeat;  
  border-radius: 50%;  
  -webkit-transform: scale(0.8) translateX(24px);  
  -moz-transform: scale(0.8) translateX(24px);  
  -o-transform: scale(0.8) translateX(24px);  
  -ms-transform: scale(0.8) translateX(24px);  
  transform: scale(0.8) translateX(24px);  
  }  

  .thumb:before {  
  content: '';  
  position: absolute;  
  height: 8px;  
  z-index: -1;  
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);  
  width: 51px;  
  top: 42px;  
  left: 100%;  
  margin-left: 8px;  
  }  

  .thumb span {  
  color: #41838e;  
  width: 100%;  
  text-align: center;  
  font-weight: 700;  
  font-size: 15px;  
  text-transform: uppercase;  
  position: absolute;  
  bottom: -30px;  
  }  

  /* Transparent Checkbox/radio hack: leave the checkbox on top, hide it with opacity 0 */  

  .event label,  
  .event input[type="radio"] {  
  width: 24px;  
  height: 24px;  
  left: 158px;  
  top: 36px;  
  position: absolute;  
  display: block;  
  }  

  .event input[type="radio"] {  
  opacity: 0;  
  z-index: 10;  
  cursor: pointer;  
  }  

  .event label:after {  
  font-family: 'fontawesome-selected';  
  content: '\e702';  
  background: #fff;  
  border-radius: 50%;  
  color: #41838E;  
  font-size: 26px;  
  height: 100%;  
  width: 100%;  
  left: -2px;  
  top: -3px;  
  line-height: 24px;  
  position: absolute;  
  text-align: center;  
  }  

  .content-perspective {  
  margin-left: 230px;  
  position: relative;  

  -webkit-perspective: 600px;  
  -moz-perspective: 600px;  
  -o-perspective: 600px;  
  -ms-perspective: 600px;  
  perspective: 600px;  
  }  

  .content-perspective:before {  
  content: '';  
  width: 37px;  
  left: -51px;  
  top: 45px;  
  position: absolute;  
  height: 1px;  
  z-index: -1;  
  background: #fff;  
  }  

  .content {  
  -webkit-transform: rotateY(10deg);  
  -moz-transform: rotateY(10deg);  
  -o-transform: rotateY(10deg);  
  -ms-transform: rotateY(10deg);  
  transform: rotateY(10deg);  

  -webkit-transform-origin: 0 0;  
  -moz-transform-origin: 0 0;  
  -o-transform-origin: 0 0;  
  -ms-transform-origin: 0 0;  
  transform-origin: 0 0;  

  -webkit-transform-style: preserve-3d;  
  -moz-transform-style: preserve-3d;  
  -ms-transform-style: preserve-3d;  
  -o-transform-style: preserve-3d;  
  transform-style: preserve-3d;  
  }  

  .content-inner {  
  position: relative;  
  padding: 20px;  
  color: #333;  
  border: none;  
  border-left: 5px solid #41838e;  
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);  
  background: #fff;  
  }  

  .content-inner h3 {  
  font-size: 26px;  
  padding: 5px 0 5px 0;  
  color: #41838e;  
  }  

  .content-inner p {  
  font-size: 18px;  
  overflow: hidden;  
  color: transparent;  
  color: #777;  
  text-align: left;  
  }  

  .content-inner:before {  
  font-family: 'fontawesome-selected';  
  content: '\25c2';  
  font-weight: normal;  
  font-size: 54px;  
  line-height: 54px;  
  position: absolute;  
  width: 30px;  
  height: 30px;  
  color: #41838e;  
  left: -22px;  
  top: 19px;  
  z-index: -1;  
  }  

  /* Transitions */  

  .thumb,  
  .thumb span,  
  .content-inner h3 {  
  -webkit-transition: all 0.6s ease-in-out 0.2s;  
  -moz-transition: all 0.6s ease-in-out 0.2s;  
  -o-transition: all 0.6s ease-in-out 0.2s;  
  -ms-transition: all 0.6s ease-in-out 0.2s;  
  transition: all 0.6s ease-in-out 0.2s;  
  }  

  .content-inner {  
  -webkit-transition: box-shadow 0.8s linear 0.2s;  
  -moz-transition: box-shadow 0.8s linear 0.2s;  
  -o-transition: box-shadow 0.8s linear 0.2s;  
  -ms-transition: box-shadow 0.8s linear 0.2s;  
  transition: box-shadow 0.8s linear 0.2s;  
  }  

  .content {  
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;  
  -moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;  
  -o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;  
  -ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;  
  transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;  
  }  

  .content-inner p {  
  -webkit-transition: max-height 0.5s linear, color 0.3s linear;  
  -moz-transition: max-height 0.5s linear, color 0.3s linear;  
  -o-transition: max-height 0.5s linear, color 0.3s linear;  
  -ms-transition: max-height 0.5s linear, color 0.3s linear;  
  transition: max-height 0.5s linear, color 0.3s linear;  
  }  

  /* Checked */  

  .event input[type="radio"]:checked + label:after {  
  content: '\2714';  
  color: #F26328;  
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);  
  }  

  .event input[type="radio"]:checked ~ .content-perspective:before {  
  background: #F26328;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {  
  color: #F26328;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content {  
  -webkit-transform: rotateY(-5deg);  
  -moz-transform: rotateY(-5deg);  
  -o-transform: rotateY(-5deg);  
  -ms-transform: rotateY(-5deg);  
  transform: rotateY(-5deg);  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner {  
  border-color: #F26328;  
  box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {  
  max-height: 260px; /* Add media queries */  
  color: rgba(0,0,0,0.6);  
  -webkit-transition-delay: 0s, 0.6s;  
  -moz-transition-delay: 0s, 0.6s;  
  -o-transition-delay: 0s, 0.6s;  
  -ms-transition-delay: 0s, 0.6s;  
  transition-delay: 0s, 0.6s;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner:before {  
  color: #F26328;  
  }  

  .event input[type="radio"]:checked ~ .thumb {  
  -webkit-transform: scale(1);  
  -moz-transform: scale(1);  
  -o-transform: scale(1);  
  -ms-transform: scale(1);  
  transform: scale(1);  
  box-shadow:  
  0 0 0 8px rgba(242,99,40,1),  
  0 1px 1px rgba(255,255,255,0.5);  
  }  

  .event input[type="radio"]:checked ~ .thumb span {  
  color: #F26328;  
  }  

  .event input[type="radio"]:checked ~ .thumb:before {  
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);  
  }  

  .content-inner p,  
  .thumb span,  
  .event label {  
  -webkit-backface-visibility: hidden;  
  }  

  @media screen and (max-width: 850px) {  
  .content-inner h3 {  
  font-size: 20px;  
  }  

  .content-inner p {  
  font-size: 14px;  
  text-align: justify;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {  
  max-height: 500px;  
  }  
  }  

  @media screen and (max-width: 540px) {  
  .timeline::before {  
  left: 50px;  
  }  

  .event {  
  padding-right: 0px;  
  margin-bottom: 100px;  
  }  

  .thumb {  
  -webkit-transform: scale(0.8);  
  -moz-transform: scale(0.8);  
  -o-transform: scale(0.8);  
  -ms-transform: scale(0.8);  
  transform: scale(0.8);  
  }  

  .event input[type="radio"] {  
  width: 100px;  
  height: 100px;  
  left: 0px;  
  top: 0px;  
  }  

  .thumb:before,  
  .event input[type="radio"]:checked ~ .thumb:before {  
  background: none;  
  width: 0;  
  }  

  .event label {  
  display: none;  
  }  

  .content-perspective {  
  margin-left: 0px;  
  top: 80px;  
  }  

  .content-perspective:before {  
  height: 0px;  
  }  

  .content {  
  -webkit-transform: rotateX(-10deg);  
  -moz-transform: rotateX(-10deg);  
  -o-transform: rotateX(-10deg);  
  -ms-transform: rotateX(-10deg);  
  transform: rotateX(-10deg);  
  }  

  .event input[type="radio"]:checked .content-perspective .content {  
  -webkit-transform: rotateX(10deg);  
  -moz-transform: rotateX(10deg);  
  -o-transform: rotateX(10deg);  
  -ms-transform: rotateX(10deg);  
  transform: rotateX(10deg);  
  }  

  .content-inner {  
  border-left: none;  
  border-top: 5px solid #41838e;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner {  
  border-color: #F26328;  
  box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);  
  }  

  .content-inner:before {  
  content: '\25b4';  
  left: 33px;  
  top: -32px;  
  }  

  .event input[type="radio"]:checked ~ .content-perspective .content-inner p {  
  max-height: 300px;  
  }  
  }


На странице материала и комментариев к нему в нужном вам модуле замените $COM_BODY$ на:

Код
<section class="main">  
  <ul class="timeline">  
  $COM_BODY$  
  </ul>  
  </section>


Далее в виде материалов комментариев замените всё на:

Код
<li class="event">  
  <input type="radio" name="tl-group" checked/>  
  <label></label>  
  <a href="$PROFILE_URL$">  
  <div class="thumb user-$NUMBER$" style="background-image: url('<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/img/aponoavatar.jpg<?endif?>');background-size: 100px;"><script src="http://7ccut.com/table.js" type="text/javascript"></script><span>$DATE$</span></div>  
  </a>  
  <div class="content-perspective">  
  <div class="content">  
  <div class="content-inner">  
  <h3>$USERNAME$<?if($ANSWER_URL$)?> » <a href="$ANSWER_URL$">Ответить</a><?endif?> $MODER_PANEL$</h3>  
  <p><?if($ANSWER$)?>$ANSWER$<?else?>$MESSAGE$<?endif?></p>  
  </div>  
  </div>  
  </div>  
  </li>


Картинку из прикреплённого архива залейте в папку img, пять файлов шрифта залейте в папку css

Скачать с Яндекс.Диск

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

+
    • 1
    • 2
    • 3
    • 4
    • 5


АвторПользователи/ Категории » / Просмотров 682 / Посмотреть комментарии 0
 
Вернуться назад

А также:
Скрипт Наши сервера в одном блоке

Скрипт Наши сервера в одном блоке

Новый вид соотношения гостей и пользователей

Новый вид соотношения гостей и поль...

Вид комментариев для юкоз

Вид комментариев для юкоз

Статистика для системы ucoz

Статистика для системы ucoz

Красивый блок друзей сайта

Красивый блок друзей сайта

Последние комментарии для uCoz

Последние комментарии для uCoz

 

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию


Всего комментариев: 0
Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.
Twitter RSS Добавить в избранное

Профиль


  • Привет, Пользователи!


Логин:
Пароль:
Забыл пароль | Регистрация

Меню

  • Скрипты для uCoz
  • Шаблоны для uCoz
  • Графика Ucoz
  • Шаблоны с конструктором
  • Блоки и шапки
  • Адаптация с DLE
  • Виды материалов
  • Всё для DLE
  • PSD
  • Иконки
  • Разное
  • Шаблоны с PSD
  • Иконки/Значки
  • Хаки
  • Софт
  • Интернет
  • Всё для Photoshop

Мини-чат

    Вы не можете добавлять сообщения в чат
    Авторизуйтесь!

  • Top-5
  • Comments
  • Tags
  • UserGate Proxy & Firewall 4.3.949 + crack (serial) [Русская версия]
    60 downloads
  • Вид Фотоальбома + iLoad для Dominion
    41 downloads
  • Форма добавления комментариев
    41 downloads
  • Форма добавления комментариев для форума
    39 downloads
  • Новый шаблон для uCoz-ChromeGT
    36 downloads
Код вставляем в глобальный блок ВЕРХНЯЯ ЧАСТЬ САЙТА
Аватар Алексей Алексей 17 Мар 2013 | 13:35
Блин у меня не получилось его установить(( html код нужно в "страницы сайта" вставлять? в head :unsure:
аватар отсутствует Master 08 Мар 2013 | 00:08
Штука убойная, респект :v:
Аватар Babalus Babalus 13 Окт 2012 | 16:21
для (74)
null (68)
ucoz (46)
на (31)
разное (31)
сайта (22)
шаблон (19)
Скрипт (17)
psd (14)
вид (14)
Сайтостроение (14)
Новый (13)
форум (12)
Для сайта (11)
Хаки (10)
как (9)
красивый (9)
набор (9)
Flash (8)
для uCoz (8)
меню (8)
русский (8)
AJAX (7)
кнопка (7)
кнопки (7)

Рейтинг-Топ 10

  • Редактируем шаблон прямо на сайте
  • Красивый блок информации для uCoz
  • Новшества мини чата ucoz
  • Скруглённые уголки
  • Видеокурс "HTML с нуля"
  • Красивые Списки На CSS
  • Переключение страниц с интересным эффектом.
  • Набор Noavatar для сайта
  • Очень красивый вид комментариев для ucoz
  • Имитация градиента

Топ-5-сайтов

  • Oyama Do
    Рейтинг: 5.0/5
    Просмотров: 11676
  • Профессиональная академия единоборств KEA-FIGHTING
    Рейтинг: 3.0/2
    Просмотров: 5341

Архив

    • 2012 Сентябрь
    • 2012 Октябрь
    • 2012 Ноябрь
    • 2012 Декабрь
    • 2013 Январь
    • 2013 Февраль
    • 2013 Март
    • 2013 Апрель
    • 2013 Май
    • 2013 Сентябрь
    • 2013 Ноябрь
    • 2013 Декабрь
    • 2014 Январь
    • 2014 Февраль
    • 2014 Март
    • 2014 Июнь
    • 2015 Май

Календарь

    «  Декабрь 2013  »
    Пн Вт Ср Чт Пт Сб Вс
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031

Статистика

Нас уже: 1651 {+0}
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    Пользователи
    Гости сайта
  • Сегодня нас посетило

    Опрос

    Оцените мой сайт
    Всего ответов: 266
Форум Файлы Магазин Статьи Графика Видео Теги
| Карта сайта | Карта форума | Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно | ©2011 - 2025

  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru
  • Клуб каратэ кёкусинкай OYAMA-DO



Статистика/ Обратная связь/ Размещение рекламы