Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Стильный Аудио-плеер


Стильный Аудио-плеер Kод CSS @font-face { font-family: "FontAwesome"; src: url("fontawesome-webfont.eot?"); src: url("fontawesome-webfont.eot#iefix") format("eot"), url("fontawesome-webfont.woff") format("woff"), url("fontawesome-webfont.ttf") format("truetype"), url("fontawesome-webfont.svg?#FontAwesome") format("svg"); font-weight: 400; font-style: normal; } a { text-decoration: none; } .jp-title { font-size: 12px; text-align: center; color: #999; } .jp-title ul { padding: 0; margin: 0; list-style: none; } .jp-gui { position: relative; background: #f34927; background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311)); background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%); background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%); background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%); background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 ); -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1); box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1); border-radius: 3px; overflow: hidden; margin-top: 10px; } .jp-jplayer, .jp-audio { width: 420px; margin: 50px auto; } .jp-controls { padding: 0; margin: 0; list-style: none; font-family: "FontAwesome"; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } .jp-controls li { display: inline; } .jp-controls a { color: #fff; } .jp-play,.jp-pause { width: 60px; height: 40px; display: inline-block; text-align: center; line-height: 43px; border-right: 1px solid #d22f0f; } .jp-controls .jp-play:hover,.jp-controls .jp-pause:hover { background-color: #de3918; } .jp-mute,.jp-unmute { position: absolute; right: 55px; top: 0; width: 20px; height: 40px; display: inline-block; line-height: 46px; } .jp-mute { text-align: left; } .jp-volume-bar { position: absolute; right: 10px; top: 17px; width: 45px; height: 8px; border-radius: 20px 20px 20px 20px; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset; background-color: #992E18; overflow: hidden; } .jp-volume-bar-value { background-color: #fff; height: 8px; border-radius: 20px 20px 20px 20px; } .jp-progress { background-color: #992E18; border-radius: 20px 20px 20px 20px; overflow: hidden; position: absolute; right: 133px; top: 15px; width: 210px; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset; } .jp-play-bar { height: 12px; background-color: #fff; border-radius: 20px 20px 20px 20px; } .jp-time-holder { color: #FFF; font-size: 12px; line-height: 14px; position: absolute; right: 90px; top: 14px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } JAVASCRIPT <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/player/Player_red/js/jquery.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/player/Player_red/js/jquery.jplayer.min.js"></script> Листинг <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-single"> <div class="jp-title"> <ul> <li>Название композиции</li> </ul> </div> <div class="jp-gui jp-interface"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-play" tabindex="1"></a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1"></a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"></a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time"></div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play media files, you must either upgrade your browser to the latest version or update your system <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div> </div> </div> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon