« anterior próximo »
Páginas: [1]

Autor Tema: Ejemplo Crear transparencia en colores CSS rgba y selectores nth-child CU01020D  (Leído 3206 veces)

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Ejemplo Crear transparencia en colores CSS rgba y selectores nth-child CU01020D
« en: 18 de Abril 2015, 07:19 »
Enunciado:

Citar
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>

Respuestas:

html

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_tabla_colores.css">
</head>
<body>
<header>
<h1>Creando divisiones de colores tabla</h1>
</header>

<table border="5" id="tabla1">
<tr>
<th>RGB 178,34,34</th>
<td>178,34,34,con transparencia 0.1</td>
<td>178,34,34,con transparencia 0.2</td>
<td>178,34,34,con transparencia 0.3</td>
<td>178,34,34,con transparencia 0.4</td>
<td>178,34,34,con transparencia 0.5</td>
<td>178,34,34,con transparencia 0.6</td>
<td>178,34,34,con transparencia 0.7</td>
<td>178,34,34,con transparencia 0.8</td>
<td>178,34,34,con transparencia 0.9</td>
<td>178,34,34,con transparencia 1</td>
</tr>
</table>

<br>

<table border="5" id="tabla2">
<tr>
<th>RGB 218,165,32</th>
<td>218,165,32, con transparencia 1</td>
<td>218,165,32, con transparencia 0.9</td>
<td>218,165,32, con transparencia 0.8</td>
<td>218,165,32, con transparencia 0.7</td>
<td>218,165,32, con transparencia 0.6</td>
<td>218,165,32, con transparencia 0.5</td>
<td>218,165,32, con transparencia 0.4</td>
<td>218,165,32, con transparencia 0.3</td>
<td>218,165,32, con transparencia 0.2</td>
<td>218,165,32, con transparencia 0.1</td>
</tr>
</table>

</body>
</html>
css

Código: [Seleccionar]
header{
background-color: rgb(250,150,0);}

#tabla1 th{background-color: rgb(0%,40%,10%);}
#tabla1 td:nth-child(2){background-color: rgba(178,34,34,0.1);}
#tabla1 td:nth-child(3){background-color: rgba(178,34,34,0.2);}
#tabla1 td:nth-child(4){background-color: rgba(178,34,34,0.3);}
#tabla1 td:nth-child(5){background-color: rgba(178,34,34,0.4);}
#tabla1 td:nth-child(6){background-color: rgba(178,34,34,0.5);}
#tabla1 td:nth-child(7){background-color: rgba(178,34,34,0.6);}
#tabla1 td:nth-child(8){background-color: rgba(178,34,34,0.7);}
#tabla1 td:nth-child(9){background-color: rgba(178,34,34,0.8);}
#tabla1 td:nth-child(10){background-color: rgba(178,34,34,0.9);}
#tabla1 td:nth-child(11){background-color: rgba(178,34,34,1);}


#tabla2 th{background-color: rgb(200,100,0);}
#tabla2 td:nth-child(2){background-color: rgba(218,165,32,1);}
#tabla2 td:nth-child(3){background-color: rgba(218,165,32,0.9);}
#tabla2 td:nth-child(4){background-color: rgba(218,165,32,0.8);}
#tabla2 td:nth-child(5){background-color: rgba(218,165,32,0.7);}
#tabla2 td:nth-child(6){background-color: rgba(218,165,32,0.6);}
#tabla2 td:nth-child(7){background-color: rgba(218,165,32,0.5);}
#tabla2 td:nth-child(8){background-color: rgba(218,165,32,0.4);}
#tabla2 td:nth-child(9){background-color: rgba(218,165,32,0.3);}
#tabla2 td:nth-child(10){background-color: rgba(218,165,32,0.2);}
#tabla2 td:nth-child(11){background-color: rgba(218,165,32,0.1);}
« Última modificación: 19 de Abril 2015, 21:29 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Ejemplo Crear transparencia en colores CSS rgba y selectores nth-child CU01020D
« Respuesta #1 en: 19 de Abril 2015, 21:29 »
Hola ejercicio bien resuelto donde además de hacer lo que se pedía lo has maquetado con una tabla y has usado selectores css correctamente. Todo ok!!

Salu2
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".