Приветствую Вас Прохожий | RSS Вторник, 06.12.2016, 03:44
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 6
Гостей: 5
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для 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 работали у вас пишем следующий код:
Код

<!-- variant 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><!-- 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 и делаю это вставивши в 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, шестой пример


Пример:
было
Код
<div id="ptc_6" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space">

стало
Код
<div id="ptc_6" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller ptc-no-space buzz-out">

Это все будет хорошо смотреться в "умелых ручках", поэтому используйте их по уму, спасибо за внимение
Автор\Источник: http://demo.ugarts.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 287.6Kb
Просмотров: 2247 | Комментарии: 3 | Рейтинг: 3.3/6 | |Категория: Скрипты блоки и шапки | Добавил: krixys | Дата: 09.11.2014 | Скачали: 1
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 3
-1   Спам
1 SlowMotion   Дата: 10.11.2014  Время: 00:57   [№ 15384]
за новость 4, за разъяснения 2

2 krixys   Дата: 10.11.2014  Время: 12:41   1 [№ 15385]
Все хорошо разъяснено, просто надо CSS получше знать, а жевать куда еще больше

+1   Спам
3 SlowMotion   Дата: 10.11.2014  Время: 18:37   2 [№ 15386]
омг.. я вас умоляю...имхо у вас тут больше html чем css...
разжевано может и не плохо, но надо с умом рассказывать, ибо новичкам ничего не понятно будет 100% (судя по "Тут все ясно и без меня"...)
мои вам советы: во-первых, учитесь воспринимать критику конструктивно, во-вторых, юзайте спойлеры


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru