Autor Tema: HTML Transparencia CSS establecer diferentes grados de opacidad colores CU01020D (Leído 2157 veces)

EnigmaticNerd · « **en:** 19 de Agosto 2017, 01:40 »

Buenas noches. Este es el enunciado del ejercicio CU01020D del tutorial de programación web con CSS usando Notepad++ como editor:

Citar

Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>
            CU01020D
        </title>
        <meta charset="utf-8"/>
        <style type="text/css">
            
            #contenedor{
                width:50%; 
                margin:auto;
                margin-top: 2%; 
                font-size: 22px;
                text-align:center;
             }

            /*Estilos para el color RGB (178,34,34)*/
            #primero{background-color: rgba(0, 0, 255, 0.3);}
            #primero div:first-child{color:rgba(178,34,34,0.1);}
            #primero div:nth-child(2){color:rgba(178,34,34,0.2);}
            #primero div:nth-child(3){color:rgba(178,34,34,0.3);}
            #primero div:nth-child(4){color:rgba(178,34,34,0.4);}
            #primero div:nth-child(5){color:rgba(178,34,34,0.5);}
            #primero div:nth-child(6){color:rgba(178,34,34,0.6);}
            #primero div:nth-child(7){color:rgba(178,34,34,0.7);}
            #primero div:nth-child(8){color:rgba(178,34,34,0.8);}
            #primero div:nth-child(9){color:rgba(178,34,34,0.9);}
            #primero div:last-child{color:rgba(178,34,34,1.0);}

            /*Estilos para el color RGB(218,165,32)*/
            #segundo{background-color: rgba(0,0,0,0.6);}
            #segundo div:first-child{color:rgba(218,165,32,0.1);}
            #segundo div:nth-child(2){color:rgba(218,165,32,0.2);}
            #segundo div:nth-child(3){color:rgba(218,165,32,0.3);}
            #segundo div:nth-child(4){color:rgba(218,165,32,0.4);}
            #segundo div:nth-child(5){color:rgba(218,165,32,0.5);}
            #segundo div:nth-child(6){color:rgba(218,165,32,0.6);}
            #segundo div:nth-child(7){color:rgba(218,165,32,0.7);}
            #segundo div:nth-child(8){color:rgba(218,165,32,0.8);}
            #segundo div:nth-child(9){color:rgba(218,165,32,0.9);}
            #segundo div:last-child{color:rgba(218,165,32,1.0);}
        </style>
    </head>
    <body>

        <!--INICIO DEL CONTENEDOR-->
        <div id="contenedor">

                <!--INICIO DEL PRIMER BLOQUE-->
            <div id="primero">

                <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>
                 <!--FIN DEL PRIMER BLOQUE-->
           
          
            <hr/>

                 <!--INICIO DEL SEGUNDO BLOQUE-->
            <div id="segundo">

                <div>RGB 218,165,32 con transparencia 0.1</div>
                <div>RGB 218,165,32 con transparencia 0.2</div>
                <div>RGB 218,165,32 con transparencia 0.3</div>
                <div>RGB 218,165,32 con transparencia 0.4</div>
                <div>RGB 218,165,32 con transparencia 0.5</div>
                <div>RGB 218,165,32 con transparencia 0.6</div>
                <div>RGB 218,165,32 con transparencia 0.7</div>
                <div>RGB 218,165,32 con transparencia 0.8</div>
                <div>RGB 218,165,32 con transparencia 0.9</div>
                <div>RGB 218,165,32 con transparencia 1.0</div>

            </div>
                <!--FIN DEL SEGUNDO BLOQUE-->
        </div>
        
        <!--FIN DEL CONTENEDOR-->
    </body>
</html>

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

Alex Rodríguez · « **Respuesta #1 en:** 03 de Septiembre 2017, 12:20 »

Hola EnigmaticNerd, el ejercicio cumple con lo que se pedía.

Por favor para poner el título de los temas guíate por lo que se dice en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Es preferible empezar poniendo una descripción y palabras clave y terminar con el código del ejercicio.

Saludos

EnigmaticNerd · « **Respuesta #2 en:** 03 de Septiembre 2017, 15:15 »

Buenos días. Me disculpo por no hacer cuidado en la normas del foro para publicar correctamente; todos los temas los he publicado de la misma forma.

Aplicaré la regla al próximo post. Gracias por la revisión y aclaración.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: