Приветствую Вас Прохожий | RSS

Понедельник, 13.05.2024, 23:29

Меню сайта

Гостевая сайта

РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА

Категории раздела

Скрипты блоки и шапки [337]

Скрипты Вид новостей [366]

Скрипты php для ucoz [47]

Скрипты для форума [186]

Скрипты информеры [118]

Скрипты Разное [1105]

Мини-чат

Все вопросы задаем в форуме,
здесь они игнорируются!

Блок спам рекламы

Сайт села Екатерининско* .

Фильмы, сериалы торрент .

НОВИНКИ 2019 В FULLHD 4* .

Лучшее Хип-Хоп радио St* .

ФИЛЬМЫ ОНЛАЙН В HD! .

Облачный майнинг HF18BD* .

Сайт за 6000 wmr .

http://ucozon.ru/forum/* .

Lineagw 2: Revolution .

Фильмы на планшет торре* .

Добавлять могут только пользователи зарегистрированные 15 суток.

Статистика

Онлайн всего: 2

Гостей: 2

Пользователей: 0

Кто нас сегодня посетил
Статистика посетителей
Подписка на новости
День рождения

Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

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

Думаю каждый сайт который представляет услуги должен их рекомендовать, поэтому такие таблички будут показывать вашу деятельность и что в нее включено.
Есть 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, шестой пример

Пример:
было

Код

стало

Код

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

Автор\Источник: http://demo.ugarts.ru/
Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 287.6 Kb

Похожие новости на нашем сайте

Коментарий к новости

Всего комментариев: 3

Порядок вывода комментариев:

-1

1 SlowMotion Дата: 10.11.2014 Время: 00:57 [№ 15384] [Материал]

за новость 4, за разъяснения 2

2 krixys Дата: 10.11.2014 Время: 12:41 № 1 [№ 15385] [Материал]

Все хорошо разъяснено, просто надо CSS получше знать, а жевать куда еще больше

3 SlowMotion Дата: 10.11.2014 Время: 18:37 № 2 [№ 15386] [Материал]

омг.. я вас умоляю...имхо у вас тут больше html чем css...
разжевано может и не плохо, но надо с умом рассказывать, ибо новичкам ничего не понятно будет 100% (судя по "Тут все ясно и без меня"...)
мои вам советы: во-первых, учитесь воспринимать критику конструктивно, во-вторых, юзайте спойлеры