Autor Tema: HTML interlineado CSS efecto sombra text-shadow y blur sombra sólida CU01041D (Leído 2355 veces)

HumbertoAli · « **en:** 11 de Junio 2017, 23:42 »

Acá mi entrega del ejercicio CU01041D del curso de desarrollo web con CSS, creo que no está del todo bien. Si alguien me corrige sera de gran ayuda!

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.

html

Código: [Seleccionar]

<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="estilosSombreado.css">
	</head>
	<body>
		<div class="div1">
			<span>Crea un documento HTML y un archivo </span>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 
		</div>
		<div class="div2">
			<span>Ya conocemos la propiedad overflow</span>, que permite definir cómo debe comportarse el
			navegador en caso de que el contenido de una caja exceda su tamaño, por ejemplo 
			si el texto que excede el tamaño de su caja contenedora debe permanecer visible, 
			oculto, o accesible mediante barras de scroll.

			La propiedad text-overflow se concibió para dar un mayor control sobre cómo debería comportarse 
			un texto que se sale de su contenedor, permitiendo el reemplazo del final del texto por unos puntos
			suspensivos (ellipsis) o por una cadena definida por nosotros, por ejemplo podría ser “Leer más…”.

			Para aplicar esta propiedad tenemos que establecer antes la propiedad overflow con valor hidden, 
			ya que si no lo hacemos no observaremos efecto alguno (prevalecerá lo indicado por overflow). 
			Además lo indicado se aplicará al texto que no quepa en sentido horizontal pero en cualquier 
			punto del texto, no sólo al final. Esto puede generar efectos extraños (por ejemplo que unos
			puntos suspensivos aparezcan en un punto intermedio, cuando realmente sólo deberían aparecer
			al final). Para evitar esto habremos de forzar que el texto no haga saltos de línea usando 
			white-space: nowrap; gracias a lo que el text-overflow se aplicará exactamente a la parte final del texto.
		</div>
		<div class="div3">
			<span>Una empresa ensambladora</span> de productos de comunicación debe programar su producción
			semanal. Debido a problemas de liquidez, le interesa minimizar sus costos semanales,
			ya que le pagan la producción 20 días después de entregada. Actualmente está
			armando dos artículos diferentes, el T14 y el B2; ambos artículos deben ser armados y
			probados por personal especializado. La empresa compradora requiere no menos de
			100 aparatos semanales; del modelo B2 debe entregar no menos que la cuarta parte
			de los que entregue del T14, pero en ningún caso deben superar en más de 150 al nú-
			mero de equipos T14. En el cuadro 2.4 se indica el tiempo que requieren los especialistas
			para armar y probar cada equipo, expresado en minutos, así como la
			disponibilidad de tiempo.
			Cu
		</div>
	</body>
</html>

css

Código: [Seleccionar]

div {
	display: inline-block;
	margin: 18px;
	padding: 8px;
	width: 240px;
	height: 300px;
	border: 3px solid blue;
}

.div1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 5%;
}

.div1 span {
	font-size: 18px;
	text-shadow: 2px 2px red;
	
}

.div2 {
	overflow: hidden;
	text-overflow: clip;
	line-height: 10%;
}

.div2 span{
	font-size: 18px;
	  text-shadow: -1px 2px blue;
	    
       	  
}
.div3 {
	overflow: hidden;
	text-align: justify;
	color: #8B4513;
	line-height: 20%;
	
}

.div3 span {
	font-size: 18px;
	text-shadow:  6px -6px 12px blue;
	
}

pedro,, · « **Respuesta #1 en:** 15 de Junio 2017, 22:12 »

Buenas HumbertoAli.

Tienes que corregir el valor que das a la propiedad "line-height", tienes que tener en cuenta que el estado normal de la separación que vemos entre líneas es el 100%, por eso cuando se dice que aumentes en un 5% tendrías que dar un valor de un 105%.
También en el div3 te sobraría la propiedad overflow, puesto que el texto debe de salir por debajo.

Saludos.

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

Noticias: