Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: hymsoft en 16 de Agosto 2016, 03:34

Título: HTML CSS colores con distintos grados de transparencia web safe colors CU01020D
Publicado por: hymsoft en 16 de Agosto 2016, 03:34
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);}
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: Alex Rodríguez en 19 de Agosto 2016, 10:51
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
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: hymsoft en 19 de Agosto 2016, 15:41
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!!!
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: joseantonio60 en 20 de Abril 2017, 19:33
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.
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: hymsoft en 25 de Abril 2017, 18:01
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.png)
(http://imgur.com/ftRjx3n.png)

http://imgur.com/qzewaZE (http://imgur.com/qzewaZE)
http://imgur.com/ftRjx3n (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!!!
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: joseantonio60 en 25 de Abril 2017, 22:47
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.png)
http://imgur.com/vSvP8IV (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
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: hymsoft en 26 de Abril 2017, 05:01
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:



Saludos desde el sur de Argentina!!!!
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: joseantonio60 en 26 de Abril 2017, 12:16
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.
Título: Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
Publicado por: hymsoft en 26 de Abril 2017, 18:17
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);}