Autor Tema: HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#  (Leído 704 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!! Dejo la resolución de mi ejercicio CU01020D del taller de programación web con CSS desde cero.

Saludos!!!!

CU01020D.html
Código: [Seleccionar]
<!DOCTYPE HTML">
<!--Código base para el curso -->
<html lang="es">
  <head>
    <title>Web Safe Color</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Ejercicio CU01020D - Entrega numero 20 - aprenderaprogramar.com" />
    <meta name="keywords" content="CU01020D,aprenderaprogramr.com,web safe color,colores, css, rgba, hsl, colores html" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01020D.css"/>
  </head>
  <body>
    <h1>Resolución ejercicio CU01020D</h1>
    <div>RGB 178,34,34 con transparencia 0.1</div>
    <div>RGB 178,34,34 con transparencia 0.2</div>
    <div>RGB 178,34,34 con transparencia 0.3</div>
    <div>RGB 178,34,34 con transparencia 0.4</div>
    <div>RGB 178,34,34 con transparencia 0.5</div>
    <div>RGB 178,34,34 con transparencia 0.6</div>
    <div>RGB 178,34,34 con transparencia 0.7</div>
    <div>RGB 178,34,34 con transparencia 0.8</div>
    <div>RGB 178,34,34 con transparencia 0.9</div>
    <div>RGB 178,34,34 con transparencia 1.0</div>
   
    <div>RGB 218,165,32 con transparencia 1.0</div>
    <div>RGB 218,165,32 con transparencia 0.9</div>
    <div>RGB 218,165,32 con transparencia 0.8</div>
    <div>RGB 218,165,32 con transparencia 0.7</div>
    <div>RGB 218,165,32 con transparencia 0.6</div>
    <div>RGB 218,165,32 con transparencia 0.5</div>
    <div>RGB 218,165,32 con transparencia 0.4</div>
    <div>RGB 218,165,32 con transparencia 0.3</div>
    <div>RGB 218,165,32 con transparencia 0.2</div>
    <div>RGB 218,165,32 con transparencia 0.1</div>
  </body>
</html>

CU01020D.css
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/

body {
  margin: auto;
  text-align: center;
  width: 60%;
  font-size:120%;
}

div:nth-child(1){background-color: rgba(178,34,34,0.1);}
div:nth-child(2){background-color: rgba(178,34,34,0.2);}
div:nth-child(3){background-color: rgba(178,34,34,0.3);}
div:nth-child(4){background-color: rgba(178,34,34,0.4);}
div:nth-child(5){background-color: rgba(178,34,34,0.5);}
div:nth-child(6){background-color: rgba(178,34,34,0.6);}
div:nth-child(7){background-color: rgba(178,34,34,0.7);}
div:nth-child(8){background-color: rgba(178,34,34,0.8);}
div:nth-child(9){background-color: rgba(178,34,34,0.9);}
div:nth-child(10){background-color: rgba(178,34,34,1);}
div:nth-child(11){background-color: rgba(218,165,32,1);}
div:nth-child(12){background-color: rgba(218,165,32,0.9);}
div:nth-child(13){background-color: rgba(218,165,32,0.8);}
div:nth-child(14){background-color: rgba(218,165,32,0.7);}
div:nth-child(15){background-color: rgba(218,165,32,0.6);}
div:nth-child(16){background-color: rgba(218,165,32,0.5);}
div:nth-child(17){background-color: rgba(218,165,32,0.4);}
div:nth-child(18){background-color: rgba(218,165,32,0.3);}
div:nth-child(19){background-color: rgba(218,165,32,0.2);}
div:nth-child(20){background-color: rgba(218,165,32,0.1);}
« última modificación: 19 de Agosto 2016, 10:49 de Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 1878
    • Ver Perfil
Hola has resuelto el ejercicio a la perfección

He visto otra vez el problema de <!—

Cuando debería ser <!--

He editado tu mensaje y lo he corregido pero debes tener cuidado con eso porque aunque tú lo veas bien otras personas que vean la web por internet podrían tener problemas.

Saludos

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Hola Alex, sabes que no se cuando lo modifica ni por que :-( se que lo hace el MAC, y solo en esa etiqueta... voy a prestara mas atención en eso...

Gracias como siempre!!!
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
He copiado y pegado los codigos y me salen 9 rojos y 11 amarillos.
He mirado y remirado tanto el codigo HTML como el CSS y esta todo correcto.

No se si es un error de mi navegador o del codigo.

Saludos.

PD. No he abierto un nuevo tema porque no lo consideraba de importancia.

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Hola José Antonio, hace tanto tiempo que no me daba una vuelta por estos foros!!!! poco mas de un año...

Te comento, copie y pegue de nuevo el código y a mi se me muestra de forma correcta. Mira las imagenes.


http://imgur.com/qzewaZE
http://imgur.com/ftRjx3n

Agrego los links de las imagenes, porque imgur a veces no deja visualizar las mismas :-(

Te pediria por favor, si podrias enviar una imagen de como es tu resultado, ademas de el SO que usas y el navegadir. Y si no es mucho pedir, el html y css, jajajajaja

Saludos para vos y todos los del foro!!!
« última modificación: 26 de Abril 2017, 18:59 de pedro,, »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
El resultado es el mismo que el tuyo. Si te fijas en la primera franja amarilla pone:
RGB 178.3.34 con trasparencia 1.0 tendría que ser el color rojo sin transparencia, sin embargo sale un amarillo opaco, y el siguiente que tendría que ser el amarillo opaco, sale con algo de transparencia.
Aqui te dejo el codigo html:
Código: [Seleccionar]
<!DOCTYPE HTML">
<!--Código base para el curso -->
<html lang="es">
  <head>
    <title>Web Safe Color</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Ejercicio CU01020D - aprenderaprogramar.com" />
    <meta name="keywords" content=aprenderaprogramr.com,web safe color,colores, css, rgba, hsl, colores html" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="estilos6.css"/>
  </head>
  <body>
    <h1>Resolución ejercicio CU01020D</h1>
    <div>RGB 178,34,34 con transparencia 0.1</div>
    <div>RGB 178,34,34 con transparencia 0.2</div>
    <div>RGB 178,34,34 con transparencia 0.3</div>
    <div>RGB 178,34,34 con transparencia 0.4</div>
    <div>RGB 178,34,34 con transparencia 0.5</div>
    <div>RGB 178,34,34 con transparencia 0.6</div>
    <div>RGB 178,34,34 con transparencia 0.7</div>
    <div>RGB 178,34,34 con transparencia 0.8</div>
    <div>RGB 178,34,34 con transparencia 0.9</div>
    <div>RGB 178,34,34 con transparencia 1.0</div>
   
    <div>RGB 218,165,32 con transparencia 1.0</div>
    <div>RGB 218,165,32 con transparencia 0.9</div>
    <div>RGB 218,165,32 con transparencia 0.8</div>
    <div>RGB 218,165,32 con transparencia 0.7</div>
    <div>RGB 218,165,32 con transparencia 0.6</div>
    <div>RGB 218,165,32 con transparencia 0.5</div>
    <div>RGB 218,165,32 con transparencia 0.4</div>
    <div>RGB 218,165,32 con transparencia 0.3</div>
    <div>RGB 218,165,32 con transparencia 0.2</div>
    <div>RGB 218,165,32 con transparencia 0.1</div>
  </body>
</html>


CSS
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/

body {
  margin: auto;
  text-align: center;
  width: 60%;
  font-size:120%;
}
div{
height: 125px;
text-align: center;
font-weight: bold;
color: white;
border: 2px solid;
}

div:nth-child(1){background-color: rgba(178,34,34,0.1);}
div:nth-child(2){background-color: rgba(178,34,34,0.2);}
div:nth-child(3){background-color: rgba(178,34,34,0.3);}
div:nth-child(4){background-color: rgba(178,34,34,0.4);}
div:nth-child(5){background-color: rgba(178,34,34,0.5);}
div:nth-child(6){background-color: rgba(178,34,34,0.6);}
div:nth-child(7){background-color: rgba(178,34,34,0.7);}
div:nth-child(8){background-color: rgba(178,34,34,0.8);}
div:nth-child(9){background-color: rgba(178,34,34,0.9);}
div:nth-child(10){background-color: rgba(178,34,34,1);}
div:nth-child(11){background-color: rgba(218,165,32,1);}
div:nth-child(12){background-color: rgba(218,165,32,0.9);}
div:nth-child(13){background-color: rgba(218,165,32,0.8);}
div:nth-child(14){background-color: rgba(218,165,32,0.7);}
div:nth-child(15){background-color: rgba(218,165,32,0.6);}
div:nth-child(16){background-color: rgba(218,165,32,0.5);}
div:nth-child(17){background-color: rgba(218,165,32,0.4);}
div:nth-child(18){background-color: rgba(218,165,32,0.3);}
div:nth-child(19){background-color: rgba(218,165,32,0.2);}
div:nth-child(20){background-color: rgba(218,165,32,0.1);}


http://imgur.com/vSvP8IV

Gracias por la respuesta y dime en que puedo estar equivocado.

PD el navegador que utilizo es el FireFox y SO es Win7
« última modificación: 26 de Abril 2017, 19:00 de pedro,, »

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Hola nuevamente. Disculpa estaba en el trabajo y hoy no pude hacer mas nada que Diseño, jajajajaja.

Ya entendi tu consulta. Es un error que cometemos todos (veras que me incluyo) cuando estamos aprendiendo, en especial el tema del nth-child.

Voy a tratar de explicarlo sin enliarlo...

Primero y antes que nada, por recomendación de la W3C (el consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web) cada vez que quieras acceder a un elemento a través de nth-child lo hagas o bien mediante un id o una clase del elemento.

Pasa que nth-child(n) se refiere al hermano n de un padre x en DOM, NO AL n ELEMENTO IGUAL seria algo así:

body
    <p>hijo 1 de body
    <p>hijo 2 de body
    <div>hijo 3 de body
        <p>hijo 1 de hijo 3
        <p> hijo 2 de hijo 3
        <p>hijo 3 de hijo 3
    <p>hijo 4 de body

entonces para poder acceder a los distintos elementos deberías hacerlo de la siguiente manera.
p:nth-child(1) ==> elemento p - Hijo 1 de body // NO EL PRIMER P
p:nth-child(2) ==> elemento p - Hijo 2 de body // NO EL SEGUNDO P
div:nth-child(3) ==> elemento div - Hijo 3 de body // NO EL PRIMER DIV

y ahora?? Pues aca es donde entran las recomendaciones, ya que si escribes esto
p:nth-child(4), no vas a acceder al hijo 1 del DIV sino al hijo 4 del BODY, además suponiendo que al p:nth-child(1) le pones color naranja de fondo, pues también se pintaría el primer hijo del div (los dos son primeros hijos)

La forma correcta de poder acceder a esos elementos son
div:nth-child(3) p:nth-child(1) ==> elemento p, hijo 1 del elemento div hijo 3 del body
div:nth-child(3) p:nth-child(2) ==> elemento p, hijo 2 del elemento div hijo 3 del body
div:nth-child(3) p:nth-child(3) ==> elemento p, hijo 3 del elemento div hijo 3 del body

Mas consideraciones sobre el tema... que sucede con esto???

p:nth-child(3){background-color: orange}

Pues que solo se pintaría de naranja el 3 hijo del div, porque es el único párrafo que es también 3 hijo

y con esto???

p:nth-child(3){background-color: orange}

contéstalo tu a ver entendiste algo de lo que trate de explicar, jajajajajaja.

En definitiva, para solucionar el ejercicio, casi como siempre tienes varias formas de hacerlo:

  • empiezas desde el nth-child(2) ya que el H1 es el primer hijo
  • encierras todos los div, dentro de otro y los llamas de la siguiente manera:
              div div:nth-child(1)
  • le pones un id (por ejemplo div id="correcto") y lo llamas de la siguiente manera:
              #correcto :nth-child(1)
  • le pones un clase (por ejemplo div class="correcto") y lo llamas de la siguiente manera:
              .correcto :nth-child(1)


Saludos desde el sur de Argentina!!!!
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Solucionado.
Hice diferentes pruebas siguiendo tus consejos, y ya me aparecen los colores de forma correcta.

Gracias por todo y un saludo muy grande desde España.

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Ok Gracias!!!

Dejo el CSS modificado

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/

body {
  margin: auto;
  text-align: center;
  width: 60%;
  font-size:120%;
}

/*  modifique el css comenzando desde el nth-child(2) gracias a una consulta del usuario
    joseantonio60, ya que el primer div de la pagina es el segundo "hijo" de body
    Modificado el 26/04/2017*/

div:nth-child(2){background-color: rgba(178,34,34,0.1);}
div:nth-child(3){background-color: rgba(178,34,34,0.2);}
div:nth-child(4){background-color: rgba(178,34,34,0.3);}
div:nth-child(5){background-color: rgba(178,34,34,0.4);}
div:nth-child(6){background-color: rgba(178,34,34,0.5);}
div:nth-child(7){background-color: rgba(178,34,34,0.6);}
div:nth-child(8){background-color: rgba(178,34,34,0.7);}
div:nth-child(9){background-color: rgba(178,34,34,0.8);}
div:nth-child(10){background-color: rgba(178,34,34,0.9);}
div:nth-child(11){background-color: rgba(178,34,34,1);}
div:nth-child(12){background-color: rgba(218,165,32,1);}
div:nth-child(13){background-color: rgba(218,165,32,0.9);}
div:nth-child(14){background-color: rgba(218,165,32,0.8);}
div:nth-child(15){background-color: rgba(218,165,32,0.7);}
div:nth-child(16){background-color: rgba(218,165,32,0.6);}
div:nth-child(17){background-color: rgba(218,165,32,0.5);}
div:nth-child(18){background-color: rgba(218,165,32,0.4);}
div:nth-child(19){background-color: rgba(218,165,32,0.3);}
div:nth-child(20){background-color: rgba(218,165,32,0.2);}
div:nth-child(21){background-color: rgba(218,165,32,0.1);}
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

 

Esto es un laboratorio de ideas...
Aprender a programar

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