Скрипты для UCOZ - Страница 11

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 11 из 11

…

Модератор форума: ynikod

Nokia Forum » Всё для ПК » Скрипты UCOZ » Скрипты для UCOZ

Скрипты для UCOZ

Adam

Дата: Пятница, 30-12-2011, 19:15 | Сообщение # 101

Администратор

Группа: Модераторы

Сообщений: 1897

[ ]

Награды:

[ 7 ]

Offline

Новогодняя мотня от Яндекса

Елочные шарики, которые двигаются при наведении на них мышкой, а ещё и издают звук. Наверно спросите почему урок называется "Новогодняя мотня" ?! Просто это украшение взято со страницы входа в почту Яндекса, а находчивый программист в исходном коде сделал комментарий для этой веточки  вот так и повелось... В интернете уже есть несколько похожих статей, однако все они без звука и файлы грузятся с Яндекса - тут же всё локально. Разбирался признаюсь довольно долго.

1)Вот этот код вставляем после тега body:

Code

2)CSS
Подключаем файл стилей шариков:

Code

В CSS стилях возможно придется слегка вам подправить значения ширины, margin, top, чтобы выровнять расположение новогоднеё мотни на страничке.

3)javascript

Тут подключаем jQuery, swfobject и скрипт:

Code

Скачать
Скачать
Скачать

Adam

Дата: Пятница, 30-12-2011, 19:28 | Сообщение # 102

Администратор

Группа: Модераторы

Сообщений: 1897

[ ]

Награды:

[ 7 ]

Offline

Выпадающая форма входа на сайт

Простая выпадающая форма залогинивания на сайт на jQuery.

1)Разметка HTML

Code

<nav>
     <ul>
         <li id="login">
             <a class="active" id="login-trigger" href="#">
                 Войти <span>▲</span>
             </a>
             <div style="display: block;" id="login-content">
                 <form>
                     <fieldset id="inputs">
                         <input id="username" name="Email" placeholder="Ваш Email" required="" type="email">
                         <input id="password" name="Password" placeholder="Пароль" required="" type="password">
                     </fieldset>
                     <fieldset id="actions">
                         <input id="submit" value="Войти" type="submit">
                         <label><input checked="checked" type="checkbox"> Запомнить</label>
                     </fieldset>
                 </form>
             </div>
         </li>
         <li id="signup">
             <a href="">Зарегистрироваться</a>
         </li>
     </ul>
</nav>

2)CSS

Code

nav ul {
           margin: 0;
           padding: 0;
           list-style: none;
           position: relative;
           float: right;
           background: #eee;
           border-bottom: 1px solid #fff;
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
         }

         nav li {
           float: left;
         }

         nav #login {
           border-right: 1px solid #ddd;
           -moz-box-shadow: 1px 0 0 #fff;
           -webkit-box-shadow: 1px 0 0 #fff;
           box-shadow: 1px 0 0 #fff;
         }

         nav #login-trigger,
         nav #signup a {
           display: inline-block;
           *display: inline;
           *zoom: 1;
           height: 25px;
           line-height: 25px;
           font-weight: bold;
           padding: 0 8px;
           text-decoration: none;
           color: #444;
           text-shadow: 0 1px 0 #fff;
         }

         nav #signup a {
           -moz-border-radius: 0 3px 3px 0;
           -webkit-border-radius: 0 3px 3px 0;
           border-radius: 0 3px 3px 0;
         }

         nav #login-trigger {
           -moz-border-radius: 3px 0 0 3px;
           -webkit-border-radius: 3px 0 0 3px;
           border-radius: 3px 0 0 3px;
         }

         nav #login-trigger:hover,
         nav #login .active,
         nav #signup a:hover {
           background: #fff;
         }

         nav #login-content {
           display: none;
           position: absolute;
           top: 24px;
           right: 0;
           z-index: 999;
           background: #fff;
           background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
           background-image: -webkit-linear-gradient(top, #fff, #eee);
           background-image: -moz-linear-gradient(top, #fff, #eee);
           background-image: -ms-linear-gradient(top, #fff, #eee);
           background-image: -o-linear-gradient(top, #fff, #eee);
           background-image: linear-gradient(top, #fff, #eee);
           padding: 15px;
           -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
           -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
           box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
           -moz-border-radius: 3px 0 3px 3px;
           -webkit-border-radius: 3px 0 3px 3px;
           border-radius: 3px 0 3px 3px;
         }

         nav li #login-content {
           right: 0;
           width: 250px;
         }

         /*--------------------*/

         #inputs input {
           background: #f1f1f1;
           padding: 6px 5px;
           margin: 0 0 5px 0;
           width: 238px;
           border: 1px solid #ccc;
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           -moz-box-shadow: 0 1px 1px #ccc inset;
           -webkit-box-shadow: 0 1px 1px #ccc inset;
           box-shadow: 0 1px 1px #ccc inset;
         }

         #inputs input:focus {
           background-color: #fff;
           border-color: #e8c291;
           outline: none;
           -moz-box-shadow: 0 0 0 1px #e8c291 inset;
           -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
           box-shadow: 0 0 0 1px #e8c291 inset;
         }

         /*--------------------*/

         #login #actions {
           margin: 10px 0 0 0;
         }

         #login #submit {
           background-color: #d14545;
           background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
           background-image: -webkit-linear-gradient(top, #e97171, #d14545);
           background-image: -moz-linear-gradient(top, #e97171, #d14545);
           background-image: -ms-linear-gradient(top, #e97171, #d14545);
           background-image: -o-linear-gradient(top, #e97171, #d14545);
           background-image: linear-gradient(top, #e97171, #d14545);
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           text-shadow: 0 1px 0 rgba(0,0,0,.5);
           -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
           -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
           box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
           border: 1px solid #7e1515;
           float: left;
           height: 30px;
           padding: 0;
           width: 100px;
           cursor: pointer;
           font: bold 14px Arial, Helvetica;
           color: #fff;
         }

         #login #submit:hover,
         #login #submit:focus {
           background-color: #e97171;
           background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
           background-image: -webkit-linear-gradient(top, #d14545, #e97171);
           background-image: -moz-linear-gradient(top, #d14545, #e97171);
           background-image: -ms-linear-gradient(top, #d14545, #e97171);
           background-image: -o-linear-gradient(top, #d14545, #e97171);
           background-image: linear-gradient(top, #d14545, #e97171);
         }

         #login #submit:active {
           outline: none;
           -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
           -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
           box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         }

         #login #submit::-moz-focus-inner {
           border: none;
         }

         #login label {
           float: right;
           line-height: 30px;
         }

         #login label input {
           position: relative;
           top: 2px;
           right: 2px;
         }

3)javascript

Code

Скачать
Скачать
Скачать

Nokia Forum » Всё для ПК » Скрипты UCOZ » Скрипты для UCOZ

Страница 11 из 11

…

JAF Phoenix прошивки нокиа темы™

Профиль

Последние файлы

статистика

Новое на Форуме

Популярные файлы

USB-FBUS

Каталоги

Категории