Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   </style>
       <style contenteditable="" id="item1">
     #it1 {
​
     }
   </style>
       <style contenteditable="" id="item2">
     #it2 {
       
     }
   </style>
 <style contenteditable="" id="item3">
     #it3 {
     }
   </style>
 <style contenteditable="" id="item4">
     #it4 {
​
     }
   </style>
  </section>
<section id="result">
  
<div class="conteneur">
<div class="item" id="it1">Rouge</div>
<div class="item " id="it2">Bleu</div>
<div class="item" id="it3">Vert</div>
<div class="item " id="it4">Gris</div>
</div>
  
</section>
 
​
  </article>
​
</body>
</html>
 
#testV1  head  {
  display : block;
   }
#testV1{
  display : flex;
}
​
#testV1 #style,#testV1 #testV1 #result{
  flex-direction : column;
}
​
#testV1 #result{
  align-items: center;
  justify-content: center;
}
​
#testV1    style[contenteditable]:after {
      content :"";
      color : green;
      position : absolute;
      right : 0;
      bottom : 0;
    }
​
#testV1 style[contenteditable] {
      display : block;
      font-family: sans-serif; 
      text-shadow: none;
      border: 1px solid hsl(0, 0%, 80%);
      border-radius: 7px;
      padding: 1em;
      white-space: pre;
      margin: 0 20px 20px;
      outline : 0px solid transparent;
      -webkit-user-modify: read-write-plaintext-only;
      -mz-user-modify: read-write-plaintext-only;
    }
​
#testV1 style[contenteditable]:hover {
      color : white;
      flex:1;
    }
​
 #testV1   style#item1:hover {
      background : red;
    }
 #testV1   style#item2:hover {
      background : blue;
 
    }
 #testV1   style#item3:hover {
      background : green;
    }
 #testV1   style#item4:hover {
      background : grey;
 
    }
 #testV1   style#conteneur:hover {
      background : black;
    }
​
#testV1 #result #it1 {
  background : red;
}
​
#testV1 #result #it2 {
  background : blue;
}
​
#testV1 #result #it3 {
  background : green;
}
​
​
#testV1 #result #it4 {
  background : grey;
}
​
​
#testV1 .conteneur {
  height: 400px;
  width: 400px;
  background-color : black; 
  color : white;
  resize: both;
  overflow: hidden;
}
​
.item:hover:after{
  position : absolute;
  right: 0;
  bottom: 0;
  content : " < proportion de " attr(id);
}
​
.item:hover{
  position : relative;
  z-index: 20;
}
​
</style>
​
<article id="testV1">
  <section id="style">
​
   <style contenteditable="" id="conteneur">
​
  .conteneur {
​
     }
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers