Хаки и Скрипты Next Generation CMS : Изображения, Текст и ссылки : Обалденные XOVERLAY CSS3 эффекты

irbees2008 Опубликовано - 8 - сентября Изображения

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

Можешь почитать и вот эту статейку "Вставка видео с Ютуба"

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

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