Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Таблички услуг + 11 Hover эффектов

Таблички услуг + 11 Hover эффектов

Опубликовал: Krixys
Категория: Разные скрипты
Дата: 14 Декабря 2025 в 13:03

0 голосов

Думаю каждый сайт который представляет услуги должен их рекомендовать, поэтому такие таблички будут показывать вашу деятельность и что в нее включено.
Есть 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>
между тегами
Код
[b]<div class="ptc-stars"> </div>
[/b]
Если вы хотите чтобы между таблицами были отступы то вы убираете
Код
ptc-no-space
с класса
ptc-smaller в стили отвечает за пропорциональное уменьшение таблички на 15% ничего не изменяет кроме габаритов
Остальные стили в классе
Код
col-lg-2 col-md-4 col-sm-6 col-xs-12
отвечают за разрешение таблицы в разных экранах и поэтому я их всех вписал сюда (проверить можно в демо с помощью клавишь Ctrl + "+/-" или зажав на Ctrl + колесико мыши)

Чтобы таблиц варианта 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%;">
  <!-- так до 6 -- >
</div></div>
<!-- variant 1 end>

Тут все ясно и без меня, тут отвечает за шрифт и классы которые держат 6 таблиц вместе

Установка 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>
  </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 и делаю это вставивши в CSS сайта

Код

@import "/table/ugarts.css" 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, шестой пример

Пример:
было

Код

стало

Код

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

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1109 « Назад

Комментарии пользователей

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

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Таблички услуг + 11 Hover эффектов

Таблички услуг + 11 Hover эффектов

Комментарии пользователей