Skip to content

Instantly share code, notes, and snippets.

@iamvdo

iamvdo/dabblet.css

Forked from cedricici/dabblet.css
Created March 22, 2012 11:17
Show Gist options
  • Save iamvdo/2157733 to your computer and use it in GitHub Desktop.
Save iamvdo/2157733 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
*{margin:0;padding:0;}
body{
font:1em sans-serif;
height:100%;
width:100%;
background:#333;
text-shadow:0 1px 0 white;
}
li{
margin-left: 2em;
/*color:cycle(red,yellow);*/
background-color:attr(truc,color);
}
li:hover::after{
content:attr(data-truc);
position:absolute;
padding:.2em;
background:black;
color:white;
border-radius: 10px 10px 10px 0;
margin-top:-1.4em;
}
nav{
display:table;
table-layout:fixed;
width:1500px;
margin:50px;
}
nav section{
display:table-row;
}
nav div {
display:table-cell;
border:1px solid black;
background:#ddd;
height:100px;
text-align:center;
}
nav div:nth-child(1){
cursor:url(http://cur.cursors-4u.net/toons/too-10/too1010.png) 16 28 , auto ;
}
nav div:nth-child(2){
cursor:auto;
}
nav div:nth-child(3){
cursor:default;
}
nav div:nth-child(4){
cursor:none;
}
nav div:nth-child(5){
cursor:context-menu;
}
nav div:nth-child(6){
cursor:help;
}
nav div:nth-child(7){
cursor:pointer;
}
nav section:nth-child(2) div:nth-child(1){
cursor:progress;
}
nav section:nth-child(2) div:nth-child(2){
cursor:wait;
}
nav section:nth-child(2) div:nth-child(3){
cursor:cell;
}
nav section:nth-child(2) div:nth-child(4){
cursor:crosshair;
}
nav section:nth-child(2) div:nth-child(5){
cursor:text;
}
nav section:nth-child(2) div:nth-child(6){
cursor:vertical-text;
}
nav section:nth-child(2) div:nth-child(7){
cursor:alias;
}
nav section:nth-child(3) div:nth-child(1){
cursor:copy;
}
nav section:nth-child(3) div:nth-child(2){
cursor:move;
}
nav section:nth-child(3) div:nth-child(3){
cursor:no-drop;
}
nav section:nth-child(3) div:nth-child(4){
cursor:not-allowed;
}
nav section:nth-child(3) div:nth-child(5){
cursor:e-resize;
}
nav section:nth-child(3) div:nth-child(6){
cursor:n-resize;
}
nav section:nth-child(3) div:nth-child(7){
cursor:ne-resize;
}
nav section:nth-child(4) div:nth-child(1){
cursor:nw-resize;
}
nav section:nth-child(4) div:nth-child(2){
cursor:s-resize;
}
nav section:nth-child(4) div:nth-child(3){
cursor:se-resize;
}
nav section:nth-child(4) div:nth-child(4){
cursor:sw-resize;
}
nav section:nth-child(4) div:nth-child(5){
cursor:w-resize;
}
nav section:nth-child(4) div:nth-child(6){
cursor:ew-resize;
}
nav section:nth-child(4) div:nth-child(7){
cursor:ns-resize;
}
nav section:nth-child(5) div:nth-child(1){
cursor:nesw-resize;
}
nav section:nth-child(5) div:nth-child(2){
cursor:nwse-resize;
}
nav section:nth-child(5) div:nth-child(3){
cursor:col-resize;
}
nav section:nth-child(5) div:nth-child(4){
cursor:row-resize;
}
nav section:nth-child(5) div:nth-child(5){
cursor:all-scroll;
}
nav section:nth-child(5) div:nth-child(6){
cursor:zoom-in;
}
nav section:nth-child(5) div:nth-child(7){
cursor:zoom-out;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h3>DATA-* ATTRIBUTES & CURSORS</h3>
<ul>
<li data-truc="green" >a</li>
<li data-truc="yellow" >a</li>
<li data-truc="red" >a</li>
<li data-truc="blue" >a</li>
</ul>
<nav>
<section>
<div> url(curseur.png) x y
</div>
<div>
auto </div><div> default </div><div> none </div><div>
context-menu </div><div>help</div><div> pointer</div></section><section><div> progress</div><div> wait </div><div>
cell </div><div> crosshair </div><div> text</div><div> vertical-text</div><div>
alias </div></section><section><div> copy </div><div> move </div><div> no-drop </div><div> not-allowed</div><div>
e-resize</div><div> n-resize </div><div> ne-resize </div></section><section><div> nw-resize </div><div> s-resize </div><div> se-resize </div><div>
sw-resize </div><div> w-resize </div><div> ew-resize </div><div> ns-resize </div></section><section><div> nesw-resize </div><div>
nwse-resize </div><div>col-resize </div><div> row-resize </div><div> all-scroll </div><div> zoom-in </div><div> zoom-out</div>
</section>
</nav>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment