Сообщение от ksa
|
laimas, бла, бла, бла... А примера так и нет. 
|
Играйся
<!DOCTYPE html>
<html lang="en">
<head>
<title>Duremar Limited Corporation</title>
<meta charset="utf-8">
<style>
body {
background:transparent;
min-height: 120em;
}
div#wrapper {
background:#fff;
padding:0;
width: 773px;
margin: 0 auto;
position: relative;
}
.afterlife{
background-image: linear-gradient(rgb(0, 128, 128) 0%, rgb(0, 128, 128) 30%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
}
.rock{
position: absolute;
top: 7em;
left: 2%;
background: none;
margin: 0;
width: 190px;
border-radius: 10px;
padding: 1em;
background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
z-index: 4;
}
.rock:after{
top: 0px;
box-shadow: 5px -12px 24px -7px rgba(0, 0, 0, 0.25);
content: '';
height: 100%;
width: 100%;
position: absolute;
right: 1px;
z-index: -1;
border-radius: 10px;
-webkit-transform: skew(-4deg);
transform: skew(0deg);
}
h2{
color: rgb(0, 128, 128);
font-size: 1.4em;
margin: 0;
}
p{
color: rgb(153, 153, 153);
text-decoration: none;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
[alt=ring]{
display: block;
margin: 0 auto;
position: relative;
z-index: 2;
}
.alloyofshadows{
width: 190px;
margin: 0 auto;
position: relative;
top: 13px;
z-index: 0;
}
[class$=side]{
border-radius: 50%;
position: absolute;
}
.inside{
box-shadow: 0 0px 25px 1px rgba(0, 0, 0, 0.59);
height: 7px;
left: 10%;
width: 80%;
top: -20px;
background-color: rgb(158, 158, 158);
border-radius: 0 0 100% 100%;
}
.outside{
top: -50px;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.31);
height: 10px;
left: -10%;
width: 120%;
}
[type=range]{
width: 180px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="afterlife">
<img src="https://thegoodguys.sirv.com/products/50047689/50047689_505149.PNG?scale.height=505&scale.width=773&canvas.height=505&canvas.width=773&canvas.opacity=0&format=png&png.optimize=true" alt="ring" />
<div class="alloyofshadows">
<div class="outside"></div>
<div class="inside"></div>
</div>
</div>
<div class="rock">
<h2>One Collector says:</h2>
<p>Люди обросли кредитами, как дуремар пияками.</p>
<form class="range">
<input type="range" id="ra" min="10" max="100" step="1" value="13"/>
</form>
</div>
</div>
<script>
;(function(){
var d = document.getElementById('ra');
var o = document.getElementsByClassName('alloyofshadows')[0];
d.addEventListener('input', function(e){
var v = e.target.value;
o.style.top = v+'px';
});
})(window);
</script>
</body>
</html>