Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 02 de Septiembre 2016, 09:08

Título: HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
Publicado por: Chompy129 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*/
Título: Re:Ejercicio CU01020D
Publicado por: Alex Rodríguez 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.
Título: Re:HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
Publicado por: Chompy129 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.
Título: Re:HTML y CSS crear efecto degradado cambiando transparencia colores CU01020D
Publicado por: Alex Rodríguez 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.