clown test only one div - JV

dabblet.css

/**
 * clown test only one div - JV
 */

body{background: white;}

span{ cursor:none; outline:0; color:white; text-align:center;display:block; width:80px; height:80px; position:relative; top:178px; margin:0 auto; background:transparent; z-index:1;}
	
div{
  width:75px;
  height:75px;
  margin:100px auto;
  background:#b72427 ;
  border-radius:50%;
  background:radial-gradient(center, ellipse cover, #b72427 1%,#8e3131 66%);
  box-shadow:
 
    0px 0px 1px 0px black,
    0px 0px 1px 0px black,
    
    
    0px 0px 2px 5px white,0px 0px 2px 0px black,
    0px 0px 2px 5px white,0px 0px 2px 0px black
    

    ,0px 0px 0px 0px white,
    0px 0px 0px 0px black;
  
  transition: all 500ms 
  cubic-bezier(0.600, -0.280, 0.735, 0.045);
}

span:focus + div{
	transform:translateY(130px);  box-shadow:
    80px -70px 1px -10px black,
    -80px -70px 1px -10px black,
    
    
    80px -65px 2px 5px white,80px -90px 2px -10px black,
    -80px -65px 2px 5px white,-80px -90px 2px -10px black
    

    ,0px 15px 0px 60px white,
    0px 25px 0px 60px black;
}
	

dabblet.html

<span tabindex="0">passe o mouse</span> <!--elemento somente para manipular o hover sem que haja reposicionamento-->

<div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}