Skip to content

Instantly share code, notes, and snippets.

@beatak
Created August 4, 2012 20:06
Show Gist options
  • Select an option

  • Save beatak/3259648 to your computer and use it in GitHub Desktop.

Select an option

Save beatak/3259648 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
#menu {
background-repeat: no-repeat;
background-position: center center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOcAAAHzCAYAAADbxAoZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAuTSURBVHic7d0/cxz1Hcfx715ofR1NfE9AVyQzKWIXMKbAPIG4sKEJFCZujAoIRSaZDCQFA4WBgkAh3HjswtB47EJqGMIMcnpO6ZJMTulZHsCmkPxH0lm6k066D/j1qkA+7e3t6X372z+323Rd19UCjcfj2hyP933M0nBY/X7/2Obh/vr6sU17Efr9fi0Nh8f+PG3b1sZodOzPc1yO/r43VdVN+O/pXF/5vJaGw7px6+bkqe+Os23b+vjah7W+vl4bo9Gh3+jZX/j0L67bfvRRpjn9NPabfFO157Otqa66o0/7ic8z+x9Bntlfw4P3a+L7NvF9OC7zX/5Xl9+oq8vLe59pd5xrq6t15fLrc33y/S36j23Rz3+cdr62/T+QDlgOBwQwaXRzmA/AjdGo2rad8bd2OuwH7+Mff0f+u5jyA2NpOKzN8bhu3Lq5ZyX4zO4Hf3n7i6qqevW11+pU/1RVNbU0XNqx4KdZKz55AR3uRZ8eDGowGMz8ez91Z86eXfQscESfr6zU7998q27curmjsz1rzrfffKuqqt774P2TnUN4il25/HoNBoP6w5/++PBnD9ecbdvWF7dv19rqar33wfvVtu2BO2HmuSPlpHZiQKL3Pni/Xnju+XrxpfMPR0MP15zj8bheeO75KSYz67B0Dtt0h9zgn/fQ+sl2T+/g6e+3XbT1b4+mMZedV1OZZrk89pgJ78vUw+wD3tPN8bjGB+zFr9q7rI7bPN+LSdPq9/v11Td/r36//yjOVy5eqjNnz9TV5eWHG+WH2Z75se9eh0kmjxKn+1B4UtCTfr453qy2beuTzz7divOja9dqbXWt7ty7O/NMA/PTtm29cvFSDYfDakbffde9fPFS3bl3195QCLAxGtWVy6/Xz/7zr3//+bevvVrnzp1b9DwBVfXss8/W2upa9aqqhvaSQpzeqWM8ZxU4vN7J7KIHZtVb9AwAk4kTQokTQokTQokTQokTQokTQokTQvV+qlfPgR87ZwhBKMNaCCVOCGWbE0LZ5oRQhrUQSpwQSpwQSpwQSpwQSpwQqndSd+EAZtP76d44Fn7cDGshlDghlDghlDghlL21EMreWghlWAuhxAmRGnFCpk6ckEqcEEqcEEqcEMqlMSFS49KYkMneWoglTgglTgglTgglTkjUOLcWMnX21kIscUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUKkpnpVbsgAebrqVbmVESQyrIVQ4oRQ4oRQ4oRQ4oRQ4oRAXZXjnJCoqXKcE1IZ1kIocUIocUIocUIocUIocUIocUIocUKkRpyQqaue84MgU8+ZtZDJsBZCiRNCiRNCiRMiOZQCoTpxQipxQihxQihxQihxQihxQihxQihxQihxQii3Y4BQvc7tGCCSL1tDKNucEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEEqcEMr9OSFUr9yfEyIZ1kIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUIocUKkRpyQqRMnRGqa6rlqLQTquuq53jtkMqyFUIa1EMqwFkIZ1kIocUIocUIocUKixul7kKlz+h7EEieEEieEEieEEieEEieEEidEcpwTQjnOCbHECaHECaHECaHECaHECaFc4AtCucAXhDKshVDihFC9KgNbSNSrsksIEhnWQihxQihxQihxQihxQihxQihxQihxQihxQihxQihxQihxQihxQihxQihxQigX+IJQLvAFoQxrIZQ4IZQ4IZQ4IZQ4IZQ4IZQ4IVBX4oRITYkTYokTQokTQrnLGISy5oRQbgEIoaw5IZQ4IZCTECCUkxAgmDghkGEthDKshWDihFDihEC2OSGUbU4IJk4IZFgLoQxrIZg4IZQ4IZTLlEAoa04I5TIlEMqaE0KJE0KJE0KJEwI5fQ9COX0PgokTQokTQokTQokTQvWcvAeBmqZ6vpMCgbrOsBYyNeKETNacEEucEEqcEEqcEEqcEEqcEEqcEEqcEEqcEMkZQhDKGUIQy71SIND21fd8oxPSuPoeBBMnhBInhBInRHKcE0I5zgmhrDkhlDUnxBInhBInhBInhBInhBInhBInhBInhBInhBInhBInhBInhBInRPKtFAjlWykQS5wQSpwQSpwQSpwQSpwQSpwQSpwQSpwQyv05IZT7c0Iow1oIJU4IJU4IJU4I1JU4IVJTDqVALIdSIJLLlEAolymBUNacEMqaE2KJE0KJE0KJEwI5QwhCbZ8hBCQSJ4QSJ4Ry4juEcuI7hDKshVDihFDihESNb6VAps63UiCWOCGUOCGUOCGUOCGUOCGUOCGUOCGUOCGQy5RAKDcygmC+zwmhDGshlDghlDghVM8WJ2Tq2VcLmQxrIZTjnBDKcU4IZVgLoeythVD21kIow1oIJU4IZZsTQtnmhFCGtRBKnBDKNieEss0JoQxrIZQ4IZQ4IZQ4IZQ4IZQ4IZQ4IZQ4IZQ4IZBbAEKo7VsAAonECZEacUKkxhXfIVPXueI7pDKshVDihFDihFDihFDihEiOc0KoTpyQSpwQSpwQSpwQSpwQyonvEMqJ7xDKsBZCiRNC2eaEULY5IZRhLYQSJ4QSJ4QSJ0TyfU4I5fucEMtxTgjlOCeEMqyFUOKEUOKEUOKEUOKEUOKEUOKEQF2JEyI1JU6IJU4IJU4IJU4IJU4IZG8thLK3FlI1LlMCmTqXKYFY4oRQ4oRQ4oRQ4oRQ4oRIDqVAKIdSIJY4IZQ4IZQ4IZQ4IZQ4IZQ4IZLjnBDKcU6IJU4IJU4IJU6IZIcQhLJDCGKJE0L1ukXPATBRr1n0HAATGdZCKHFCKNucEMo2J4QyrIVQ4oREbgEIodwCEHKJEwJ1JU6I1JQ4IZY4IZQ4IZQ4IZQ4IZQ4IZQ4IZSvjEGoXlO+NAaJelsnCgFpbHNCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCKHFCqF5V1drq2qLnA9ilNxwO6/rKSt1fX1/0vAAPNE098+uzZ6qq6srl39VX33xd/X5/wXMFT7eN0ajuf/ttNd9//31XVfXxtQ9rPB7XJ599uuh5g6dW27b1ysVLVVXVdF3XPfrhyzUYnK62bff59aYe3Jms2/6/gz36nd0OGk73+/1aGg6nepbdJs3fpJ9tjsc1Ho9nmPKTX8/ehzZV3cnfyW1pOKx+vz/De3Q0k97Hh8+93zJY0PI52Azv8Rw8vqzOnz9fL750/lGcVVUfXbtWH137sH5z4UKdHpyeOLPH+2Y/WCCPL5h5LaT9p7P3dU37vLsfN+k1HN7j8/Xgv08PBjUYDI48bbLcX79f11c+r6+++bo2x+OdcVZtBbq2ulZ37t1d1DzCU6dt2zr33PP1t88+rTNnz1bVhOOcS8NhbY7H9dd33p1xqAcc1ttvvlUXLlx4GGZV7V1ztm1bv/rFL0985n5MHmzPbTns8LeesL01n+Hwme298LNMs6uqf6zfn2p+hsNhneqfOsIc7rbfvoyd89BV1T9HGwfsGznY48toHvtPpnV/exkPh8P6+fbm45e3v6gbt27uOFqyJ86qqr+8825dX1k51BNPv+12mB1LJ2ROOym2Xtes27o7/632+fd4x7CzZ8/y2vEc8/hgO9kdQQ/cuXd3z47PiXFWVY3H49rcNazducbYsjEaTf0J1rZtbYxGs8zzIU2zgJ/8mIOC2S+WH9ofajTlazzM2u3geVnMH9d87f8aNsf/q/H4vyc3O3O0tdbcucPw6vJyXV1+Y89j/w8CODw8VpdBCgAAAABJRU5ErkJggg==);
width: 231px;
height: 499px;
margin: 0;
padding: 12px 0 0 0;
list-style: none;
display: block;
}
#menu > li {
background-repeat: no-repeat;
background-position: center 35px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAADCAYAAAAgEgc0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABR0RVh0Q3JlYXRpb24gVGltZQA4LzQvMTJCeuQEAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAAQNJREFUKJF1kMGNwjAQRb/2HjcQr+yVTxsJJM4gUQaIO4g7iDasFJA0EBoIDTgNhAZcgSv4e1kjYoe5jPRn3vxvY3CObdMwhEC8VQiBbdNwHMeJDgCDc7x3XaZHxnufzR59/5GprZ1l7l03y3jvWVubZY7Mo+9nmdc7V4sljdJsm2ayWFtLozRXi2V2wChNo3QW6Ha50ijN7Xoz0Z/jyMgMzk1m5+OJRmkedvsZ5odGaT6Tjz/s9jRK83w8TfTBuZdPymzXGxqlebtc+VVKCQCQ/z1W1MtEBwAhxAemBAD8VlV2KzKxx5LyGwBQJUwhBIQoIIRAkTBxN/V/90hzx0ylLPEHtQug8qj1tAMAAAAASUVORK5CYII=);
width: 100%;
height: 35px;
margin: 0;
padding: 10px 0;
display: block;
text-align: center;
}
#menu > li.last {
background-image: none;
}
<!-- content to be placed inside <body>…</body> -->
<ul id="menu">
<li>Menus</li>
<li>About</li>
<li>News</li>
<li>Directions</li>
<li>Reservations</li>
<li class="last">Press</li>
</ul>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment