Autor Tema: CSS: efecto sombra sólida con text-shadow y blur, text-overflow CLIP (CU01041D)  (Leído 2058 veces)

Jack_F

  • Visitante
Resolución del ejercicio CU01041D del curso de programador web con CSS

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 class="uno">El div 1</span> 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.
</div>
<div id="div2">
      <span class="dos">El div 2</span> 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.    
</div>
<div id="div3">
  <span class="tres">El div 3</span> 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.
</div>
</body>
</html>

Código CSS:
Código: [Seleccionar]
/*Curso CSS - aprenderaprogramar.com*/

div{
float: left;
  margin: 18px;
    padding: 8px;
      width: 240px;
        height: 300px;
          border: solid 3px blue;
}

/* div 1 */
#div1{
   
     overflow: hidden;
       text-overflow: ellipsis;
         white-space: nowrap;
             line-height: 105%;
                font-size: 18px;
}

/* div 2 */
#div2{
  overflow: hidden;
    line-height: 110%;
      font-size: 18px;
}

/* div 4 */
#div3{
text-align: justify;
  color: #8B4513;
    overflow: hidden;
      line-height: 120%;
        font-size: 18px;
}
.uno{text-shadow: 2px 2px red;} /* el primer span */
.dos{text-shadow: -2px 2px blue; font-size: 18px; } /* segundo span */
.tres{text-shadow: 1px 1px 12px green; font-size: 18px; } /* tercer span */

En el div uno pensé que no iba los tres puntos suspensivos. le agregé para evitar inconvenientes. También pregunto es recomendable usar la propiedad text-overflow o no lo es.

Gracias y un saludo. :D
« Última modificación: 18 de Junio 2017, 19:31 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola Jorgito.

En el div3 no se indica que halla que usar overflow: hidden.

Y sobre tu consultas sobre si text-overflow es recomendable usarlo, pues dependerá de lo que quieras conseguir con ello.

Saludos. ;D

Jack_F

  • Visitante
Si tienes razón en el div 3 no decia que  lleva overflow: hidden. Y gracias por aclarar mi dudas.

Un saludo. ;D

 

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".