Как переделать стиль css3 в css?

вопрос

Здравствуйте. Подскажите пожалуйста вот имеется стиль слайдера в css3

*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#gal {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#gal ul {list-style-type:none;}
input[type="radio"] {
  position:absolute;
  left:0;
  display:block;
  width:40px;
  height:75px;
  border:0;
  outline:none;
  cursor:pointer;
  opacity:0;
  z-index:9;
  
}
input[value="one"] {top:0;}
input[value="two"] {top:75px;}
input[value="three"] {top:150px;}
input[value="four"] {top:225px;}
input[type="radio"] + label {
  position:absolute;
  left:0;
  width:40px;
  height:75px;
  background:#333;
  z-index:7;
  -webkit-transition:left .1s, width .1s;
  -moz-transition:left .1s, width .1s;
  -ms-transition:left .1s, width .1s;
  -o-transition:left .1s, width .1s;
  transition:left .1s, width .1s;
}
input[value="one"] + label {top:0;}
input[value="two"] + label {top:75px;}
input[value="three"] + label {top:150px;}
input[value="four"] + label {top:225px;}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}
label[class*="entypo-"]:before {
  top:25px;
  left:15px;
  font-size:1.5rem;
  color:white;
}
a[class*="entypo-"]:before {
  top:3px;
  left:3px;
  font-size:1.5rem;
  color:#333;
}
a:hover[class*="entypo-"]:before {
  color:tomato;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
  right:0;
}
figure {
  bottom:0;
  left:0;
  width:600px;
  height:300px;
  display:block;
  overflow:hidden;
}
figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption {

  display:block;
  width:300px;
  height:300px;
  padding-top:100px;
  background:transparent;
  text-align:right;
  z-index:1;
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .25s;
  -moz-transition:all .25s;
  -o-transition:all .25s;
  transition:all .25s;
}
h4 {
  display:inline-block;
  padding:0 15px;
  background:tomato;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.5rem;
}
figcaption nav ul {display:inline-block;padding:3px 15px;background:white;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;}
figcaption p {display:inline-block;padding:5px 15px;background:white;font-family: 'Titillium Web', sans-serif;font-weight:300;color:#333;}

input[type="radio"]:checked + label {left:-17px;width:75px;background:tomato;}
input[type="radio"]:checked + label:before {font-size:2.5rem;top:15px;left:28px;}
input[type="radio"]:checked ~ figure img {
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
}
input[type="radio"]:checked ~ figure figcaption {
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  z-index:8;
}
h2 {
  margin-top:150px;
  text-align:center;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.5rem;
}
h2 a {
  position:relative;
  color:tomato;
  text-decoration:none;
}
h2 a:after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:tomato;
  -webkit-transition:width .1s;
  -moz-transition:width .1s;
  -o-transition:width .1s;
  transition:width .1s;
}
h2 a:hover:after {
  width:100%;
}
body { background: #000000 url(header.jpg) no-repeat center top;}
html, body {
  width:100%;
  height:100%;
}

Как этот стиль переделать в css?

А также html код:

Показать / Скрыть текст

<div id="gal">
  <nav class="galnav">
    <ul>
      <li>
        <input type="radio" name="btn" value="one"/>
        <label for="btn" class="entypo-right-open-big"></label>
        <figure>
          <img src="tim_biskup.jpg"/>
          <figcaption>
            <h4>Tim Biskup</h4>
              <nav role='navigation'>
                <p>share this with your friends</p>
                <ul>
                  <li><a href="#" class="entypo-facebook-squared"></a></li>
                  <li><a href="#" class="entypo-twitter"></a></li>
                  <li><a href="#" class="entypo-gplus"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="two" checked="checked"/>
        <label for="btn" class="entypo-right-open-big"></label>
         <figure>
          <img src="brecht_vandenbroucke.jpg"/>
          <figcaption>
            <h4>Brecht Vandenbroucke</h4>
              <nav role='navigation'>
                <p>share this with your friends</p>
                <ul>
                  <li><a href="#" class="entypo-facebook-squared"></a></li>
                  <li><a href="#" class="entypo-twitter"></a></li>
                  <li><a href="#" class="entypo-gplus"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="three"/>
        <label for="btn" class="entypo-right-open-big"></label>
        <figure>
          <img src="andy_martin.jpg"/>
          <figcaption>
            <h4>Andy Martin</h4>
              <nav role='navigation'>
                <p>share this with your friends</p>
                <ul>
                  <li><a href="#" class="entypo-facebook-squared"></a></li>
                  <li><a href="#" class="entypo-twitter"></a></li>
                  <li><a href="#" class="entypo-gplus"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="four"/>
        <label for="btn" class="entypo-right-open-big"></label>
         <figure>
          <img src="diana_beltran_herrera.jpg"/>
          <figcaption>
            <h4>Diana Beltran Herrera</h4>
              <nav role='navigation'>
                <p>share this with your friends</p>
                <ul>
                  <li><a href="#" class="entypo-facebook-squared"></a></li>
                  <li><a href="#" class="entypo-twitter"></a></li>
                  <li><a href="#" class="entypo-gplus"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
    </ul>
  </nav>
</div>

Заранее спасибо

Ответа пока нет

figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption {

[not-available=userinfo] <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div> <nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]> <div class="page_next-prev"> <span class="page_prev" title="Предыдущая страница"> [prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link] </span> <span class="page_next" title="Следующая страница"> [next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link] </span> </div> <ul class="pagination"> {pages} </ul> </nav> <script type="text/javascript"> $(document).ready(function(){ $('body').on('click','#nav-load a',function(){ var urlNext = $(this).attr('href'); var scrollNext = $(this).offset().top - 200; if (urlNext !== undefined) { $.ajax({ url: urlNext, beforeSend: function() { ShowLoading(''); }, success: function(data) { $('.navigation').remove(); $('#nav-load').remove(); $('#dle-content').append($('#dle-content', data).html()); $('#dle-content').after($('#bottom-nav')); window.history.pushState("", "", urlNext); $('html, body').animate({scrollTop:scrollNext}, 800); HideLoading(''); }, error: function() { HideLoading(''); alert('что-то пошло не так'); } }); }; return false; }); }); </script> [/not-available]

5 комментариев

Админ

3457

ПафНутиЙ - 2015-05-1430 ноября 2014 23:28 - #38171

у вас и так css, в чём проблема?

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

186

ufh2 - 2015-05-1430 ноября 2014 23:33 - #38173

ПафНутиЙ,Просто в таком виде у меня не работает, тоесть появляется белый фон от слайдера и все, если в css, к примеру в

добавляю точки, тоесть figure img (было), .figure img (стало) тогда начинает что-то появляться, но все же работает не до конца.

ufh2 - 2015-05-1430 ноября 2014 23:39 - #38174

Тоесть вот до добавления точек

А вот после

ufh2 - 2015-05-1430 ноября 2014 23:42 - #38175

Вот ссылка на сам слайдер
Слайдер

ufh2 - 2015-05-141 декабря 2014 16:16 - #38190

Помогите пожалуйста

Как переделать стиль css3 в css?

Ответа пока нет

5 комментариев

Похожие вопросы

Модификация тега hr

как вывести текстовое окно поверх всех картинок

Скрыть ID но не сам блок

Не стабильно передвигается меню

Как обрезать картинку сверху и снизу?

Не выводятся комментарии и форма добавления

не работают подгруженные шрифты

Как ограничить параметр стиля?

Выпадающее меню в шаблоне, как срастить?

Как правильно прописать асоциативный массив + цикл в SCSS?