ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Цветные уведомление с прогрессбаром для uCoz

Цветные уведомление с прогрессбаром для uCoz

Цветные уведомление с прогрессбаром для uCoz
Больше скажу как приложение на ваш сайт и не более, эти Цветные уведомлений с прогрессбаром для 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>
20 Сентября 2015 Просмотров: 1267 Комментариев: (9)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 9
Kolinkor
Kolinkor 20 Сентября 2015 20:241
0
Почему только для гостей, так красиво по дизайну смотрятся эти окна, можно что то придумать для самого сайта как некая функция.
Kosten
Kosten 20 Сентября 2015 20:342
0
Вообще не на одном сайте не видел, залил, так как может пригодятся, главный модератор уже давно на форуме их прописал. Где присутствует демонстрация этого кода и можете в реале посмотреть.
FeStemBer
FeStemBer 20 Сентября 2015 20:363
0
Вот за DEMO спасибо, до не то конца понял этот скрипт.
workman
workman 20 Сентября 2015 21:034
0
Tventum, когда делаешь определенное действие, то появляются такие вот уведомления
Kosten
Kosten 20 Сентября 2015 21:125
0
Это для того, что гость не имеет право отписать или залить и появляется такое уведомление, которое можно самому переписать на свой лад или по тематике.
workman
workman 20 Сентября 2015 21:146
0
Нужно там потом дополнительный скрипт false; прописывать для таких дел
Kosten
Kosten 20 Сентября 2015 21:267
0
В чем он заключаться будет?
workman
workman 20 Сентября 2015 21:298
0
В том чтобы вызывать на кнопке. Например на форуме.
Kosten
Kosten 20 Сентября 2015 22:049
0
Но поймем, когда сделаем, все понимается только визуально.
Войдите:
avatar