Buenas Javier, para pegar código recuerda usar el botón # del editor del foro como se explica en
https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0He revisado el código y las observaciones son las siguientes
- Para indicar una altura de línea un 5% superior a lo normal debes escribir line-height:105%; en lugar de line-height:5%; ya que lo normal es 100% y lo que hacemos es ponerlo un 5% mayor. La misma corrección hay que hacerla en otros lugares
- Tienes los estilos mal definidos
Para referirte a elementos span dentro de elementos con id caja1 se debe escribir
#caja1 span{font-size:18px;text-shadow:2px 2px red;}
en lugar de .caja1,span{font-size:18px;text-shadow:2px 2px red;} (esto sería referirse a elementos con class caja1 ó a elementos span donde quiera que se encuentren).
En la línea de #caja3 tienes repetido line-height dos veces
Los efectos de sombra no los tienes como pide el ejercicio, por ejemplo para la caja dos dice sombra sólida azul hacia la izquierda y hacia abajo pero no lo tienes así
El código corregido quedaría similar a este (he incluido el css en el mismo archivo html):
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
div {border-style: solid; border-width:3px; border-color: blue;margin:18px;
padding:8px; background-color: #FFEFD5; width:240px; height:300px;float:left;}
#caja1{ font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:5%;}
#caja1 span{font-size:18px;text-shadow:2px 2px red;}
#caja2{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:clip;line-height:110%;}
#caja2 span{font-size:18px;text-shadow: -2px 2px blue;}
#caja3{font-size:12px;color:#8B4513;line-height:120%;overflow:hidden;white-space:nowrap;text-overflow:clip;text-align:justify;}
#caja3 span{font-size:18px; text-shadow:2px 2px 15px green;}
</style>
</head>
<body>
<div id="caja1">
<span>Caja 1</span> aprenderaprogramar.com web programación
</div>
<div id="caja2">
Caja 2 <span>aprenderaprogramar</span>.com web programación
</div>
<div id="caja3">
Caja <span>3 es el efecto</span> aprenderaprogramar.com web programación
</div>
</body>
</html>
Salu2
Tema: CSS efecto sombra text-shadow desplazar y difuminar, overflow Ejercicio CU01041D (Leído 2744 veces)
RSS -
WAP2