Autor Tema: CSS y HTML Efecto de sombra con text-shadow alineación texto justificar CU01041D (Leído 1950 veces)

Jack_F · « **en:** 09 de Abril 2017, 06:15 »

Hola aqui de vuelta despues de unos dias de vacaciones volviendo al desarrollo web. Ejercicio CU01041D del tutorial básico de desarrollo web con CSS como si estuviera en primero.

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>El 9 de julio de 1816</span>, el Congreso de Tucumán resolvió tratar la Declaración de la 
					  Independencia. Presidía la sesión el diputado por San Juan, Juan Francisco Narciso de Laprida.
					  El secretario Juan José Paso leyó la propuesta: preguntó a los congresales “si querían que las 
					  Provincias de la Unión fuesen una nación libre e independiente de los reyes de España y su 
					  metrópoli”. Los diputados aprobaron por aclamación y luego, uno a uno, expresaron su voto 
					  afirmativo. Acto seguido, firmaron el Acta de la Independencia.Afuera, el pueblo celebraba. Terminada la sesión, se realizaron diversos festejos públicos.
				</div>
				<div id="div2">
				       <span>El hidrógeno</span> es un elemento químico representado por el símbolo H y
                       con un número atómico de 1. En condiciones normales de presión y 
                       temperatura, es un gas diatómico (H2) inodoro, insípido, no metálico y altamente inflamable. Con una masa atómica de 1,00794(7) u, el 
                       hidrógeno es el elemento químico más ligero y es, también, el elemento más abundante, constituyendo aproximadamente el 73,9 % de la materia visible del universo.
                       En su ciclo principal, las estrellas están compuestas por hidrógeno en estado de plasma. El hidrógeno elemental es muy escaso en la Tierra y es producido industrialmente a partir de 
                       hidrocarburos como, por ejemplo, el metano. La mayor parte del hidrógeno elemental se obtiene «in situ», es decir, en el lugar y en el momento en el que se necesita. El hidrógeno 
                       puede obtenerse a partir del agua por un proceso de electrólisis, pero resulta un método mucho más caro que la obtención a partir del gas natural. Sus principales aplicaciones 					   
				</div>
				<div id="div3">
				        <span>Constantino</span> (Tiro (Siria), siglo VII - 9 de abril de 715) fue el 88.º papa de la Iglesia católica entre 708 y 715.
						A diferencia de sus predecesores mantuvo buenas relaciones con Justiniano II fundadas en la visita que el papa realizó a Constantinopla, entre los meses de octubre de 710 y 711, con el objeto de resolver los desacuerdos que habían surgido entre las 
						Iglesias Orientales y Occidentales, a raíz del Concilio Quinisexto, también conocido como Segundo Concilio Trullano celebrado en dicha ciudad en 692.
						El papa fue bien acogido en todas las ciudades, particularmente en la capital dónde su entrada fue triunfal, consiguiendo convencer a Justiniano II de modificar ciertas resoluciones del citado concilio.
						Tras la vuelta del papa a Roma el emperador Justiniano II se enfrentó, en 711, a una rebelión encabezada por Filípico Bardano quien tras tomar prisionero a Justiniano lo mandó ejecutar y se autoproclamó emperador.
						
				</div>
		</body>
</html>

Código CSS:

Código: [Seleccionar]

/*Curso CSS - aprenderaprogramar.com*/
body{
	background-image: url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png)
}
div{
	margin: 18px;
	  padding: 8px;
	    width: 240px;
		  height: 300px;
		    float: left;
			  border: solid 3px blue;
			    background-color: #ffffff;
}

/*div1 */
#div1 span{
	 font-size: 18px;
	   text-shadow: 1px 1px red;
	     line-height: 5%;
}
#div1{
     overflow: hidden;
}

/*div2 */
#div2{
	  overflow: hidden;
	  
}
#div2 span{
	font-size: 18px;
	  text-shadow: -1px -2px blue;
	    line-height: 10%;
       	  
}

/*div3 */

#div3{
	text-align: justify;
	  overflow: hidden;
}
#div3 span{
	 line-height: 20%;
	   text-shadow: 6px -2px 12px green, 6px 2px 16px green;
	     font-size: 18px;
}

Saludos

bermartinv · « **Respuesta #1 en:** 11 de Abril 2017, 10:33 »

Cosas que faltan o repasar,
Apartado 1: La altura la tienes que definir en el div, no solo en el span.También falta el excedente de texto no debe mostrarse apareciendo en el punto final unos puntos … .
Apartado 2: Definir la altura de linea en el div no en span.También el excedente de texto no debe mostrarse aunque rebase al contenedor.
Apartado 3: Falta poner el color del texto y el tamaño de linea aplicarlo al div.
Saludos

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

Noticias: