Autor Tema: CSS efecto tres dimensiones para texto brillo o difuminado de fondo CU01041D  (Leído 4157 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Códigos del ejercicios CU01041D del curso CSS desde cero.

Código HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos73.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p> 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 <span id="a">tamaño de fuente 18 píxeles y una sombra sólida de color rojo</span> con desplazamiento hacia la derecha y abajo.</p><p>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.</p></div>
<div id="caja2"><p>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 <span id="b">fuente 18 píxeles y una sombra sólida de color azul</span> con desplazamiento hacia la izquierda y abajo.</p><p>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 <span>tamaño de fuente 18 píxeles y una sombra sólida</span> de color azul con desplazamiento hacia la izquierda y abajo.</p></div>
<div id="caja3"><p>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 <span id="c">tamaño de fuente 18 píxeles y una sombra con efecto de difuminado de color verde</span> de modo que parezca que existe vapor verde detrás del texto.</p><p>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.</p></div>
</body>
</html>

Código CSS: "estilos73.css"

Código: [Seleccionar]
div {
display: inline-block;
width: 240px;
height: 300px;
margin: 18px;
padding: 8px;
border-style: solid;
border-width: 3px;
border-color: blue;
}
#caja1 {
overflow: scroll;
line-height: 105%;
}
#a {
font-size: 18px;
text-shadow: 5px 3px red;
}
#caja2 {
overflow: hidden;
line-height: 110%;
}
#b {
font-size: 18px;
text-shadow: -5px 3px blue;
}
#caja3 {
text-align: justify;
color: #8B4513;
overflow: scroll;
line-height: 120%;
}
#c {
font-size: 18px;
text-shadow: 0px 0px 5px green;
}
« Última modificación: 19 de Enero 2016, 10:54 por Ogramar »

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:Ejercicio CU01041D CSS
« Respuesta #1 en: 16 de Enero 2016, 13:18 »
Ogramar,

ante todo, buenas tardes.

Me atrevería a pedirte un poquito de explicaciones sobre este ejercicio. En el presente ejercicio no se menciona claramente que tenemos que utilizar la propiedad text-overflow (y, como puedes ver, no la he incluido), pero intenté utilizarla y no me funcionó. Había establecido (para la #caja1) la propiedad overflow: hidden y la white-space: nowrap (tal y como se recalca en el tutorial que tenemos que darles valores a estas dos propiedades anteriormente para que nos funcione la propiedad text-overflow), pero aún así no funcionó. No sé, me deberé de equivocar en algo. Me podrías explicar un poco como es el comportamiento de dicha propiedad.

Gracias antemano.

Saludos.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas dimiste,

Para poder ver qué es lo que no funciona es necesario que incluyas el código que no te funciona

En este caso te recomiendo que te guíes por esta solución donde puedes ver cómo se aplica text-overflow: https://www.aprenderaprogramar.com/foros/index.php?topic=3761.0

Ten en cuenta que algunas propiedades no responden bien en algunos navegadores, por eso puede ser conveniente que pruebes tu código en varios navegadores porque en alguno en particular puede haber problemas pero en los otros verse bien.

Tu ejercicio lo veo bien resuelto

Salu2

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas Ogramar.

En el ejercicio, pone:

Citar
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 … .

Para conseguir dicho efecto, en el tutorial pone:

Citar
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;

Por lo tanto, siguiendo las instrucciones del tutorial, puse lo siguiente en la hora de estilos sobre el #caja1, pero no me funciona en ningún navegador (firefox, chrome, opera, etc.)

Código: [Seleccionar]
#caja1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 105%;
}

No sé por qué.

(Gracias por corregirme el ejercicio).

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas dimiste, el problema de que no te funcione ellipsis parece estar en que el texto no lo has introducido directamente dentro del div, sino que dentro del div has introducido varios párrafos y es el hecho de tener esos párrafos lo que hace que no funcione al no ser aplicable a párrafos.

Además dentro del propio tutorial se indica que puede haber problemas con esta propiedad:

Citar
Nota: debido a las limitaciones y problemas de compatibilidad entre navegadores no recomendamos el uso de esta propiedad. Usa preferiblemente overflow en lugar de text-overflow.

Salu2

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas Ogramar.

Tenías razón, he eleminado los párrafos, deje el texto tal cual en el div y funcionó. Gracias!!!

Atentamente,

dimiste

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".