Autor Tema: HTML y CSS efectos sombra o vapor texto, text-shadow, blur, ellipsis, CU01041D (Leído 2968 veces)

EnigmaticNerd · « **en:** 16 de Septiembre 2017, 01:06 »

Buenas noches. Este es el enunciado del ejercicio CU01041D del tutorial de fundamentos de programación web con CSS:

Citar

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 18px en todas direcciones, relleno de 8 píxeles en todas direcciones, ancho de 240 píxeles, altura de 300 píxeles y borde sólido de 3 píxeles de anchura con color de borde azul.

b) El div 1 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … . La altura de línea debe ser un 5 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color rojo con desplazamiento hacia la derecha y abajo.

c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor, y el excedente de texto no debe mostrarse aunque rebase al contenedor, y no deben aparecer puntos en el lugar donde se corte el texto. La altura de línea debe ser un 10 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra sólida de color azul con desplazamiento hacia la izquierda y abajo.

d) El div 3 debe tener alineación del texto justificada y color de texto #8B4513. Debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. La altura de línea debe ser un 20 % superior a lo normal. Un fragmento del texto (delimitarlo con span) debe tener tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde de modo que parezca que existe vapor verde detrás del texto.

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01041
        </title>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Efecto sombra en css con text-shadow y blur - aprenderaprogramar.com"/>
        <meta name="keywords" content="css, text-overflow, text-shadow, line-height, cursos, aprenderaprogramar.com"/>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01041.css"/>
    </head>
    <body>

        <div>
            <p>
                <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. 
                Sapiente consequuntur aliquam rem enim, culpa debitis. 
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas 
                impedit aut odit non eius vero tempore, provident.
            </p>

            <p>
                <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. 
                Sapiente consequuntur aliquam rem enim, culpa debitis. 
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas 
                impedit aut odit non eius vero tempore, provident.
            </p>
            
       
        </div>

        <div>
             <p>
               <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. 
                Sapiente consequuntur aliquam rem enim, culpa debitis. 
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas 
                impedit aut odit non eius vero tempore, provident.
            </p>
            
        
        </div>

        <div>
             <p>
               <span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. 
                Sapiente consequuntur aliquam rem enim, culpa debitis. 
                Reiciendis culpa fugiat accusamus ipsa necessitatibus voluptas 
                impedit aut odit non eius vero tempore, provident.
            </p>
 
    </body>
</html>

Acá la hoja de estilos css:

Código: [Seleccionar]

/*Estilos para el ejercicio CU01041*/

div{
    float:left;
    margin:18px;
    padding:8px;
    width:240px;
    height:300px;
    border: solid 3px #00F;
}

div:first-child p{
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    line-height:5;
}

span{
    font-size:18px;
}

div:first-child span{

    text-shadow: 3px 2px #F00;
}

div:nth-child(2)  p{
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    line-height:10;
}

div:nth-child(2) span{
    text-shadow: -7px 2px #00F;
}

div:last-child p{
    text-align:justify;
    color:#8B4513;
    line-height:2;
}

div:last-child span{
    text-shadow: 2px 2px 7px #0F0;
}

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

Alex Rodríguez · « **Respuesta #1 en:** 19 de Octubre 2017, 18:37 »

Hola EnigmaticNerd, el ejercicio está bien resuelto. Como ya hemos comentado en otros hilos, para evitar efectos indeseados si se introducen más elementos, en general es preferible identificar los elementos por id en lugar de con first-child y nth-child

Saludos

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

Noticias: