• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Стильное оформление боковой панели.

Разработка Стильное оформление боковой панели.

Нет прав для скачивания
Стильное оформление боковой панели.
Делаем разметку HTML:
HTML:
<div class="moscowfm_light">
<div class="moscowfmSlider">
<div class="mosfm_pr"><a target="_blank" href="#">
  <p class="fmTitle"><b class="prMT">Breakfast Club</b> <em>с KK & Vovo</em></p>
  <p class="when"><i>Каждое буднее утро, 07:00 - 11:00</i></p>
  <p class="fmSlogan"><i>Сегодня в меню - английский язык без костей!</i></p>
</a></div>
<div class="mosfm_pr"><a target="_blank" href="#">
  <p class="fmTitle"><b class="prMT">Love Doctor</b> <em>с DJ Dan</em></p>
  <p class="when"><i>По будням с 11 до 15</i></p>
  <p class="fmSlogan"><i>Время любить ушами!</i></p>
</a></div>
<div class="mosfm_pr"><a target="_blank" #">
  <p class="fmTitle"><b class="prMT">Evening Eargazm</b> <em>с DJ Vera <sup>(ПН-ЧТ)</sup>, <br/>Liz Rocks <sup>(ПТ)</sup>, <br/>Dirty Diana <sup>(СБ, ВС)</sup></em></p>
  <p class="when"><i>Ежевечернее шоу по заявкам, 20:00 - 21:00</i></p>
  <p class="fmSlogan"><i>Good Night, то есть Неспокойной ночи!</i></p>
</a></div>
<div class="mosfm_pr"><a target="_blank" href="#">
  <p class="fmTitle"><b class="prMT">Friday <br/>I'm In Love</b> <em>с DJ AJ</em></p>
  <p class="when"><i>ПТ 15-18</i></p>
  <p class="fmSlogan"><i>Как грамотно провести ночь с пятницы на понедельник</i></p>
</a></div>
<div class="mosfm_pr"><a target="_blank" href="#">
  <p class="fmTitle"><b class="prMT">Moscow FM Top 20</b> <em>с Ernie Duke</em></p>
  <p class="when"><i>ПТ 18-20, повтор СБ 10-12</i></p>
  <p class="fmSlogan"><i>Самая правильная музыка на самых правильных местах!</i></p>
</a></div>
</div>
<div id="moscowfm_pager"></div>
<div class="moscowfm_logolink"><a href="#" target="_blank">Moscow FM</a></div>
</div>
Пишем наш стиль для блока:
CSS:
html, body {padding:0;margin:0;background:#111}
.moscowfm_light p {padding:0;margin:0;}
.moscowfm_light{width:240px; height:400px; margin:0; padding:0; position:relative; background:#f7323f; overflow:hidden; color:#fff;line-height:1em;margin:auto}.moscowfm_light .moscowfmSlider{width:240px; height:240px; margin:60px 0 0; background:rgb(247,50,63); position:relative}.moscowfm_light .moscowfm_logolink{position:absolute; bottom:17px; left:17px; width:206px; height:66px}.moscowfm_light .moscowfm_logolink a{display:block; color:#fff; width:100%; height:100%; overflow:hidden; text-indent:-10000px; background-image:url(http://m24.ru/img/logos/moscowfm-white.svg); background-position:center; background-color:transparent; background-repeat:no-repeat; background-size:auto 100%}.moscowfm_light .mosfm_pr{width:240px; height:240px; position:relative;background:transparent !important}.moscowfm_light .mosfm_pr .fmSlogan{position:absolute; left:17px; width:206px; top:17px; font-family:tornadoc,sans-serif; font-size:16px; text-align:center; opacity:0}.moscowfm_light .mosfm_pr a, .moscowfm_light .mosfm_pr a:hover{text-decoration:none; display:block; color:#fff; transition:all 0.3s ease-in-out}.moscowfm_light .mosfm_pr a:hover{color:#fff; text-shadow:0 0 3px #fff; transition:all 0.3s ease-in-out}.moscowfm_light .mosfm_pr .fmTitle{ border-bottom:1px dotted #fff;  border-top:1px dotted #fff;  color:#fff;  left:17px;  padding:10px 0;  position:absolute;  text-align:center;  top:50%;  transform:translate(0px,-50%);  width:206px}.moscowfm_light .mosfm_pr .fmTitle .prMT{display:block; font-size:32px; font-style:italic; font-weight:bold; font-family:'pt serif',serif; margin:0 auto 5px; line-height:30px}.moscowfm_light .mosfm_pr .fmTitle em{line-height:1em !important;display:block;  font-family:tornadoc;  font-size:11px;  font-weight:bold;  letter-spacing:2px;  text-transform:uppercase; opacity:0.85}.moscowfm_light .mosfm_pr.fmActive .fmSlogan{-webkit-animation-duration:1.5s; animation-duration:1.5s; animation-name:flipInX; -webkit-animation-name:flipInX; opacity:1;-webkit-backface-visibility:visible !important; backface-visibility:visible !important;}.moscowfm_light .mosfm_pr .when{width:206px; bottom:17px; left:17px; position:absolute; font-family:tornadoc; font-size:11px; text-transform:uppercase; text-align:center}#moscowfm_pager{position:absolute; width:206px; top:20px; left:17px; text-align:center}#moscowfm_pager a{display:inline-block; height:4px; width:16px; border:2px solid rgba(255,255,255,0.75); background:transparent; margin:0 3px; overflow:hidden; text-indent:-10000px}#moscowfm_pager a.activeSlide{transition:all 0.3s ease-in; background:#fff; transform:rotate(180deg);}.moscowfm_light i, .moscowfm_light em {font-style:normal}
@-webkit-keyframes flipInX{ 0%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,90deg); transform:perspective(150px) rotate3d(1,0,0,90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0}
 40%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,-20deg); transform:perspective(150px) rotate3d(1,0,0,-20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in}
 60%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,10deg); transform:perspective(150px) rotate3d(1,0,0,10deg); opacity:1}
 80%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,-5deg); transform:perspective(150px) rotate3d(1,0,0,-5deg)}
 100%{ -webkit-transform:perspective(150px); transform:perspective(150px)}
}
@keyframes flipInX{ 0%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,90deg); transform:perspective(150px) rotate3d(1,0,0,90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0}
 40%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,-20deg); transform:perspective(150px) rotate3d(1,0,0,-20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in}
 60%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,10deg); transform:perspective(150px) rotate3d(1,0,0,10deg); opacity:1}
 80%{ -webkit-transform:perspective(150px) rotate3d(1,0,0,-5deg); transform:perspective(150px) rotate3d(1,0,0,-5deg)}
 100%{ -webkit-transform:perspective(150px); transform:perspective(150px)}
}
И завершаем все jquery:
JavaScript:
$(document).ready(function(){$(".moscowfmSlider").cycle({fx:"fade",speed:1400,timeout:6500,pager:"#moscowfm_pager",pause:1,after:function(e,f){$(f).addClass("fmActive")},before:function(e){$(e).removeClass("fmActive")}})});
  WebFontConfig = {
    google: { families: [ 'PT+Serif:400,700,700italic,400italic:cyrillic-ext,latin,cyrillic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
Смотрим наш результат:
0059е48.gif
Автор
baltun
Скачиваний
1
Просмотры
177
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ