Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 8 - сентября Изображения
4840 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот подыскал интересную статью и решил выложить у себя с подробным описанием настройки.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. с исходником,распаковываем и запускаем файл index.html,это для просмотра и выбора эффекта.
2.Закачиваем в папку с нашим шаблоном папку CSS и Font из исходника,там в папке CSS нам нужны только xoverlay.css и font-awesome.css,остальные файлы заливать не надо.
3.Подключаем в head наши стили

Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/xoverlay.css">
<link rel="stylesheet" href="{{ tpl_url }}/css/font-awesome.css">
4.Сама разметка представляет, что-то похожее на это:
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
...
...
...
</div>
</div>
</div>
</div>
5.Добавляем иконку или описание внутрь нашей разметки
1.Добавляем icon
Код:
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
2.Добавляем описание
Код:
<h2>Заголовок</h2>
<p>It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout</p>
<a class="x-more" href="#">Подробнее</a>
6.Форма иконок,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
...
...
</div>
</div>
</div>
</div>
7.Цвета иконок,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-3.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
...
...
</div>
</div>
</div>
</div>
8.Эффекты с описанием (текстом),

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
...
</div>
</div>
</div>
</div>
9.Эффекты с иконками,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data x-icon-top-bottom">
...
</div>
</div>
</div>
</div>
10.Вроде все понятно,просто комбинируй классы и получай эффекты,если что не понятно пишите в комментариях.

Можешь почитать и вот эту статейку "Опять не работает Флеш кнопка,достало!!!!"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4572 дня
  • Новостей: 567
  • Комменты: 257
  • Зарегистрированно : 672
  • Онлайн всего: [10]
  • Гости: [9]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.767сек
  • Потребление памяти: 5.175 Mb 
  •   Яндекс.Метрика