Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
dmfivanov721 (18.10.2020)
Aleksandr04071963 (22.09.2020)
ppippitto79 (12.09.2020)
oksanakisulka (04.09.2020)
frost154medium (12.08.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Цветные уведомление с прогрессбаром для ucoz
Цветные уведомление с прогрессбаром для ucoz
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Воскресенье, 20.09.2015, 23:51/ Сообщение №: 1

Больше скажу как приложение на ваш сайт и не более, эти Цветные уведомлений с прогрессбаром для uCoz вы можете создать для гостей сайта. И какой оттенок будет, все зависит от вас, здесь только несколько, но стили сделаю свое дело и вы можете привнести любую гамму. Хочется представить для вас ещё одно интересное решение для вашего сайта который вы создали или создадите в системе uCoz. Данное решение сможет для вас и ваших гостей сайта выводить любую информацию в весьма симпатичных и современных окошках. В данном материале мы рассмотрим и установим только три цветовых решений для вашего сайта ну а если вам нужен другой то вы всегда сможете сменить цвет используя стили которые предоставляются совместно с материалами.

В любое место где вам нужно ставите этот код:
Код
<a href="#" class="apo1">Яичное уведомление</a>   
<a href="#" class="apo2">Зелёное уведомление</a>   
<a href="#" class="apo3">Баклажанное уведомление</a>   
<section>   
<div class="tn-box tn-box-color-1">   
<p>Ложки нет!</p>   
<div class="tn-progress"></div>   
</div>   
<div class="tn-box tn-box-color-2">   
<p>Я просто зелёное уведомление!</</p>   
<div class="tn-progress"></div>   
</div>   
<div class="tn-box tn-box-color-3">   
<p>А я ленивая жопа, которая дольше всех сваливает с экрана</p>   
<div class="tn-progress"></div>   
</div>   
</section>

В самый низ вашего css стилей вставляйте:
Код
.tn-box {   
width: 360px;   
position: relative;   
margin: 0 auto 20px auto;   
padding: 25px 15px;   
text-align: left;   
border-radius: 5px;   
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);   
opacity: 0;   
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   
filter: alpha(opacity=0);   
cursor: default;   
display: none;   
}   
.tn-box p {   
font-weight: bold;   
font-size: 16px;   
margin: 0;   
padding: 0 10px 0 60px;   
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);   
}   
.tn-box p:before {   
text-align: center;   
border: 3px solid rgba(255, 255, 255, 1);   
margin-top: -17px;   
top: 50%;   
left: 20px;   
width: 30px;   
content:'i';   
font-size: 30px;   
color: rgba(255, 255, 255, 1);   
position: absolute;   
height: 30px;   
line-height: 30px;   
border-radius: 50%;   
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);   
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);   
}   
.tn-progress {   
width: 0;   
height: 4px;   
background: rgba(255, 255, 255, 0.3);   
position: absolute;   
bottom: 5px;   
left: 2%;   
border-radius: 3px;   
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(255, 255, 255, 0.6);   
}   
/* Colors */   
.tn-box-color-1 {   
background: #ffe691;   
border: 1px solid #f6db7b;   
}   
.tn-box-color-1 p {   
color: #7d5912;   
}   
.tn-box-color-2 {   
background: #99ffb1;   
border: 1px solid #7ce294;   
}   
.tn-box-color-2 p {   
color: #2d8241;   
}   
.tn-box-color-3 {   
background: #dd9aff;   
border: 1px solid #b367db;   
}   
.tn-box-color-3 p {   
color: #69288b;   
}   
/* If you use JavaScript you could add a class instead: */   
.tn-box.tn-box-active {   
display: block;   
-webkit-animation: fadeOut 5s linear forwards;   
-moz-animation: fadeOut 5s linear forwards;   
-o-animation: fadeOut 5s linear forwards;   
-ms-animation: fadeOut 5s linear forwards;   
animation: fadeOut 5s linear forwards;   
}   
.tn-box.tn-box-active .tn-progress {   
-webkit-animation: runProgress 4s linear forwards 0.5s;   
-moz-animation: runProgress 4s linear forwards 0.5s;   
-o-animation: runProgress 4s linear forwards 0.5s;   
-ms-animation: runProgress 4s linear forwards 0.5s;   
animation: runProgress 4s linear forwards 0.5s;   
}   
@-webkit-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-webkit-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-webkit-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-moz-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-moz-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-moz-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-o-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-o-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-o-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-ms-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-ms-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-ms-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
transform: translateY(0px);   
}   
99% {   
opacity: 0;   
transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-webkit-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-moz-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-o-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-ms-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
/* Let's add some different durations for the demo */   
input.fire-check:checked ~ section .tn-box:nth-child(2) {   
-webkit-animation-duration: 6s;   
-moz-animation-duration: 6s;   
-o-animation-duration: 6s;   
-ms-animation-duration: 6s;   
animation-duration: 6s;   
-webkit-animation-delay: 0.2s;   
-moz-animation-delay: 0.2s;   
-o-animation-delay: 0.2s;   
-ms-animation-delay: 0.2s;   
animation-delay: 0.2s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(2) .tn-progress {   
-webkit-animation-duration: 5s;   
-moz-animation-duration: 5s;   
-o-animation-duration: 5s;   
-ms-animation-duration: 5s;   
animation-duration: 5s;   
-webkit-animation-delay: 0.7s;   
-moz-animation-delay: 0.7s;   
-o-animation-delay: 0.7s;   
-ms-animation-delay: 0.7s;   
animation-delay: 0.7s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(3) {   
-webkit-animation-duration: 9s;   
-moz-animation-duration: 9s;   
-o-animation-duration: 9s;   
-ms-animation-duration: 9s;   
animation-duration: 9s;   
-webkit-animation-delay: 0.4s;   
-moz-animation-delay: 0.4s;   
-o-animation-delay: 0.4s;   
-ms-animation-delay: 0.4s;   
animation-delay: 0.4s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(3) .tn-progress {   
-webkit-animation-duration: 7.5s;   
-moz-animation-duration: 7.5s;   
-o-animation-duration: 7.5s;   
-ms-animation-duration: 7.5s;   
animation-duration: 7.5s;   
-webkit-animation-delay: 0.9s;   
-moz-animation-delay: 0.9s;   
-o-animation-delay: 0.9s;   
-ms-animation-delay: 0.9s;   
animation-delay: 0.9s;   
}   
/* Last example pauses on hover (causes problems in WebKit browsers) */   
.tn-box.tn-box-hoverpause:hover, .tn-box.tn-box-hoverpause:hover .tn-progress {   
-webkit-animation-play-state: paused;   
-moz-animation-play-state: paused;   
-o-animation-play-state: paused;   
-ms-animation-play-state: paused;   
animation-play-state: paused;   
}

Следующий код в самый низ страницы перед /body:
Код
<script>   
$('.apo1').click(function () {   
$('.tn-box-color-1').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-1').addClass('tn-box-active');   
}, 100);   
});   

$('.apo2').click(function () {   
$('.tn-box-color-2').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-2').addClass('tn-box-active');   
}, 100);   
});   

$('.apo3').click(function () {   
$('.tn-box-color-3').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-3').addClass('tn-box-active');   
}, 100);   
});   
</script>



Тихо на улице, пусто в квартире..Спасибо реактору №4

Бармен
Бармен
Пропуск №: 63
Регистрация: 12.04.2014
Ранг: Познающий
Сообщений: 74
Карма: 1 | Хабар: 8
stalkers
Дата: Понедельник, 21.09.2015, 11:30/ Сообщение №: 2
Может кому-то да понадобиться)




StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Понедельник, 21.09.2015, 11:43/ Сообщение №: 3
Бармен, думаю понадобятся happy



Тихо на улице, пусто в квартире..Спасибо реактору №4

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Цветные уведомление с прогрессбаром для ucoz
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-21.10.2020