Skip to content

Instantly share code, notes, and snippets.

@narqo

narqo/dabblet.css

Created February 11, 2012 23:50
Show Gist options
  • Save narqo/1805178 to your computer and use it in GitHub Desktop.
Save narqo/1805178 to your computer and use it in GitHub Desktop.
Download ZIP
Table row with border-radius and box-shadow playgroud
Raw
dabblet.css
/**
* Table row with border-radius and box-shadow playgroud
*/
html{
min-height:100%;
}
body{
background-image:-o-linear-gradient(top, #fff, #dcdcdc);
background-image:-moz-linear-gradient(top, #fff, #dcdcdc);
background-image:-webkit-linear-gradient(top, #fff, #dcdcdc);
background-image:linear-gradient(top, #fff, #dcdcdc);
font:82.5%/1.6em Arial, sans-serif;
margin:1em 2em;
padding:0;
}
table{
border:0;
border-collapse:separate;
border-spacing:0px;
font:1em/1.4em Arial, sans-serif;
}
tr{
vertical-align: top;
}
tr:hover{
/* hello firefox */
box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);
}
/* webkit + opera */
td{
position:relative;
}
tr:hover td::before{
background-color:#e2f3ac;
background-image:-o-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
background-image:-webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);
border-radius:5px;
display:block;
padding:0 9px 0 0;
content:'';
position:absolute;
left:0;
top:0;
z-index:-1;
width:100%;
height:100%;
}
tr:hover td:last-child::before{
padding-right:0;
}
/* opera */
noindex:-o-prefocus, td::before{
border-radius:0 !important;
}
/* firefox */
tr:hover td, x:-moz-any-link{
background-color:#e2f3ac;
background-image:-moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
position:static;
}
tr:hover td::before, x:-moz-any-link{
background:none;
display:none;
position:static;
padding:0;
}
td{
padding:10px 30px;
}
td:first-child{
padding-left:22px;
}
td:last-child{
text-align:right;
}
.note{
font-size:0.85em;
line-height:1.2em;
display:block;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<table>
<tr>
<td>5 звезд <span class="note">Щелково</span></td>
<td>10:15 16:45</td>
<td>750</td>
</tr>
<tr>
<td>5 звезд <span class="note">Бирюлево</span></td>
<td>10:15 12:30</td>
<td>400</td>
</tr>
<tr>
<td>5 звезд на Павелецкой</td>
<td>10:15 16:20</td>
<td>1400</td>
</tr>
<tr>
<td>Kinostar De Lux <span class="note">Химки</span></td>
<td>10:50 15:30</td>
<td>700</td>
</tr>
<tr>
<td>Kinostar De Lux Теплый Стан</td>
<td>10:50 15:00</td>
<td>400</td>
</tr>
<tr>
<td>Kinostar Miami</td>
<td>10:20 14:45</td>
<td>10&#160;300</td>
</tr>
<tr>
<td>Kinostar New York</td>
<td>10:20 12:35 17:10</td>
<td>600</td>
</tr>
<tr>
<td>Брест</td>
<td>10:30 16:20 22:10</td>
<td>350</td>
</tr>
<tr>
<td>Бульвар</td>
<td>17:45</td>
<td>420</td>
</tr>
<tr>
<td>Каро Фильм «Киргизия»</td>
<td>9:25 17:00</td>
<td>600</td>
</tr>
<tr>
<td>Каро Фильм на Вернадского</td>
<td>9:10 13:15 17:20 21:25 1:30</td>
<td>410</td>
</tr>
</table>
Raw
settings.json
{"view":"separate","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment