Новости Joomla

NorrCompetition 3.0 — новые возможности компонента конкурсов и голосований для Joomla 6

Релиз NorrCompetition 3.0 — крупное обновление расширения для проведения конкурсов и голосований в Joomla.

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

Релиз безопасности Joomla 6.1.1 и Joomla 5.4.6

Проект Joomla! рад сообщить о выходе Joomla 6.1.1 и Joomla 5.4.6. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

В открытый доступ выложен видео-курс Дмитрия Гончарова по созданию интернет-магазина на связке Joomla + JoomShopping. Видеоуроки содержат пошаговые инструкции от регистрации хостинга до особенностей вёрстки, настройки способов оплаты и доставки.

В видео фигурирует JoomShopping 4 и Joomla 3, однако JoomShopping довольно консервативный компонент и многие способы и подходы в нём не менялись годами, поэтому данные видео могут быть по прежнему полезны.

Смотреть видео-курс

@joomlafeed

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 5915 Просмотров
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
hover-эффекты при помощи CSS 3
« : 11.11.2011, 22:25:08 »
Да бы снизить нагрузку на страницу, решил использовать не js а обойтись возможностями css3:
Хотел сделать вот такую http://www.webmasters.by/articles/html-coding/467-original-hover-effects-with-css3.html.
Все сделано как описано.
Но что-то не чего не пашет.


В какую CSS шаба не засовывай не пашет.
В CSS не селен, прошу помощи, заранее спасибо.

joomla 1.7
шаб: yootheme spark
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #1 : 11.11.2011, 22:33:41 »
С какого браузера тестируете?Когда задаете вопрос, прикладывайте пожалуйста ссылочку на свой сайт с проблемой.Либо код.А еще лучше целиком страницу со стилями в архиве.Или предлагаете угадать почему у Вас ничего не выходит?Кроме "руки кривые" в таком случае ничего не ждите в ответ
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #2 : 12.11.2011, 00:20:09 »
Дико извиняюсь.
1)Firefox, opera, chrome.
2)Сайт http://slki.ru/9Ph
3)Примеры, мной использован #9: http://www.webmasters.by/images/articles/css3-hover-effects/OriginalHoverEffects.zip
4) на данный момент код находиться в css/system.css
Код
/* NINTH EXAMPLE*/
.view-ninth .mask-1, .view-ninth .mask-2 {
    background-color: rgba(0, 0, 0, 0.5);
    height: 361px;
    width: 361px;
    background: rgba(119, 0, 36, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0;
    -webkit-transform: rotate(56.5deg) translateX(-180px);
    -moz-transform: rotate(56.5deg) translateX(-180px);
    -o-transform: rotate(56.5deg) translateX(-180px);
    -ms-transform: rotate(56.5deg) translateX(-180px);
    transform: rotate(56.5deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0;
    -webkit-transform: rotate(56.5deg) translateX(180px);
    -moz-transform: rotate(56.5deg) translateX(180px);
    -o-transform: rotate(56.5deg) translateX(180px);
    -ms-transform: rotate(56.5deg) translateX(180px);
    transform: rotate(56.5deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.view-ninth .content {
    background: rgba(0, 0, 0, 0.9);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
    display: none;
}
.view-ninth:hover .content {
    height: 120px;
    width: 300px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 40px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
    -webkit-transform: rotate(56.5deg) translateX(1px);
    -moz-transform: rotate(56.5deg) translateX(1px);
    -o-transform: rotate(56.5deg) translateX(1px);
    -ms-transform: rotate(56.5deg) translateX(1px);
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    -webkit-transform: rotate(56.5deg) translateX(-1px);
    -moz-transform: rotate(56.5deg) translateX(-1px);
    -o-transform: rotate(56.5deg) translateX(-1px);
    -ms-transform: rotate(56.5deg) translateX(-1px);
    transform: rotate(56.5deg) translateX(-1px);
}
5) после включения плагина "система-кэш" и очистки кэша на хостинге вот аткой результат:

6) спустя 5 минут слетела кодировка. пришлось отключить плагин
« Последнее редактирование: 12.11.2011, 00:54:33 от DragDG »
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #3 : 12.11.2011, 15:49:31 »
Для блока с картинкой задайте размеры.По части css3 все работает как надо
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #4 : 12.11.2011, 18:21:49 »
Беда в том что не знаю, где именно задать
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #5 : 12.11.2011, 19:21:17 »
Код
div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
Для этого блока добавьте
Код
width: ...px; height:...px;
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #6 : 12.11.2011, 20:10:05 »
добавил не чего не изменилось
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #7 : 12.11.2011, 20:29:37 »
А ничего и не изменилось.
Код
div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
Для начала отключите GZip сжатие, или что там у Вас используется для оптимизации.Потом включите, когда все сделаете.И второй момент
Код
<div class="box-1 deepest" style="min-height: 972px;">
style="min-height: 972px;" уберите
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #8 : 12.11.2011, 20:35:25 »
хм... отключив сжатие, действительно изменился размер. но все равно не работает
+ модуль твиттера внизу тоже изменил свой размер
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #9 : 12.11.2011, 20:51:52 »
Сжатие включается лишь тогда, когда без него все работает как часы.Потому что не каждый подобный плагин и далеко не на каждом сайте работает корректно.Точнее не каждая страница со сжатыми стилями и жабаскриптом работает правильно.Грамотно оптимизировать страницу - это целая наука.

Теперь, когда отображение поддается тестированию, играйте со значениями высоты и ширины в тех блоках, которые Вы показали выше.Впрочем не только с шириной и высотой.
Например
Код
   -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
отвечают за стартовое местоположение перемещающегося блока.
Код
transform: rotate(56.5deg) translateX(180px);
Это поворот относительно центральной оси и смещение по горизонтали.Значение deg обозначает градусы наклона.Можно задавать как положительные значения, так и отрицательные зо знаком "-"
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #10 : 12.11.2011, 23:35:59 »
спасибо!
поиграюсь.
но как быть с модулями? поменяв ширину высоту для hover, поменялись еще несколько. как сделать так чтоб исключительно те моду ли что вверху имели фиксированный размер?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #11 : 12.11.2011, 23:49:42 »
Обрамить все позиции с ними в отдельные блоки и наследовать элементы через них.К примеру
Код
<div class="myBlock">позиция</div>
Код
.myBlock div.mod-box div.box-1 {
    background: none repeat scroll 0 0 #141516;
    border: 1px solid #222426;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 19px;
}
В этом случае стиль будет присвоен только содержимому myBlock
Записан
*

DragDG

  • Захожу иногда
  • 75
  • 1 / 0
Re: hover-эффекты при помощи CSS 3
« Ответ #12 : 13.11.2011, 16:25:03 »
Код
<div class="myBlock">позиция</div>
где прописывать эту строку?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: hover-эффекты при помощи CSS 3
« Ответ #13 : 14.11.2011, 07:43:25 »
В index.php вестимо.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Найти height. Прошу помощи

Автор EvaLifeTime

 Ответов: 17
Просмотров: 2120 		Последний ответ 21.11.2019, 21:03:22
от EvaLifeTime
[Решено] Прошу помощи - кособочит форму ввода

Автор zndm

 Ответов: 3
Просмотров: 1674 		Последний ответ 07.02.2017, 12:16:23
от zndm
:hover и :active {

Автор RicoID

 Ответов: 1
Просмотров: 1280 		Последний ответ 21.11.2016, 12:22:04
от darkghost
Как задать :hover{ и :active { Для одной кнопки?

Автор RicoID

 Ответов: 2
Просмотров: 3009 		Последний ответ 18.11.2016, 16:34:43
от ProtectYourSite
CSS Hover для картинки

Автор vitalid

 Ответов: 19
Просмотров: 1991 		Последний ответ 20.06.2016, 15:13:34
от vipiusss