Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Слышу гимн зашитых ртов
Дата: Воскресенье, 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
stalkers
Дата: Понедельник, 21.09.2015, 11:30/ Сообщение №: 2
Может кому-то да понадобиться)
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
Слышу гимн зашитых ртов
Авторское право на игру и использованные в ней материалы принадлежат GSC Game World .
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Поддержка сайта Near Bet
| Рекомендуем AdGuard
© 20.11.2013-21.10.2020