Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 8 - сентября Изображения
4733 - 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.Вроде все понятно,просто комбинируй классы и получай эффекты,если что не понятно пишите в комментариях.

Можешь почитать и вот эту статейку "Хочу кнопку submit вне формы"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [15]
  • Гости: [14]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 33
  • Генерация страницы: 0.72сек
  • Потребление памяти: 6.275 Mb 
  •   Яндекс.Метрика