Форум русской поддержки Joomla!® CMS
11.12.2016, 11:56:30 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как пользоваться таким добром? Есть куча hover эффектов. Как правильно их ставить?

 (Прочитано 406 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Dannik
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 108


« : 10.10.2015, 20:15:49 »

Всем привет! Добрый человек скинул ссылку - http://gudh.github.io/ihover/dist/ на кучу ховер эффектов, но стыдно признаться я не особо разбираюсь в этом  Cry . Вот к примеру код от туда -
<div class="ih-item circle effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->

Я куда должен его сунуть? Открыть редактор и поставить на страницу, или засунуть его в  любой файл CSS?
Вот выдрал кусок со своей страницы-
<p style="margin: 0px 0px 21px; padding: 0px; font-size: 16px; line-height: 22px; color: #303030; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><span style="color: #800000;"><b><img style="margin: 10px; float: left;" src="images/compred.png" alt="" width="493" height="333" />Прочитав эту статью, Вы узнаете</b></span></p>

Как бы вы сделали? Приведите просто пример пожалуйста! Да я знаю что надо учить CSS, уже начал, но хотелось бы увидеть красивый эффект для собственной мотивации! Заранее благодарен  Smiley

 
Записан
NewUsers
Давно я тут
****

Репутация: +32/-0
Offline Offline

Пол: Мужской
Сообщений: 394


« Ответ #1 : 10.10.2015, 20:30:33 »

Здесь не только надо код вставить, но и стили тоже надо подключать...
Код
<link rel="stylesheet" href="http://gudh.github.io/ihover/dist/styles/main.css"/>
Записан
Dannik
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 108


« Ответ #2 : 10.10.2015, 20:49:08 »

Здесь не только надо код вставить, но и стили тоже надо подключать...
Код
<link rel="stylesheet" href="http://gudh.github.io/ihover/dist/styles/main.css"/>
А можно на примере показать? Если не сложно.
Записан
NewUsers
Давно я тут
****

Репутация: +32/-0
Offline Offline

Пол: Мужской
Сообщений: 394


« Ответ #3 : 10.10.2015, 20:57:27 »

А можно на примере показать? Если не сложно.

Пожалуйста!

* primer.zip (1.02 Кб - загружено 30 раз.)
Записан
midav
Живу я здесь
******

Репутация: +113/-1
Offline Offline

Пол: Мужской
Сообщений: 946



« Ответ #4 : 11.10.2015, 12:04:41 »

Зачем подключать main.css ? Для эффектов надо подключить стили ihover , это файл ihover.css или ihover.min.css . Зачем грузить лишние стили ?

<div class="ih-item circle effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->

Я куда должен его сунуть? Открыть редактор и поставить на страницу, или засунуть его в  любой файл CSS?
Вот выдрал кусок со своей страницы-
<p style="margin: 0px 0px 21px; padding: 0px; font-size: 16px; line-height: 22px; color: #303030; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><span style="color: #800000;"><b><img style="margin: 10px; float: left;" src="images/compred.png" alt="" width="493" height="333" />Прочитав эту статью, Вы узнаете</b></span></p>
 

Сунуть это можно куда Вам надо . Главное соблюсти разметку и заменить адрес картинки на свой .
Выдранный кусок кода с Вашей страницы выглядит жутковато если честно . Его надо удалить и взять только адрес картинки .
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet