<style type="text/css">
div.pebble {width:180px; height:200px; background:#d80; margin:100px 150px; position:relative; border:solid #222; 
border-width:1px 3px 8px 3px; float:left;
border-radius: 90px / 150px 150px 50px 50px;
box-shadow: inset -10px -10px 10px rgba(0,0,0,0.2), inset 10px 20px 10px rgba(255,255,255,0.2), 0 0 10px rgba(0,0,0,1);
}
div.pebble::before {display:block; content:""; width:50px; height:30px; border-radius:50%/50%; background:#c00; z-index:100; 
position:absolute; left:80px; top:150px;
box-shadow:10px 10px 10px rgba(0,0,0,0.4);
background-image: -webkit-radial-gradient(25px 15px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.5) 10%, 
rgba(204,0,0,0.5) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 25px 15px, rgba(255,255,255,1), rgba(255,255,255,0.5) 10%, 
rgba(204,0,0,0.5) 15%);
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotate(15deg);
transform:rotate(15deg);
}
div.pebble::after {display:block; content:""; width:35px; height:30px; border-radius:50%/50%; background:#c00; z-index:90; 
position:absolute; left:95px; top:153px;
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
}
div.pebble  div:nth-of-type(1),
div.pebble  div:nth-of-type(2)
{width:70px; height:90px; background:#fff; position:absolute; top:-32px; border:solid #222; border-width:4px 1px 4px 1px;
background-image: -webkit-radial-gradient(40px 60px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,1) 50%, 
rgba(192,192,192,0.5) 100%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 40px 60px, rgba(255,255,255,1), rgba(255,255,255,1) 50%,  
rgba(192,192,192,0.5) 100%);
border-radius: 35px / 45px;
box-shadow: 0 0 7px rgba(0,0,0,1);
}
div.pebble div:nth-of-type(1) {left:30px;}
div.pebble div:nth-of-type(2) {left:102px;}
div.pebble div:nth-of-type(1)::before,
div.pebble div:nth-of-type(2)::before {display:block; content:""; width:55px; height:55px; border-radius:55px; background:#000; 
position:absolute; right:1px; bottom:7px;
background-image: -webkit-radial-gradient(20px 20px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,1) 20%, 
rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 80%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 20px 20px, rgba(255,255,255,1), rgba(255,255,255,1) 20%, 
rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 80%);
box-shadow: 0 0 7px rgba(0,0,0,1);
}
div.pebble div:nth-of-type(1)::after,
div.pebble div:nth-of-type(2)::after {display:block; content:""; width:5px; height:5px; border-radius:5px; background:#fff; 
position:absolute; right:15px; bottom:20px;
box-shadow: 0 0 5px rgba(255,255,255,1);
}
div.pebble div:nth-of-type(3) {width:80px; height:90px; background:#600; position:absolute; left:60px; bottom:30px; 
border:solid #222; border-width:1px 2px 4px 2px;
border-radius: 40px / 70px 70px 20px 20px;
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.4), inset -10px -10px 10px rgba(255,255,255,0.2), 0 0 10px rgba(0,0,0,1);
}
.spider {width:0; height:0; position:relative; float:left; margin-top:150px; z-index:10;}
.spider::before {display:block; content:""; width:20px; height:30px; border-radius:50%/50%; border:solid #000; 
border-width:1px 2px 3px 2px; border-color:#fff #333 #000 #333;
position:absolute; left:-11px; bottom:15px;}
.spider::after {display:block; content:""; width:280px; height:170px; border:10px double rgba(255,255,255,0.6); 
position:absolute; left:-140px; top:-70px; border-radius:50%/50%; z-index:100;}
.spider div:nth-of-type(1) {width:50px; height:60px; background:#000; border:2px double #aaa; border-radius:50%/50%; 
position:absolute; top:0; left:-25px; z-index:100;
background-image: -webkit-radial-gradient(20px 20px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%, 
rgba(0,0,0,1) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 20px 20px, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%,  
rgba(0,0,0,1) 15%);
box-shadow: 0 0 15px rgba(0,0,0,1);
}
.spider div:nth-of-type(1)::before {display:block; content:""; width:130px; height:170px; border-radius:50%/50%; border:double; 
border-width:5px 3px 1px 3px; border-color:#000 #333 #fff #333;
position:absolute; left:-43px; top:5px; z-index:-1;
box-shadow: 0 -5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(1)::after {display:block; content:""; width:250px; height:170px; border-radius:50%/50%; border:double; 
border-width:5px 3px 1px 3px; border-color:#000 #333 #fff #333;
position:absolute; left:-100px; top:5px; z-index:-1;
box-shadow: 0 -5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(2) {width:30px; height:40px; background:#000; border:2px double #aaa; border-radius:50%/50%; 
position:absolute; bottom:-10px; left:-15px; z-index:100;
background-image: -webkit-radial-gradient(11px 13px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%, 
rgba(0,0,0,1) 15%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 11px 13px, rgba(255,255,255,1), rgba(255,255,255,0.7) 10%,  
rgba(0,0,0,1) 15%);
box-shadow: 0 0 15px rgba(0,0,0,1);
}
.spider div:nth-of-type(2)::before {display:block; content:""; width:100px; height:120px; border-radius:50%/50%; 
border:double; border-width:1px 3px 5px 3px; border-color:#fff #333 #000 #333;
position:absolute; left:-40px; bottom:5px; z-index:-1;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
.spider div:nth-of-type(2)::after {display:block; content:""; width:200px; height:130px; border-radius:50%/50%; border:double; 
border-width:1px 3px 5px 3px; border-color:#fff #333 #000 #333;
position:absolute; left:-90px; bottom:2px; z-index:-1;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
</style>
<br><br>
<div class ="pebble">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class ="spider">
    <div></div>
    <div></div>
</div>
<br clear="all"><br>