Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (91)
Обновления сайта (77)
Свалка (67)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
007RomanHoroshun (21.05.2025)
Yuppi_Duck (24.09.2024)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
  • Страница 1 из 1
  • 1
Цветные уведомление с прогрессбаром для ucoz
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 1
Дата: 20.09.2015 в 23:51

Больше скажу как приложение на ваш сайт и не более, эти Цветные уведомлений с прогрессбаром для 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>

Бармен
Группа: Бывалые
Ранг: Отмычка
Сообщений: 74
Карма: 19
Сообщение # 2
Дата: 21.09.2015 в 11:30
Может кому-то да понадобиться)



Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 3
Дата: 21.09.2015 в 11:43
Бармен, думаю понадобятся happy

  • Страница 1 из 1
  • 1
Поиск:

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