Таблички услуг + Hover эффекты для uCoz
827материалов
228тем на форуме
3004комментария
6158пользователей

Таблички услуг + Hover эффекты для uCoz

Думаю, каждый сайт, который представляет услуги, должен их рекомендовать, поэтому такие таблички будут показывать вашу деятельность, и что в нее включено.
Есть 2 варианта табличек и 11 hover эффектов, и даже если таблички вам не понадобятся, то эффекты всегда будут нужны, и их можно применять к любому элементу сайта, от шапки до картинки, кнопки и т.п.
Сейчас возьмем пример с демо и разберем, что к чему.

1 Вариант
Код
<!-- Первый блок -->   
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >   
   <div class="ptc-header">   
   <div class="ptc-note-icon"></div>   
   <div class="ptc-stars">   
   <span class="fa fa-star"></span>   
   </div>   
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>   
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >   
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>   
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>   
   </div><div class="ptc-content">   
   <ul class="ptc-features">   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   </ul>   
   </div>   
</div>   
<!-- конец первого блока -->

Обратите внимание
Цвет таблички зависит от кода
id="ptc_1"
изменив цифру от 1 до 6 вы получаете разное цветовое оформление таблиц.

Количество звезд зависит от количества тегов <span class="fa fa-star"></span>, находящихся в этом диве:
Код
<div class="ptc-stars"> </div>

Если вы хотите, чтобы между таблицами были отступы, то нужно убрать из класса главного дива слово ptc-no-space
Код
<div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >

ptc-smaller в стиле отвечает за пропорциональное уменьшение таблички на 15%, ничего не изменяет, кроме габаритов
Остальные стили в классе
col-lg-2 col-md-4 col-sm-6 col-xs-12
отвечают за разрешение таблицы в разных экранах (проверить можно в демо меняя масштаб, например, с помощью клавиш Ctrl + "+/-" или зажав на Ctrl + колесико мыши)

Установка HTML для варианта 1
Код
<div class="ptc-editor">   
   <div class="ptc-tables original ui-sortable standard ui-sortable-disabled" id="sortable" style="font-family: 'Open Sans'; font-size: 47.5%;">   
   <!-- Первый блок -->   
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >   
   <div class="ptc-header">   
   <div class="ptc-note-icon"></div>   
   <div class="ptc-stars">   
   <span class="fa fa-star"></span>   
   </div>   
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>   
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >   
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>   
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>   
   </div><div class="ptc-content">   
   <ul class="ptc-features">   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   </ul>   
   </div>   
</div>   
<!-- конец первого блока -->   
<!-- Второй блок -->   
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space" >   
   <div class="ptc-header">   
   <div class="ptc-note-icon"></div>   
   <div class="ptc-stars">   
   <span class="fa fa-star"></span> <span class="fa fa-star"></span><!-- 2 звезды, прописано 2 раза - <span class="fa fa-star"></span> -->   
   </div>   
   <h1 class="ptc-title" >БЕСПЛАТНО</h1>   
   <div class="ptc-arrow-down ptc-first"></div></div><div class="ptc-price" >   
   <span class="ptc-total"><sup class="ptc-currency">$</sup>00.00</span><p class="ptc-text">МЕСЯЦ</p>   
   <a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a>   
   </div><div class="ptc-content">   
   <ul class="ptc-features">   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   <li class="ptc-feature"><a href="/" >ССЫЛКА</a></li>   
   </ul>   
   </div>   
</div>   
<!-- конец второго блока --><!-- так до 6 -- >   
</div></div>

Установка HTML для варианта 2
Код
<div class="ptc-editor">   
   <div class="ptc-tables original ui-sortable plain ui-sortable-disabled" id="sortable" style="font-family: 'Open Sans'; font-size: 47.5%;">   
   <!-- Первый блок -->   
   <div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space">   
<div class="ptc-header"><div class="handle">   
<div class="handle-bg"></div></div><h1 class="ptc-title" >БЕСПЛАТНО</h1>   
<span class="ptc-price ptc-total"><sup class="ptc-currency" >$</sup><span >00.00</span>   
</span><p class="ptc-text">МЕСЯЦ</p>   
   <div class="ptc-stars">   
<span class="fa fa-star"></span>   
   </div></div>   
   <div class="ptc-footer"><a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a></div>   
<div class="ptc-content">   
<ul class="ptc-features">   
<li class="ptc-feature"><a href="#">ССЫЛКА</a></li>   
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>   
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>   
</ul></div></div>   
<!-- конец первого блока -->   
<!-- Второй блок -->   
<div id="ptc_2" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space">   
<div class="ptc-header"><div class="handle">   
<div class="handle-bg"></div></div><h1 class="ptc-title" >БАЗОВЫЙ</h1>   
<span class="ptc-price ptc-total"><sup class="ptc-currency" >$</sup><span >02.00</span>   
</span><p class="ptc-text">МЕСЯЦ</p>   
   <div class="ptc-stars">   
<span class="fa fa-star"></span><span class="fa fa-star"></span>   
   </div></div>   
   <div class="ptc-footer"><a class="ptc-button ptc-show-inline" href="#">ЗАКАЗАТЬ</a></div>   
<div class="ptc-content">   
<ul class="ptc-features">   
<li class="ptc-feature"><a href="#">ССЫЛКА</a></li>   
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>   
<li class="ptc-feature"><a href="#" >ССЫЛКА</a></li>   
</ul></div></div>   
   <!-- конец второго блока --><!-- так же до шестого-->

Установка CSS:
подключаем CSS-библиотеку перед тегом </head>:
Код
<link rel='stylesheet' id='style-css' href='/g-table/g-tables.css' type='text/css' media='all' />

Установка ховер эффектов:
  • Чтобы установить ховер-эффект, нужно в класс главного дива добавить следующие стили:
  • wobble-vertical - вариант 1, второй пример
  • wobble-horizontal - вариант 1, третий пример
  • wobble-to-bottom-right - вариант 1, четвертый пример
  • wobble-to-top-right - вариант 1, пятый пример
  • grow - вариант 1, шестой пример
  • shrink - вариант 2, первый пример
  • rotate - вариант 2, второй пример
  • grow-rotate - вариант 2, третий пример
  • float - вариант 2, четвертый пример
  • sink - вариант 2, пятый пример
  • buzz-out - вариант 2, шестой пример


Например:
Код
<div id="ptc_6" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller buzz-out">

Это все будет хорошо смотреться в "умелых ручках", поэтому используйте их по уму.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.11.2014 в 21:41
Материал просмотрен: 1588 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта