Autor Tema: CSS: efecto sombra sólida con text-shadow y blur, text-overflow CLIP (CU01041D) (Leído 1965 veces)

Jack_F · « **en:** 11 de Mayo 2017, 17:53 »

Resolución del ejercicio CU01041D del curso de programador web con CSS

Citar

EJERCICIO
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.

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
        <head>
		        <title>Portal web- aprenderaprogramar.com</title>
				<meta charset="utf-8" />
				<link rel="stylesheet" type="text/css" href="estilos.css" />
		</head>
		<body>
		        <div id="div1">
				      <span class="uno">El div 1</span> 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.
				</div>
				<div id="div2">
				      	<span class="dos">El div 2</span> 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.			   
				</div>
				<div id="div3">
						  <span class="tres">El div 3</span> 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.
				</div>
		</body>
</html>

Código CSS:

Código: [Seleccionar]

/*Curso CSS - aprenderaprogramar.com*/

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

/* div 1 */
#div1{
   
     overflow: hidden;
       text-overflow: ellipsis;
         white-space: nowrap;
             line-height: 105%;
                font-size: 18px;
}

/* div 2 */
#div2{
		  overflow: hidden;
		    line-height: 110%;
		      font-size: 18px;
}

/* div 4 */
#div3{
	text-align: justify;
	  color: #8B4513;
	    overflow: hidden;
	      line-height: 120%;
	        font-size: 18px;
}
.uno{text-shadow: 2px 2px red;} /* el primer span */
.dos{text-shadow: -2px 2px blue; font-size: 18px; } /* segundo span */
.tres{text-shadow: 1px 1px 12px green; font-size: 18px; } /* tercer span */

En el div uno pensé que no iba los tres puntos suspensivos. le agregé para evitar inconvenientes. También pregunto es recomendable usar la propiedad text-overflow o no lo es.

Gracias y un saludo.

pedro,, · « **Respuesta #1 en:** 14 de Mayo 2017, 01:51 »

Hola Jorgito.

En el div3 no se indica que halla que usar overflow: hidden.

Y sobre tu consultas sobre si text-overflow es recomendable usarlo, pues dependerá de lo que quieras conseguir con ello.

Saludos.

Jack_F · « **Respuesta #2 en:** 14 de Mayo 2017, 19:39 »

Si tienes razón en el div 3 no decia que lleva overflow: hidden. Y gracias por aclarar mi dudas.

Un saludo.

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

Noticias: