Skip to content

Instantly share code, notes, and snippets.

@kapowaz

kapowaz/admin.html

Created March 2, 2011 14:37
Show Gist options
  • Save kapowaz/851027 to your computer and use it in GitHub Desktop.
Save kapowaz/851027 to your computer and use it in GitHub Desktop.
Download ZIP
An example of what you can do with CSS 3 in webkit browsers
Raw
admin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Admin Home</title>
<style type="text/css">
html, body { height:100%; margin:0; padding:0; }
body
{
font-family:Lucida Grande, sans-serif;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(220,220,220)),
color-stop(0.5, rgb(255,255,255))
);
}
a
{
color:rgb(0,128,231);
font-weight:bold;
text-decoration:none;
border-bottom:1px solid rgba(0,128,231,0.1);
-webkit-transition-property:border;
-webkit-transition-duration:0.2s;
}
a:hover
{
border-bottom:1px solid rgba(0,128,231,0.5);
-webkit-transition-duration:0.1s;
}
body div#wrapper
{
width:920px;
height:100%;
padding:0 10px 0 10px;
margin:0 auto;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.2)),
color-stop(0.5, rgba(255,255,255,0.1))
);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);
}
body div#wrapper div#header
{
padding:20px 0 0 0;
}
body div#wrapper div#header h1
{
font-family:Helvetica Neue, sans-serif;
font-size:32px;
letter-spacing:-0.04em;
text-shadow:white 0 1px 0;
margin:0;
}
body div#wrapper div#header h1 a
{
color:black;
text-decoration:none;
border-bottom:3px solid rgba(0,0,0,0);
-webkit-transition-duration:0.5s;
-webkit-transition-property:border;
}
body div#wrapper div#header h1 a:hover
{
border-bottom:3px solid rgba(0,0,0,0.4);
-webkit-transition-duration:0.1s;
}
body div#wrapper div#header div#user
{
float:right;
margin-top:-32px;
font-size:12px;
line-height:32px;
}
body div#wrapper div#header ul#navigation
{
list-style:none;
padding:0 0 20px 0;
border-bottom:1px solid white;
-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
}
body div#wrapper div#header ul#navigation li
{
display:inline-block;
height:30px;
font-size:12px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(0,191,243)),
color-stop(1, rgb(0,128,231))
);
border-radius:15px;
margin:0;
-webkit-box-shadow:0 1px 0 white;
}
body div#wrapper div#header ul#navigation li:hover
{
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(84,212,247)),
color-stop(1, rgb(0,128,231))
);
}
body div#wrapper div#header ul#navigation li.utility
{
float:right;
margin-left:5px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(220,220,220)),
color-stop(1, rgb(80,80,80))
);
}
body div#wrapper div#header ul#navigation li.utility:hover
{
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(240,240,240)),
color-stop(1, rgb(80,80,80))
);
}
body div#wrapper div#header ul#navigation li.active
{
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(141,198,63)),
color-stop(1, rgb(29,142,1))
);
}
body div#wrapper div#header ul#navigation li a
{
color:white;
font-weight:normal;
text-decoration:none;
text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
display:block;
height:30px;
line-height:30px;
padding:0 15px;
border-radius:15px;
border-width:0;
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
}
body div#wrapper div#header ul#navigation li a:hover
{
-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);
}
body div#wrapper div#header ul#navigation li a:active
{
-webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.5)),
color-stop(1, rgba(255,255,255,0))
);
}
body div#wrapper div#header ul#navigation li.active a
{
-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);
}
body div#wrapper div#content h2
{
font-family:Helvetica Neue, sans-serif;
font-size:24px;
letter-spacing:-0.04em;
text-shadow:white 0 1px 0;
margin:0 0 10px 0;
}
body div#wrapper div#content table.listview + h2
{
margin-top:20px;
}
body div#wrapper div#content table.listview
{
font-size:12px;
width:100%;
border-collapse:collapse;
}
body div#wrapper div#content table.listview thead th
{
text-align:left;
height:30px;
line-height:30px;
border-bottom:1px solid white;
-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
}
body div#wrapper div#content table.listview tbody td.actions { text-align:right; }
body div#wrapper div#content table.listview tbody td.actions button
{
min-width:60px;
opacity:0.3;
-webkit-transition-property:opacity;
-webkit-transition-duration:0.2s;
}
body div#wrapper div#content table.listview tbody tr:hover td.actions button { opacity:1; -webkit-transition-duration:0.1s; }
body div#wrapper div#content table#contestants.listview thead th.name { width:200px; }
body div#wrapper div#content table#contestants.listview thead th.username { width:220px; }
body div#wrapper div#content table#contestants.listview thead th.twitteruser { width:220px; }
body div#wrapper div#content table#contestants.listview thead th.entries { width:80px; text-align:center; }
body div#wrapper div#content table#contestants.listview thead th.actions {}
body div#wrapper div#content table#contestants.listview tbody td.name {}
body div#wrapper div#content table#contestants.listview tbody td.username {}
body div#wrapper div#content table#contestants.listview tbody td.twitteruser {}
body div#wrapper div#content table#contestants.listview tbody td.entries { text-align:center; }
body div#wrapper div#content table#contestants.listview tbody td.actions button { min-width:100px; }
body div#wrapper div#content table#entries.listview thead th.name { width:200px; }
body div#wrapper div#content table#entries.listview thead th.contestant { width:440px; }
body div#wrapper div#content table#entries.listview thead th.votes { width:80px; text-align:center; }
body div#wrapper div#content table#entries.listview thead th.actions {}
body div#wrapper div#content table#entries.listview tbody td.name {}
body div#wrapper div#content table#entries.listview tbody td.contestant {}
body div#wrapper div#content table#entries.listview tbody td.votes { text-align:center; }
body div#wrapper div#content table#entries.listview tbody td.actions {}
body div#wrapper div#content table.listview tbody tr td
{
height:30px;
line-height:30px;
}
body div#wrapper div#content table.listview tbody tr:nth-child(even) td
{
background-color:rgba(0,191,243,0.1);
}
body div#wrapper div#content table.listview tbody tr:last-child td
{
border-bottom:1px solid white;
-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
}
body div#wrapper div#content table.listview tfoot tr th
{
height:30px;
line-height:20px;
padding:5px 0;
}
body div#wrapper div#content table.listview button
{
display:inline-block;
height:20px;
line-height:20px;
font-size:11px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(0,191,243)),
color-stop(1, rgb(0,128,231))
);
border-radius:15px;
border-width:0;
margin:0;
padding:0 10px;
color:white;
text-shadow:rgba(0,0,0,0.5) 0 -1px 0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.5);
cursor:pointer;
}
body div#wrapper div#content table.listview button:hover
{
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(84,212,247)),
color-stop(1, rgb(0,128,231))
);
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);
}
body div#wrapper div#content table.listview button:active
{
-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(170,234,251)),
color-stop(1, rgb(5,130,231))
);
}
body div#wrapper div#content table.listview tfoot tr th button { min-width:100px; }
body div#wrapper div#content table.listview tfoot tr th button.previous { float:left; }
body div#wrapper div#content table.listview tfoot tr th button.next { float:right; }
body div#wrapper div#content table.listview tfoot tr th span.page { color:rgba(0,0,0,0.8); }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href=".">Admin Home</a></h1>
<div id="user">
You're currently logged in as <strong>Ben Darlow</strong>.
</div>
<ul id="navigation">
<li class="active"><a href="#">Contestants</a></li>
<li><a href="#">Entries</a></li>
<li><a href="#">Administrators</a></li>
<li class="utility"><a href="#">Logout</a></li>
<li class="utility"><a href="#">Preferences</a></li>
</ul>
</div>
<div id="content">
<h2>Contestants</h2>
<table class="listview" id="contestants">
<thead>
<tr>
<th class="name">Name</th>
<th class="username">Username</th>
<th class="twitteruser">Twitter Username</th>
<th class="entries">Entries</th>
<th class="actions"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Ralph Taylor</td>
<td class="username">ralph.taylor</td>
<td class="twitteruser"><a href="#">@rtaylor</a></td>
<td class="entries">1</td>
<td class="actions">
<button>View Entries</button>
</td>
</tr>
<tr>
<td class="name">Lucia Ferne</td>
<td class="username">l.ferne</td>
<td class="twitteruser"><a href="#">@fernie</a></td>
<td class="entries">3</td>
<td class="actions">
<button>View Entries</button>
</td>
</tr>
<tr>
<td class="name">Jennifer Taylor</td>
<td class="username">jennifer.taylor</td>
<td class="twitteruser"><a href="#">@jennytails</a></td>
<td class="entries">1</td>
<td class="actions">
<button>View Entries</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5" scope="row">
<button class="previous">&#x2190; Previous Page</button>
<span class="page">Page 1 of 2</span>
<button class="next">Next Page &#x2192;</button>
</th>
</tr>
</tfoot>
</table> <!-- table#contestants -->
<h2>Entries</h2>
<table class="listview" id="entries">
<thead>
<tr>
<th class="name">Name</th>
<th class="contestant">Contestant</th>
<th class="votes">Votes</th>
<th class="actions"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Geronimo</td>
<td class="contestant"><a href="#">Lucia Ferne</a></td>
<td class="votes">15</td>
<td class="actions">
<button>View</button>
<button>Test</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td class="name">Fire and Ice</td>
<td class="contestant"><a href="#">Lucia Ferne</a></td>
<td class="votes">6</td>
<td class="actions">
<button>View</button>
<button>Test</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td class="name">Smooth</td>
<td class="contestant"><a href="#">Ralph Taylor</a></td>
<td class="votes">11</td>
<td class="actions">
<button>View</button>
<button>Test</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td class="name">Kittens</td>
<td class="contestant"><a href="#">Jennifer Taylor</a></td>
<td class="votes">8</td>
<td class="actions">
<button>View</button>
<button>Test</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td class="name">Minimalist</td>
<td class="contestant"><a href="#">Lucia Ferne</a></td>
<td class="votes">4</td>
<td class="actions">
<button>View</button>
<button>Test</button>
<button>Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" scope="row">
<button class="previous">&#x2190; Previous Page</button>
<span class="page">Page 1 of 2</span>
<button class="next">Next Page &#x2192;</button>
</th>
</tr>
</tfoot>
</table> <!-- table#entries -->
</div> <!-- div#content -->
</div> <!-- div#wrapper -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment