Новости Joomla

Новогодние скидки от Nevigen.com

Новогодние скидки от Nevigen.com

Рады сообщить о специальном предложении от Nevigen, разработчика расширений для JoomShopping.

Astroid обновился до версии 3.3.7!

Astroid обновился до версии 3.3.7!

Astroid — это мощный фреймворк для дизайнеров и разработчиков, позволяющий создавать адаптивные, быстрые и надежные веб-сайты и шаблоны на базе Joomla.

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

👩‍💻 Как тестировать Joomla PHP-разработчику? Компонент Patch tester.Joomla - open source PHP-фреймворк с готовой админкой. Его основная разработка ведётся на GitHub. Для того, чтобы международному сообществу разработчиков было удобнее тестировать Pull Requests был создан компонент Patch Tester, который позволяет "накатить" на текущую установку Joomla именно те изменения, которые необходимо протестировать. На стороне инфраструктуры Joomla для каждого PR собираются готовые пакеты, в которых находится ядро + предложенные изменения. В каждом PR обычно находятся инструкции по тестированию: куда зайти, что нажать, ожидаемый результат. Тестировщики могут предположить дополнительные сценарии, исходя из своего опыта и найти баги, о которых сообщить разработчику. Или не найти, и тогда улучшение или исправление ошибки быстрее войдёт в ядро Joomla. Напомню, что для того, чтобы PR вошёл в ядро Joomla нужны минимум 2 положительных теста от 2 участников сообщества, кроме автора. Видео на YouTubeВидео на VK ВидеоВидео на RuTubeКомпонент на GitHub https://github.com/joomla-extensions/patchtester@joomlafeed#joomla #php #webdev #community

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

andrey222

  • Захожу иногда
  • 65
  • 0 / 1
css3 animation не отображается в Chrome и Opera
« : 11.02.2014, 23:00:03 »
Всем привет! Делаю сайт http://vash-dom76.ru
На главной странице в верху блока с контентом вставляю html-код, на который прикрепил стили с сайта образца (http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index2.html), немного мной подправленные.

В результате в последних версиях браузеров Mozilla Firefox и Internet Explorer все работает корректно, а в в последних версиях Google Chrome и Opera анимации вообще не происходит.

Пробовал добавлять
 -o-
 -webkit-
к animation, animation-delay (так же к text-shadow и opacity на всякий случай) - не помогает.
 
Если кто знает решение - прошу помочь. Заранее благодарю!
Записан
*

andrey222

  • Захожу иногда
  • 65
  • 0 / 1
Re: css3 animation не отображается в Chrome и Opera
« Ответ #1 : 12.02.2014, 01:03:39 »
Код постоянно пробую переделать. Прикрепляю тот, который сейчас так отображается.

Код
.css3-poyavlenie { width:830px; height: 80px;}
.css3-poyavlenie p {
text-align:center!important;
 
   position:absolute;

	margin-top:1px!important;
    font-size: 50px;
    width: 100%;
	display:block;
    text-align: center;
    color: transparent;
    animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
}

.css3-poyavlenie p.text-1 {
    animation-delay: 0s;
	
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	
}

.css3-poyavlenie p.text-2 {
    animation-delay: 3s;
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
}

.css3-poyavlenie p.text-3 {
    animation-delay: 6s;
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
   -ms-animation-delay: 6s;
}
.css3-poyavlenie p.text-4 {
   animation-delay: 9s;
     -moz-animation-delay: 9s;
     -webkit-animation-delay: 9s;
	 -ms-animation-delay: 9s;
}

.css3-poyavlenie p.text-5 {
    animation: none;
  -moz-animation: none;
    -webkit-animation: none;
	-ms-animation: none;
    text-shadow: 0px 0px 0px #1467A4;
}
.css3-poyavlenie p.text-5 span {
   animation: blurFadeIn 2s ease-in 12s backwards;
   -moz-animation: blurFadeIn 2s ease-in 12s backwards;
   -webkit-animation: blurFadeIn 2s ease-in 12s backwards;
   -ms-animation: blurFadeIn 2s ease-in 12s backwards;
   text-shadow: 0px 0px 0px #1467A4;
	
}
.css3-poyavlenie p.text-5 span:nth-child(2) {
    animation-delay: 13s;
    -moz-animation-delay: 13s;
    -webkit-animation-delay: 13s;
    -ms-animation-delay: 13s;
}

@keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	-moz-opacity: 0;
       }
    20%,75%{
        opacity: 1;
	-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
	      }
    100%{
        opacity: 0;
	-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@keyframes blurFadeIn{
    0%{
        opacity: 0;
	-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
	-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
	-moz-opacity: 1;
	text-shadow: 0px 0px 0px #1467A4;
		     
    }
}
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: css3 animation не отображается в Chrome и Opera
« Ответ #2 : 12.02.2014, 01:53:41 »
@keyframes, @-webkit-keyframes, @-moz-keyframes, @-o-keyframes и т.д. попробуйте вендорные префиксы
Записан
*

andrey222

  • Захожу иногда
  • 65
  • 0 / 1
Re: css3 animation не отображается в Chrome и Opera
« Ответ #3 : 12.02.2014, 12:25:36 »
Ни то ни другое не помогает.
Записан
*

andrey222

  • Захожу иногда
  • 65
  • 0 / 1
Re: css3 animation не отображается в Chrome и Opera
« Ответ #4 : 14.02.2014, 00:21:14 »
Все получилось! Заработал такой код:

Код
 
.css3-poyavlenie { width:830px; height: 80px;}
.css3-poyavlenie p {
text-align:center!important;
 
   position:absolute;

	margin-top:1px!important;
    font-size: 50px;
    width: 100%;
	display:block;
    text-align: center;
    color: transparent;
    animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	@keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-webkit-keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-moz-keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-o-keyframes-animation: blurFadeInOut 3s ease-in backwards;
}

.css3-poyavlenie p.text-1 {
    animation-delay: 0s;
	@-o-keyframes-animation-delay: 0s;
	@-moz-keyframes-animation-delay: 0s;
	@keyframes-animation-delay: 0s;
	@-webkit-keyframes-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	
}
.css3-poyavlenie p.text-2 {
    animation-delay: 3s;
	@-o-keyframes-animation-delay: 3s;
	@-moz-keyframes-animation-delay: 3s;
	@keyframes-animation-delay: 3s;
	@-webkit-keyframes-animation-delay: 3s;
   
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
}
.css3-poyavlenie p.text-3 {
    animation-delay: 6s;
	@-o-keyframes-animation-delay: 6s;
	@-moz-keyframes-animation-delay: 6s;
	@keyframes-animation-delay: 6s;
	@-webkit-keyframes-animation-delay: 6s;
   
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
	-ms-animation-delay: 6s;
}
.css3-poyavlenie p.text-4 {
   animation-delay: 9s;
  @-o-keyframes-animation-delay: 6s;
	@-moz-keyframes-animation-delay: 6s;
	@keyframes-animation-delay: 6s;
	@-webkit-keyframes-animation-delay: 6s;
   
    -moz-animation-delay: 9s;
     -webkit-animation-delay: 9s;
	 -ms-animation-delay: 9s;
}


.css3-poyavlenie p.text-5 {
    animation: none;
	@-o-keyframes-animation: none;
	@-moz-keyframes-animation: none;
	@keyframes-animation: none;
	@-webkit-keyframes-animation: none;
   
    -moz-animation: none;
    -webkit-animation: none;
	-ms-animation: none;
    text-shadow: 0px 0px 0px #1467A4;
}
.css3-poyavlenie p.text-5 span {
    animation: blurFadeIn 2s ease-in 12s backwards;
	@-o-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@-moz-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@-webkit-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
   
    -moz-animation: blurFadeIn 2s ease-in 12s backwards;
    -webkit-animation: blurFadeIn 2s ease-in 12s backwards;
	-ms-animation: blurFadeIn 2s ease-in 12s backwards;
    text-shadow: 0px 0px 0px #1467A4;
	
}
.css3-poyavlenie p.text-5 span:nth-child(2) {
    animation-delay: 13s;
	@-o-keyframes-animation-delay: 13s;
	@-moz-keyframes-animation-delay: 13s;
	@keyframes-animation-delay: 13s;
	@-webkit-keyframes-animation-delay: 13s;
    
    -moz-animation-delay: 13s;
    -webkit-animation-delay: 13s;
	-ms-animation-delay: 13s;
}



@keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}

@-moz-keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@-moz-keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}

@-webkit-keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@-webkit-keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Свойство letter-spacing по-разному отображается на разных мониторах

Автор V@lentin

 Ответов: 1
Просмотров: 1449 		Последний ответ 19.07.2018, 20:53:29
от Zelyonkin
фон страницы в Яндекс браузере и Chrome в планшете

Автор a7575859

 Ответов: 0
Просмотров: 1792 		Последний ответ 21.07.2016, 16:20:56
от a7575859
Неправильно отображается шаблон на мобильных устройствах

Автор hyperion

 Ответов: 1
Просмотров: 1483 		Последний ответ 14.01.2016, 18:33:15
от arma
Логотип в мобильной версии не отображается

Автор mashut

 Ответов: 4
Просмотров: 4457 		Последний ответ 17.09.2015, 22:52:38
от Cybervizor
Неверно отображается сайт на Firefox

Автор bobokhon1998

 Ответов: 19
Просмотров: 2545 		Последний ответ 08.09.2015, 21:10:53
от bobokhon1998