background and colonnes

dabblet.css

/* background and colonnes */
body {
	background:#333;
}
h1 {
	margin:3em auto 0;
	color:white;
	text-align:center;
}
table {
	width:700px;
	margin:1em auto;
	border-spacing:0;
	background-color:#cde;
	background:
	url(http://lorempixel.com/200/300/sports/2) no-repeat  0% 50%,
	url(http://lorempixel.com/300/200/sports/6) no-repeat  100% 50%,
	linear-gradient( 180deg,#6C7732 0% ,#394217 90%) no-repeat 0 50%,
	linear-gradient(180deg,#010101 20%, #010101 90%) no-repeat 100% 0;
	background-size:30% auto, 70% auto, 30% 100%, 70% 100%;
	border-radius:1em;
	overflow:hidden;
	box-shadow:0 0 5px #FDEFCD;
}
table, td {
	border:2px solid rgba(253, 239, 205,0.5);
	color:green;
	text-shadow:1px 1px  white;
	font-size:18px;
}
td:first-child {
	width:30%;
	text-align:center;
	font-size:150%;
	font-weight:bold;
	color:yellow;
	text-shadow:0 0 1px black;
}
p {
	padding:0 5px;
}
table ~ table {	
	width:80%;
}
table ~ table ~ table {
	background:
	linear-gradient( 180deg,#6C7732 0% ,#394217 90%) no-repeat 0 50%,
	linear-gradient(180deg,#6D7F3D 20%,#3C4D22 90%) no-repeat 100% 0;
	background-size: 30% 100%, 70% 100%;
	}
table ~ table ~ table td {
color:white;
text-shadow:0 0 black
}
td {
	opacity:0.75;
}
tr:hover td {
	opacity:1;
	box-shadow:inset 0 0  200px black, 0 0 10px white;
	color:white;
	text-shadow:0 0 black;
}

dabblet.html

<h1>table avec image et gradient en fond </h1><table>
	<tr>
		<td>Saison 1</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 2</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 3</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
</table>

<h1>table avec image, et gradient en fond, largeur variable </h1>
<table>
	<tr>
		<td>Saison 1</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 2</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 3</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
</table>

<h1>table sans image, avec gradient en fond </h1>
<table>
	<tr>
		<td>Saison 1</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 2</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
	<tr>
		<td>Saison 3</td>
		<td>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
			<p> paragraphe sur une ligne</p>
		</td>
	</tr>
</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}