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

Делаем разметку 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);
  })();

Смотрим наш результат:

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

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