Как переделать стиль 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 код:

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





Tim Biskup



share this with your friends













Brecht Vandenbroucke



share this with your friends













Andy Martin



share this with your friends













Diana Beltran Herrera



share this with your friends











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

Источник: dle-faq.pro

Перейти на сайт

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

Похожие новости