Skip to content

Instantly share code, notes, and snippets.

@cedricici

cedricici/dabblet.css

Created February 23, 2012 21:16
Show Gist options
  • Save cedricici/1895095 to your computer and use it in GitHub Desktop.
Save cedricici/1895095 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{
height:100%;
width:100%;
background:#333;
font-family:sans;
}
li{
margin-left: 2em;
/*color:cycle(red,yellow);*/
font-size:max( 50px , 2em );
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 div {
border:1px solid black;
background:#777;
float:left;
margin:2em;
padding:2em;
}
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 div:nth-child(8){
cursor:progress;
}
nav div:nth-child(9){
cursor:wait;
}
nav div:nth-child(10){
cursor:cell;
}
nav div:nth-child(11){
cursor:crosshair;
}
nav div:nth-child(12){
cursor:text;
}
nav div:nth-child(13){
cursor:vertical-text;
}
nav div:nth-child(14){
cursor:alias;
}
nav div:nth-child(15){
cursor:copy;
}
nav div:nth-child(16){
cursor:move;
}
nav div:nth-child(17){
cursor:no-drop;
}
nav div:nth-child(18){
cursor:not-allowed;
}
nav div:nth-child(19){
cursor:e-resize;
}
nav div:nth-child(20){
cursor:n-resize;
}
nav div:nth-child(21){
cursor:ne-resize;
}
nav div:nth-child(22){
cursor:nw-resize;
}
nav div:nth-child(23){
cursor:s-resize;
}
nav div:nth-child(24){
cursor:se-resize;
}
nav div:nth-child(25){
cursor:sw-resize;
}
nav div:nth-child(26){
cursor:w-resize;
}
nav div:nth-child(27){
cursor:ew-resize;
}
nav div:nth-child(28){
cursor:ns-resize;
}
nav div:nth-child(29){
cursor:nesw-resize;
}
nav div:nth-child(30){
cursor:nwse-resize;
}
nav div:nth-child(31){
cursor:col-resize;
}
nav div:nth-child(32){
cursor:row-resize;
}
nav div:nth-child(33){
cursor:all-scroll;
}
nav div:nth-child(34){
cursor:zoom-in;
}
nav div:nth-child(35){
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>
<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><div> progress</div><div> wait </div><div>
cell </div><div> crosshair </div><div> text</div><div> vertical-text</div><div>
alias </div><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><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><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>
</nav>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment