3D Аккордеон для uCoz


3D Аккордеон для uCoz

1661
10 из 10
Проголосовало: 1




  • Скачать с сервера
  • Скачать
  • Смотреть демо


Доброе время суток..

И так вот что пполучилось при использовании HTML и CSS

И того получился - "3D Аккордеон для uCoz"

И так как всегда все просто и понятно в установке

И так если вы скачалии архив, распаковуем

После создем в Файловом менеджмене папку (img) и загружаем туда все содиржимое папки.

И так теперь ставим между <head> и </head>

Code

<style>
  body {
  background: #D5DED9;
  font-family: Arial, Helvetica, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  }
  h1{
  font-size:330%;
  text-shadow:2px 2px 1px white;
  }
  p {
  line-height: 140%;
  font-size: 90%;
  }
  #accordion {
  margin: 100px;
  }
  #accordion article {
  -webkit-transform: perspective(900px) rotateY(60deg);
  -webkit-transition: all 0.7s ease-in-out;
  background: #fff;
  border: 1px solid #f3f3f3;
  box-shadow: 0px 5px 15px gray;
  float: left;
  height: 420px;
  margin-left: -180px;
  padding: 20px;
  width: 220px;
  }
  #accordion article:first-child {
  margin-left: 0px;
  }
  #accordion article img {
  float: left;
  padding: 0 10px 5px 0;
  }
  #accordion article:hover {
  -webkit-transform: perspective(0) rotateY(-10deg);
  margin: 0 140px 0 -60px;
  }
  </style>


Теперь ставим между <body> и </body>

Code

<div id="accordion">
  <article>
  <h2>Раздел 1</h2>
  <img src="img/uface1.jpg" width="100" height="88">
  <p>
  Всем доброе время суток. Для системы uCoz зделана новая фишка название которой - 3D Аккордеон, и это далеко не предел.
  </p>
  <p>
  Множество начинающих юзеров говорят что uCoz это так просто что бы порозвлекатся вить это далеко не так, на етой системе возможно зделать все при етом не платить не капеечки за серваки и так далие...
  </p>
  <p>
  Спасибо за ваше внемание, с уважением - LEKUS
  </p>
  </article>
  <article>
  <h2>Раздел 2</h2>
  <img src="img/uface2.jpg" width="100" height="75">
  <p>
  Всем день добрый. Меня звать Дима, мой ник в интернете - LEKUS.
  </p>
  <p>
  Я являюсь пользователем одним из клиентов системы uCoz в принципи как и каждый из вас, я люблю даный хостинг за то что он функционален, прост в использовании, и понятен каждому...
  </p>
  <p>
  Ну вобщемто как то вот так вот все. Спасибо за внемание что вы удилили даному разделу.
  </p>
  </article>
  <article>
  <h2>Раздел 3</h2>
  <img src="img/uface3.jpg" width="100" height="67">
  <p>
  3D Аккордеон, не является сложным програмированым скриптом или что то в етом роде. Даная модификация построена на HTML и CSS!
  </p>
  <p>
  Даный модуль сам по себе очень симпатичный, как на первый взглят так и на остальные))))) Если у вас есть какието вопросы не сисняемся задаем...
  </p>
  <p>
  С удовольствием попробую ответить на все вопросы.
  </p>
  </article>
  <article>
  <h2>Раздел 4</h2>
  <img src="img/uface4.jpg" width="100" height="75">
  <p>
  Ну вот как то вот так вот и получилось что появился - 3D Аккордеон, для нашего любимого хостинга uCoz.
  </p>
  <p>
  Ну вобщемто как то вот так вот все получилось. Если ты хоч создать больше "Разделов" так вперет тебе не кто не мешает как говорится все в твоих руках мой друг.
  </p>
  <p>
  Спасибо за просмотр даной модификации.
  </p>
  </article>
  </div>


Теперь установка с упрощеным вариантом заменой только текста...

Мтавим между <head> и </head>

Code

<link rel="stylesheet" type="text/css" href="http://uface.at.ua/demo/3daccordion/uf/style.css" />

Теперь ставим между <body> и </body>

<div id="accordion">
  <article>
  <h2>Раздел 1</h2>
  <img src="http://uface.at.ua/demo/3daccordion/uf/uface1.jpg" width="100" height="88">
  <p>
  Всем доброе время суток. Для системы uCoz зделана новая фишка название которой - 3D Аккордеон, и это далеко не предел.
  </p>
  <p>
  Множество начинающих юзеров говорят что uCoz это так просто что бы порозвлекатся вить это далеко не так, на етой системе возможно зделать все при етом не платить не капеечки за серваки и так далие...
  </p>
  <p>
  Спасибо за ваше внемание, с уважением - LEKUS
  </p>
  </article>
  <article>
  <h2>Раздел 2</h2>
  <img src="http://uface.at.ua/demo/3daccordion/uf/uface2.jpg" width="100" height="75">
  <p>
  Всем день добрый. Меня звать Дима, мой ник в интернете - LEKUS.
  </p>
  <p>
  Я являюсь пользователем одним из клиентов системы uCoz в принципи как и каждый из вас, я люблю даный хостинг за то что он функционален, прост в использовании, и понятен каждому...
  </p>
  <p>
  Ну вобщемто как то вот так вот все. Спасибо за внемание что вы удилили даному разделу.
  </p>
  </article>
  <article>
  <h2>Раздел 3</h2>
  <img src="http://uface.at.ua/demo/3daccordion/uf/uface3.jpg" width="100" height="67">
  <p>
  3D Аккордеон, не является сложным програмированым скриптом или что то в етом роде. Даная модификация построена на HTML и CSS!
  </p>
  <p>
  Даный модуль сам по себе очень симпатичный, как на первый взглят так и на остальные))))) Если у вас есть какието вопросы не сисняемся задаем...
  </p>
  <p>
  С удовольствием попробую ответить на все вопросы.
  </p>
  </article>
  <article>
  <h2>Раздел 4</h2>
  <img src="http://uface.at.ua/demo/3daccordion/uf/uface4.jpg" width="100" height="75">
  <p>
  Ну вот как то вот так вот и получилось что появился - 3D Аккордеон, для нашего любимого хостинга uCoz.
  </p>
  <p>
  Ну вобщемто как то вот так вот все получилось. Если ты хоч создать больше "Разделов" так вперет тебе не кто не мешает как говорится все в твоих руках мой друг.
  </p>
  <p>
  Спасибо за просмотр даной модификации.
  </p>
  </article>
  </div>


Естетствено мой текст меняем на свой....

Посмотреть демо можна - ЗДЕСЬ

НУ вобщемто и все установлено, удачного использования....

Спасибо за ваше ввнемание...

Релиз подготовил: LEKUS
Автор публикации: Загрузка
Загрузка
LeKcUs, это его n материал
Источник: http://uface.at.ua/
  • Всего комментариев: 1

GhostlyP
+2
GhostlyP написал: Написано 01 Апреля 2012 в 09:26
Комментарий №1
Прямая ссылка на демо:

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: