• 2292
  • 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.Вроде все понятно,просто комбинируй классы и получай эффекты,если что не понятно пишите в комментариях.

Можешь почитать и вот эту статейку "HTML 5 теги"

mistakes

Это тоже интересно

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

Ваше мнение

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

----