Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Javierboy en 28 de Diciembre 2015, 04:14
-
Buenas noches(días), gusto saludarles
Tengo una consulta que hacerles a la gente del foro esperando que me puedan ayudar y es la siguiente:
En el ejercicio de los efectos de sombra en css, indican que se deben crear tres contenedores y aplicar en cada uno de ellos las distintas técnicas explicadas en la lección. pero en mi caso ocurre lo siguiente, cuando estoy definiendo los estilos por css de las sombras resulta que todas las divisiones toman el mismo estilo de sombra aún cuando están diferenciadas con "id" en html, como en el estilo css de la siguiente forma:
#caja1{ font-size:12px;overflow:hidden;white-space:nowrap;text-....
.caja1,span{font-size:18px;text-shadow:2px 2px red;}
#caja2{font-size:12px;overflow:hidden;white-spac.....
.caja2,span{font-size:18px;text-shadow: 2px 2px red,-2px -2px blue;}
la caja 1 debe tener un estilo de sombra color rojo de derecha hacia abajo y la caja 2 abajo a la izquierda color azul y la última color verde difuminada pero solo toma la último código escrito, el de la caja 3.
Espero me puedan ayudar estaré atento a su respuesta.
Saludos!!
-
Hola Javier, para poder ayudarte pega el código completo que estás usando, tanto el html como el css, de esa forma podremos revisarlo. Para pegar código hazlo como se explica en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 y antes de publicar el mensaje pulsa en previsualizar por si es necesario hacer algún cambio
Saludos
-
Hola Alex! recién he podido ver la respuesta, aquí los códigos tal cual los tengo en el Notepad.
html:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos text-align.css">
</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</span> aprenderaprogramar.com web programación
</div>
</body>
</html>
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:10%;}
.caja2,span{font-size:18px;text-shadow: 2px 2px red,-2px -2px blue;}
#caja3{font-size:12px;color:#8B4513;line-height:20%;overflow:hidden;white-space:nowrap;text-overflow:clip;line-height:10%;text-align:justify;}
.caja3,span{font-size:18px; text-shadow:2px 2px 15px green;}
Espero atento la respuesta, saludos!
-
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.0
He 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