jeudi 9 octobre 2014

Un tableau avec un arrière-plan (background) en dégradé

Tout est dans le style... (en jaune)


<table border="1" cellpadding="1" cellspacing="1" style="margin-left: auto; margin-right: auto; height:500px; width:500px; background: -moz-linear-gradient(top,  rgba(9,180,242,1) 0%, rgba(9,180,242,0.99) 3%, rgba(166,223,244,0.9) 23%, rgba(18,247,2,0.66) 74%, rgba(18,247,2,0.54) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,180,242,1)), color-stop(3%,rgba(9,180,242,0.99)), color-stop(23%,rgba(166,223,244,0.9)), color-stop(74%,rgba(18,247,2,0.66)), color-stop(100%,rgba(18,247,2,0.54))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(9,180,242,1) 0%,rgba(9,180,242,0.99) 3%,rgba(166,223,244,0.9) 23%,rgba(18,247,2,0.66) 74%,rgba(18,247,2,0.54) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(9,180,242,1) 0%,rgba(9,180,242,0.99) 3%,rgba(166,223,244,0.9) 23%,rgba(18,247,2,0.66) 74%,rgba(18,247,2,0.54) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgba(9,180,242,1) 0%,rgba(9,180,242,0.99) 3%,rgba(166,223,244,0.9) 23%,rgba(18,247,2,0.66) 74%,rgba(18,247,2,0.54) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(9,180,242,1) 0%,rgba(9,180,242,0.99) 3%,rgba(166,223,244,0.9) 23%,rgba(18,247,2,0.66) 74%,rgba(18,247,2,0.54) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09b4f2', endColorstr='#8a12f702',GradientType=0 ); /* IE6-9 */">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>



et ça donne ça





Attention! Blogger n'aime pas ça ! Et à chaque fois qu'on passe en mode "rédiger", il va déglinguer notre code... (enfin, pas toujours...)

Dégradé généré avec Ultimate CSS Gradient Generator de Colorzilla

Aucun commentaire:

Enregistrer un commentaire