Skip to content

Instantly share code, notes, and snippets.

@olostan

olostan/gist:954605

Created May 4, 2011 01:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save olostan/954605 to your computer and use it in GitHub Desktop.
Save olostan/954605 to your computer and use it in GitHub Desktop.
Download ZIP
fifteen (pure css)
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="s1" name="s1">
span[class*="row"] {
position: absolute;
width: 25px;
height: 25px;
background: #eee;
padding: 5px;
padding-top: 10px;
margin: 2px;
border: solid 1px #888;
text-align: center;
color: white;
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-weight:bold;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
cursor: pointer;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
}
span[class*='row']:hover {
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
}
#cont {
width: 175px;
height: 210px;
background: #ADADAD; /* Old browsers */
background: -moz-linear-gradient(top, #ADADAD 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADADAD), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ADADAD 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ADADAD 0%,#444444 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ADADAD 0%,#444444 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADADAD', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ADADAD 0%,#444444 100%); /* W3C */
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 1s ease-in-out;
border: solid 2px #aaa;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script language='javascript'>
function addRule(s,l,c){
if(!s)return false;
if(s.insertRule){
s.insertRule(l+"{"+c+"}",s.cssRules.length);
return true;
}
else if(s.addRule){
return s.addRule(l,c)?true:false;
}
return false;
}
function getState() {
var res = [];
for(var c = 0;c<4;c++)
for(var r =0;r<4;r++)
{
var cols = $(document).find(".row"+r+".col"+c);
if (cols.size()==0) res.push("x");
else res.push( ($(cols[0]).text()|0).toString(16) );
}
return res.join("");
}
$(function() {
var ss=false;
if(document.styleSheets)ss=document.styleSheets["s1"];
if(!ss)ss=document.getElementById("s1");
if(ss.sheet)ss=ss.sheet;
if(ss.styleSheet)ss=ss.styleSheet;
var cont = $("#cont");
for(var i = 0;i<4;i++) {
addRule(ss,".row"+i, "top: "+(i*50+15)+"px;");
addRule(ss,".col"+i, "left: "+(i*40+15)+"px;");
}
var state = window.location.hash.substring(1);
function deserState(state) {
for(var i = 0;i<4;i++)
for (var j = 0;j<4;j++) {
var c = state[i+j*4];
if (c!='x') {
if ($(document).find(".row"+i+".col"+j).size()==0)
cont.append("<span class='row"+i+" col"+j+"'>"+ parseInt(c,16)+"</span>");
} else {
var f =$(document).find(".row"+i+".col"+j);
if (f.size()!=0)
f.remove();
}
}
};
if (!state || state=="") {
state = "123456789ABCDEFx";
var astate = state.split("");
for(var j, x, i = astate.length; i; j = parseInt(Math.random() * i), x = astate[--i], astate[i] = astate[j],astate[j] = x);
state = astate.join("");
};
deserState(state);
$("span[class*='row']").live("click",function(ev) {
var o = $(ev.target);
var rc = o.attr("class").split(" ");
var r,c;
var v1 = rc[0].substring(3)|0;
var v2 = rc[1].substring(3)|0;
if (rc[0][0]=='r') { r = v1;c = v2; } else { r = v2;c = v1; }
if (r<3 && $(document).find(".row"+(r+1)+".col"+c).size()==0)
o.removeClass("row"+r).addClass("row"+(r+1));
else if (r>0 && $(document).find(".row"+(r-1)+".col"+c).size()==0)
o.removeClass("row"+r).addClass("row"+(r-1));
else if (c<3 && $(document).find(".row"+r+".col"+(c+1)).size()==0)
o.removeClass("col"+c).addClass("col"+(c+1));
else if (c>0 && $(document).find(".row"+r+".col"+(c-1)).size()==0)
o.removeClass("col"+c).addClass("col"+(c-1));
var nstate = getState();
if (nstate!=state) state = nstate,window.location.hash = state;
});
window.onhashchange = function() {
var nstate = window.location.hash.substring(1);
if (nstate!=state) deserState(nstate);
};
});
</script>
</head>
<body>
<div id='cont'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment