21
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Efecto transparencia en colores CSS con RGB background-color nth-child CU01020D
« en: 20 de Enero 2016, 21:53 »
Hola!
Ahí va mi propuesta de resolución del ejercicio CU01020D
Y el archivo css es este
No se si existe una forma más corta de hacerlo.
Vuestra página es cojonuda.
Un saludo!
Gracias!
Ahí va mi propuesta de resolución del ejercicio CU01020D
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="palabras clave">
<meta name="description" content="Portal básico">
<link rel="stylesheet" type="css/text" href="Ejer1020.css">
<title>Portal Básico</title>
</head>
<body>
<div id="page">
<!--Cabecera-->
<div id="header">
</div>
<!--Contenedor-->
<div id="wrapper">
<!--Menú-->
<div id="menu">
</div>
<!--Fin menú-->
<!--Cuerpo-->
<div id="body">
<table>
<tr>
<th>Color RGB 178,34,34</th>
<td>T. 0.1</td>
<td>T. 0.2</td>
<td>T. 0.3</td>
<td>T. 0.4</td>
<td>T. 0.5</td>
<td>T. 0.6</td>
<td>T. 0.7</td>
<td>T. 0.8</td>
<td>T. 0.9</td>
<td>T. 1</td>
</tr>
<tr>
<th>Color RGB 218,165,32</th>
<td>T. 0.1</td>
<td>T. 0.2</td>
<td>T. 0.3</td>
<td>T. 0.4</td>
<td>T. 0.5</td>
<td>T. 0.6</td>
<td>T. 0.7</td>
<td>T. 0.8</td>
<td>T. 0.9</td>
<td>T. 1</td>
</tr>
</table>
</div>
<!--Fin cuerpo-->
</div>
<!--Fin contenedor-->
<div id="footer">
</div>
</div>
</body>
</html>
Y el archivo css es este
Código: [Seleccionar]
/*Ejercicio 1020D*/
table {border:1px solid}
table th{background-color:antiquewhite;}
table tr:first-child td:nth-child(2){background-color:rgba(178,34,34,0.1);}
table tr:first-child td:nth-child(3){background-color:rgba(178,34,34,0.2);}
table tr:first-child td:nth-child(4){background-color:rgba(178,34,34,0.3);}
table tr:first-child td:nth-child(5){background-color:rgba(178,34,34,0.4);}
table tr:first-child td:nth-child(6){background-color:rgba(178,34,34,0.5);}
table tr:first-child td:nth-child(7){background-color:rgba(178,34,34,0.6);}
table tr:first-child td:nth-child(8){background-color:rgba(178,34,34,0.7);}
table tr:first-child td:nth-child(9){background-color:rgba(178,34,34,0.8);}
table tr:first-child td:nth-child(10){background-color:rgba(178,34,34,0.9);}
table tr:first-child td:nth-child(11){background-color:rgba(178,34,34,1);}
table tr:first-child+tr td:nth-child(2){background-color:rgba(218,165,32,0.1);}
table tr:first-child+tr td:nth-child(3){background-color:rgba(218,165,32,0.2);}
table tr:first-child+tr td:nth-child(4){background-color:rgba(218,165,32,0.3);}
table tr:first-child+tr td:nth-child(5){background-color:rgba(218,165,32,0.4);}
table tr:first-child+tr td:nth-child(6){background-color:rgba(218,165,32,0.5);}
table tr:first-child+tr td:nth-child(7){background-color:rgba(218,165,32,0.6);}
table tr:first-child+tr td:nth-child(8){background-color:rgba(218,165,32,0.7);}
table tr:first-child+tr td:nth-child(9){background-color:rgba(218,165,32,0.8);}
table tr:first-child+tr td:nth-child(10){background-color:rgba(218,165,32,0.9);}
table tr:first-child+tr td:nth-child(11){background-color:rgba(218,165,32,1);}
No se si existe una forma más corta de hacerlo.
Vuestra página es cojonuda.
Un saludo!
Gracias!