Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2727)
Skyline (2698)
Strelok41 (2177)
SpraVkina [16.11.2017]
Renko9719 [15.11.2017]
dhole [11.11.2017]
Yury21071945 [05.11.2017]
кабестан [04.11.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Цветные уведомление с прогрессбаром для uCoz
Цветные уведомление с прогрессбаром для uCoz
XemorDio Дата: Вторник, 16.08.2016, 13:22 | Сообщение # 1
「 Рипер, техник сайта 」
Группа: Модераторы
Сообщений: 2727
Награды: 13 Репутация: 295
Статус: Offline

Больше скажу как приложение на ваш сайт и не более, эти Цветные уведомлений с прогрессбаром для 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>   
<lt;/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>
Форум » Web-раздел » Скрипты uCoz » Цветные уведомление с прогрессбаром для uCoz
Страница 1 из 11
Поиск:
09:31
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017