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

Autor Tema: HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D  (Leído 2818 veces)

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
« en: 02 de Septiembre 2016, 09:08 »
Web safe colors. Colores RGBA, HSL, HSLA. Transparencia CSS. Lista de colores HTML - CSS (CU01020D) del curso de aprendizaje de desarrollo web desde cero.

;) Este es mi ejercicio:


Codigo html

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Colores: Ejercicio CU01020D</title>
<link rel="stylesheet"type="text/css"href="Colores.css">
</head>
<body>
<div class="pagina">
<h2>Colores ascendentes</h2>
<center>
<div class="colores">
<div>Color RGB(178, 34, 34) Transparencia(0.1)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.2)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.3)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.4)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.5)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.6)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.7)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.8)</div>
<div>Color RGB(178, 34, 34) Transparencia(0.9)</div>
<div>Color RGB(178, 34, 34) Transparencia(1.0)</div>
</div>
</center>
</div><br>
<div class="pagina1">
<h2>Colores descendentes</h2>
<center>
<div class="colores1">
<div>Color RGB(218, 165, 32) Transparencia(1.0)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.9)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.8)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.7)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.6)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.5)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.4)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.3)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.2)</div>
<div>Color RGB(218, 165, 32) Transparencia(0.1)</div>
</div>
</center>
</div>
</body>
</html>

Codigo CSS

Código: [Seleccionar]
/*titulo*/
h2{ border:2px solid; margin:auto; background-color: #000; color:#fff;}
/*Bloques de la pagina*/
div.pagina, div.pagina1{border:solid; max-width: 30%; text-align: center; margin:auto;}
/*Negrita*/
div.colores div, div.colores1 div{font-weight: bold;height: 40px}
/*Colores ascendentes*/
.colores div:nth-child(1){background-color: rgba(178,34,34,0.1)}
.colores div:nth-child(2){background-color: rgba(178,34,34,0.2)}
.colores div:nth-child(3){background-color: rgba(178,34,34,0.3)}
.colores div:nth-child(4){background-color: rgba(178,34,34,0.4)}
.colores div:nth-child(5){background-color: rgba(178,34,34,0.5)}
.colores div:nth-child(6){background-color: rgba(178,34,34,0.6)}
.colores div:nth-child(7){background-color: rgba(178,34,34,0.7)}
.colores div:nth-child(8){background-color: rgba(178,34,34,0.8)}
.colores div:nth-child(9){background-color: rgba(178,34,34,0.9)}
.colores div:nth-child(10){background-color: rgba(178,34,34,1.0)}
/*FIN Colores ascendentes*/
/*Colores descendentes*/
.colores1 div:nth-child(1){background-color: rgba(218,165,32,1.0)}
.colores1 div:nth-child(2){background-color: rgba(218,165,32,0.9)}
.colores1 div:nth-child(3){background-color: rgba(218,165,32,0.8)}
.colores1 div:nth-child(4){background-color: rgba(218,165,32,0.7)}
.colores1 div:nth-child(5){background-color: rgba(218,165,32,0.6)}
.colores1 div:nth-child(6){background-color: rgba(218,165,32,0.5)}
.colores1 div:nth-child(7){background-color: rgba(218,165,32,0.4)}
.colores1 div:nth-child(8){background-color: rgba(218,165,32,0.3)}
.colores1 div:nth-child(9){background-color: rgba(218,165,32,0.2)}
.colores1 div:nth-child(10){background-color: rgba(218,165,32,0.1)}
/*FIN Colores descendentes*/
« Última modificación: 05 de Septiembre 2016, 14:51 por Alex Rodríguez »
En línea

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio CU01020D
« Respuesta #1 en: 05 de Septiembre 2016, 14:50 »
Hola Chompy129 para poner título a los temas te recomiendo seguir las indicaciones que se dan en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

En el código está todo bien resuelto conforme a la consigna del ejercicio. Había varias maneras de resolver este ejercicio, esta que has presentado tú es una de ellas. Saludos.
En línea

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Re:HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
« Respuesta #2 en: 05 de Septiembre 2016, 20:02 »
Gracias. Ya cambiare la manera en la que pongo los títulos.  :D

Por cierto, ¿hay alguna forma de editar los títulos en los temas?, es que ya llevo varias actividades resueltas con un titulo parecido.
« Última modificación: 05 de Septiembre 2016, 20:19 por Chompy129 »
En línea

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
« Respuesta #3 en: 11 de Septiembre 2016, 19:56 »
Hola, los temas solo los puedes editar unas horas después de publicados. Si hay que hacer una edición posterior la tiene que hacer un administrador del foro. Normalmente intentamos revisar todos los temas de todos los foros y si vemos algo que es necesario cambiar lo cambiamos algún administrador. Saludos.
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".