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

Autor Tema: HTML Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS matiz CU01020D  (Leído 2338 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
HTML Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS matiz CU01020D
« en: 15 de Noviembre 2017, 18:06 »
Hola a todos !!! paso a dejar el código de respuesta al ejercicio propuesto en la clase CU01020D del tutorial gratuito de programación CSS disponible en esta página web. Desde ya, muchas gracias por la atención. Un saludo,

Luis

PD: Probablemente se pueda resumir la hoja de estilo indicando el color por fila y la transparencia por columna, pero por ahora solo lo puedo hacer así.
 
EJERCICIO

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>>

Código html

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div>
<h3>Tabla Solución</h3>
<table>
<tr>
<td id="td1">RGB 178,34,34 con transparencia 0.1</td>
<td id="td2">RGB 178,34,34 con transparencia 0.2</td>
<td id="td3">RGB 178,34,34 con transparencia 0.3</td>
<td id="td4">RGB 178,34,34 con transparencia 0.4</td>
<td id="td5">RGB 178,34,34 con transparencia 0.5</td>
<td id="td6">RGB 178,34,34 con transparencia 0.6</td>
<td id="td7">RGB 178,34,34 con transparencia 0.7</td>
<td id="td8">RGB 178,34,34 con transparencia 0.8</td>
<td id="td9">RGB 178,34,34 con transparencia 0.9</td>
<td id="td10">RGB 178,34,34 con transparencia 1.0</td>
</tr>
<tr>
<td id="td11">RGB 218,165,32 con transparencia 0.1</td>
<td id="td12">RGB 218,165,32 con transparencia 0.2</td>
<td id="td13">RGB 218,165,32 con transparencia 0.3</td>
<td id="td14">RGB 218,165,32 con transparencia 0.4</td>
<td id="td15">RGB 218,165,32 con transparencia 0.5</td>
<td id="td16">RGB 218,165,32 con transparencia 0.6</td>
<td id="td17">RGB 218,165,32 con transparencia 0.7</td>
<td id="td18">RGB 218,165,32 con transparencia 0.8</td>
<td id="td19">RGB 218,165,32 con transparencia 0.9</td>
<td id="td20">RGB 218,165,32 con transparencia 1.0</td>
</tr>

</table>
</div>
</body>
</html>

Hoja de estilo: estilos.css

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
table{border="2px";}
#td1{background-color: RGBA(178,34,34,0.1);}
#td2{background-color: RGBA(178,34,34,0.2);}
#td3{background-color: RGBA(178,34,34,0.3);}
#td4{background-color: RGBA(178,34,34,0.4);}
#td5{background-color: RGBA(178,34,34,0.5);}
#td6{background-color: RGBA(178,34,34,0.6);}
#td7{background-color: RGBA(178,34,34,0.7);}
#td8{background-color: RGBA(178,34,34,0.8);}
#td9{background-color: RGBA(178,34,34,0.9);}
#td10{background-color: RGBA(178,34,34,1.0);}
#td11{background-color: RGBA(218,165,32,0.1);}
#td12{background-color: RGBA(218,165,32,0.2);}
#td13{background-color: RGBA(218,165,32,0.3);}
#td14{background-color: RGBA(218,165,32,0.4);}
#td15{background-color: RGBA(218,165,32,0.5);}
#td16{background-color: RGBA(218,165,32,0.6);}
#td17{background-color: RGBA(218,165,32,0.7);}
#td18{background-color: RGBA(218,165,32,0.8);}
#td19{background-color: RGBA(218,165,32,0.9);}
#td20{background-color: RGBA(218,165,32,1.0);}
td{text-align:center; width:100px; height:100px;}
« Última modificación: 05 de Junio 2018, 19:16 por Ogramar »
En línea

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS. (CU01020D)
« Respuesta #1 en: 28 de Noviembre 2017, 11:48 »
Hola LuisM.

En la primera línea del archivo css tienes este error table{border="2px";}
Hay que quitar el signo igual y las comillas              table{border:2px;}.

En el ejercicio se pide : Crea un documento HTML con 20 divisiones.
O sea 20 div.
Solo tienes que cambiar un poco de código para que haga lo que pide de todas las maneras te dejo el código :
Codigo HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body background="1.png"> <!--Si le pones una imagen de fondo se nota mas el efecto de transparencia -->
<div>
<h3>Solución</h3>

<div id="td1">RGB 178,34,34 con transparencia 0.1</div>
<div id="td2">RGB 178,34,34 con transparencia 0.2</div>
<div id="td3">RGB 178,34,34 con transparencia 0.3</div>
<div id="td4">RGB 178,34,34 con transparencia 0.4</div>
<div id="td5">RGB 178,34,34 con transparencia 0.5</div>
<div id="td6">RGB 178,34,34 con transparencia 0.6</div>
<div id="td7">RGB 178,34,34 con transparencia 0.7</div>
<div id="td8">RGB 178,34,34 con transparencia 0.8</div>
<div id="td9">RGB 178,34,34 con transparencia 0.9</div>
<div id="td10">RGB 178,34,34 con transparencia 1.0</div>

<div id="td11">RGB 218,165,32 con transparencia 0.1</div>
<div id="td12">RGB 218,165,32 con transparencia 0.2</div>
<div id="td13">RGB 218,165,32 con transparencia 0.3</div>
<div id="td14">RGB 218,165,32 con transparencia 0.4</div>
<div id="td15">RGB 218,165,32 con transparencia 0.5</div>
<div id="td16">RGB 218,165,32 con transparencia 0.6</div>
<div id="td17">RGB 218,165,32 con transparencia 0.7</div>
<div id="td18">RGB 218,165,32 con transparencia 0.8</div>
<div id="td19">RGB 218,165,32 con transparencia 0.9</div>
<div id="td20">RGB 218,165,32 con transparencia 1.0</div>

</div>
</body>
</html>

Codigo CSS
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
 
#td1{background-color: RGBA(178,34,34,0.1);}
#td2{background-color: RGBA(178,34,34,0.2);}
#td3{background-color: RGBA(178,34,34,0.3);}
#td4{background-color: RGBA(178,34,34,0.4);}
#td5{background-color: RGBA(178,34,34,0.5);}
#td6{background-color: RGBA(178,34,34,0.6);}
#td7{background-color: RGBA(178,34,34,0.7);}
#td8{background-color: RGBA(178,34,34,0.8);}
#td9{background-color: RGBA(178,34,34,0.9);}
#td10{background-color: RGBA(178,34,34,1.0);}
#td11{background-color: RGBA(218,165,32,0.1);}
#td12{background-color: RGBA(218,165,32,0.2);}
#td13{background-color: RGBA(218,165,32,0.3);}
#td14{background-color: RGBA(218,165,32,0.4);}
#td15{background-color: RGBA(218,165,32,0.5);}
#td16{background-color: RGBA(218,165,32,0.6);}
#td17{background-color: RGBA(218,165,32,0.7);}
#td18{background-color: RGBA(218,165,32,0.8);}
#td19{background-color: RGBA(218,165,32,0.9);}
#td20{background-color: RGBA(218,165,32,1.0);}

Un saludo  ;)
En línea

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Re:Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS. (CU01020D)
« Respuesta #2 en: 28 de Noviembre 2017, 19:43 »
Muchísimas gracias por las correcciones !!!
Un saludo
Luis
PD: y muchas gracias también por tus revisiones en otros ejercicios. :)
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".