Как переделать стиль 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
Похожие новости
- Весеннее настроение и двойная выгода: дарим вторую лицензию
- Ajax-отправка форм в админпанели - модуль AdminAjaxForms
- Весенняя акция на лицензии DataLife Engine
- Arne Slot ayaa eedda dusha ka saaray hal qof ka dib guuldarradii Liverpool ka soo gaartay Galatasaray..
- Chelsea oo go’aansatay inay iibiso Liam Delap ka dib markii uu hal gool dhaliyay tan iyo markii uu xagaagii ku biiray.
- Sidee habeenkii naxdinta lahaa ee Kinsky u dhacay ka hor inta aan la badalin daqiiqadii 17aad..
- Luka Modric ayaa soo afjaray wararka xanta ah ee la xiriirinaya inuu ku laabanayo Real Madrid, isagoo ku adkeysanaya inuu….
- Alejandro Garnacho ayaa ka digay in mustaqbalka Chelsea uu noqon karo mid aad u fool xun iyadoo halyeeyga kooxda uu ku..
- Chelsea oo qalbi jabisay Wrexham ka dib markii VAR ay ku guuleysatay….
- Kooxda Real Madrid ayaa ku soo biirtay tartanka loogu jiro saxiixa Sandro Tonali oo ka tirsan NewcastleUnited.