Среда, 05.08.2020, 22:35
Главная Регистрация RSS
Приветствую Вас, Гость
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас сегодня посетили :
Поиск
Главная » Файлы » СКРИПТЫ ДЛЯ UCOZ » РАЗНЫЕ СКРИПТЫ УКОЗ

G-poster для музыкальных сайтов

G-poster для музыкальных сайтов

Доброго времени суток! Предлагаю вариан оформления постера для музыкального сайта в виде CD диска.
Блок постера ставим в нужное место.

Код
<div class="cover" style="background: url('$IMG_URL1$') center no-repeat;" ><div class="cover-center"></div><div class="cover-bord"></div></div>


В стили добавляем.

Код
.cover {
  width: 340px;
  height: 340px;
  border-radius: 180px;
  position: relative;
  -webkit-box-shadow: 0px 0px 10px #aaa;
  -moz-box-shadow: 0px 0px 10px #aaa;
  -o-box-shadow: 0px 0px 10px #aaa;
  box-shadow: 0px 0px 10px #aaa;
  -webkit-text-shadow: 0px 1px 0px #000;
  -moz-text-shadow: 0px 1px 0px #000;
  -o-text-shadow: 0px 1px 0px #000;
  text-shadow: 0px 1px 0px #000;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
float: left; margin: 9px ;
}

.cover:hover {transform: scale(1.0) rotate(20deg); transition: 0.5s all; opacity:1;}  
  .cover-bord {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -28px 0 0 -28px;
  background-color: transparent;
  border: 3px solid #fff;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  -o-border-radius: 28px;
  border-radius: 28px;
}
  .cover-center {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px;
  background-color: #fff;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: inset 0px 0px 10px #aaa;
  -moz-box-shadow: inset 0px 0px 10px #aaa;
  -o-box-shadow: inset 0px 0px 10px #aaa;
  box-shadow: inset 0px 0px 10px #aaa;
}


 

G-poster для музыкальных сайтов

ПОСМОТРЕТЬ ДЭМО ВЕРСИЮ

К материалу оставили ссылку на демоверсию, по которой вы можете оценить функционал данного материала. При обнаружении ссылки, не содержашей демоверсии, сообщите об этом Администратору.

Похожие материалы:

Категория: РАЗНЫЕ СКРИПТЫ УКОЗ | Добавил: mytorrento | Теги: укоз, скрипты, разные
Просмотров: 336 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 1
1   [Материал]
Понятно, большое спасибо за помощь в этом вопросе.

---
Эта замечательная идея придется как раз кстати.

Имя *:
Email *:
Все смайлы
Код *: