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

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

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
HTML CSS colores con distintos grados de transparencia web safe colors CU01020D
« 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);}
« Última modificación: 07 de Julio 2018, 19:06 por Alex Rodríguez »
En línea
"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: 2050
    • Ver Perfil
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #1 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
En línea

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #2 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!!!
En línea
"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
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #3 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.
En línea

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #4 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
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 por pedro,, »
En línea
"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
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #5 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

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 por pedro,, »
En línea

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #6 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:

  • 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!!!!
En línea
"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
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #7 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.
En línea

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:HTML CSS colores con distintos grados de transparencia web safe colors CU01020D#
« Respuesta #8 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);}
En línea
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"
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".