Created
September 15, 2013 15:47
-
-
Save gcyrillus/6571910 to your computer and use it in GitHub Desktop.
background and colonnes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","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