• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
497
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • [XenGenTr] Core Library
    [XenGenTr] Core Library
    Плагин, который работает в интеграции со всеми плагинами, темами или продуктами XenGenTr.
  • Calendar
    Calendar
    Календарь для форума.
  • Similar threads
    Similar threads
    Отображение похожих тем при создании новой.
  • ADATA SSD ToolBox
    Windows ADATA SSD ToolBox
    Программа поможет ускорить работу вашего твердотельного накопителя и увеличить срок его службы.
  • Quick search
    Quick search
    Быстрый поиск тем на форуме.
Похожие ресурсы
Назад
Верх Низ