Autor Tema: HTML y CSS efecto sombra con text-shadow tridimensional o vaporoso CU01041D  (Leído 1921 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!! dejo mi código para la resolución del ejercicio CU01041D del curso básico de programación CSS para desarrollos web.

Saludos!!!! a todos...

CU01041D.html

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>CSS Efecto sombra</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Efecto sombra - shadow y blur" />
    <meta name="keywords" content="curso, aprender a programar, html, css, text-shadow, blur(CU01041D)" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01041D.css"/>
  </head>
  <body>
    <div id="div1">Lorem <span id="somb1">ipsum dolor</span> sit amet, consectetur adipisicing elit. In sunt vel          molestiae   facere veritatis tenetur molestias eveniet, sit cumque.     Voluptatibus tenetur rerum incidunt, labore veritatis beatae. Totam quidem, natus alias. Officiis excepturi tempora, deleniti dignissimos odit voluptas odio corrupti dolorum doloribus quam quisquam, incidunt ea aut harum quidem earum impedit possimus reiciendis pariatur eveniet praesentium nam. Fugit vel veniam autem? Expedita soluta excepturi libero animi est illo labore reiciendis, necessitatibus eos? Similique, eos. Vitae voluptatibus, adipisci, quos autem animi quo odio aut dolore a illo amet et suscipit magni. Officiis.</div>
   
    <div id="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt vel molestiae facere veritatis tenetur molestias eveniet, sit cumque. <span id="somb2">Voluptatibus tenetur rerum incidunt</span>, labore veritatis beatae. Totam quidem, natus alias. Officiis excepturi tempora, deleniti dignissimos odit voluptas odio corrupti dolorum doloribus quam quisquam, incidunt ea aut harum quidem earum impedit possimus reiciendis pariatur eveniet praesentium nam. Fugit vel veniam autem? Expedita soluta excepturi libero animi est illo labore reiciendis, necessitatibus eos? Similique, eos. Vitae voluptatibus, adipisci, quos autem animi quo odio aut dolore a illo amet et suscipit magni. Officiis.</div>
   
    <div id="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt vel molestiae facere veritatis tenetur molestias eveniet, sit cumque. <span id="somb3">Voluptatibus tenetur rerum incidunt</span>, labore veritatis beatae. Totam quidem, natus alias. Officiis excepturi tempora, deleniti dignissimos odit voluptas odio corrupti dolorum doloribus quam quisquam, incidunt ea aut harum quidem earum impedit possimus reiciendis pariatur eveniet praesentium nam. Fugit vel veniam autem? Expedita soluta excepturi libero animi est illo labore reiciendis, necessitatibus eos? Similique, eos. Vitae voluptatibus, adipisci, quos autem animi quo odio aut dolore a illo amet et suscipit magni. Officiis.</div>
  </body>
</html>

CU01041D.css
Código: [Seleccionar]
/* Hoja de estilo para el ejercicio CU01041D */

/* Estilos comunes para toda la pagina */

*{font-family: arial;}

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

/* Estilos especificos */
#div1{
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height: 1.05;
}

#div2 {
  line-height: 1.1;
  overflow:hidden;
}
   
#div3{
  text-align: justify;
  line-height: 1.2;
  color: #8B4513;
}

#somb1 { text-shadow: 1px 1px red; }
#somb2 { text-shadow: -1px 1px blue; }
#somb3 { text-shadow: 4px 4px 10px green,-4px -4px 10px green;}
« Última modificación: 21 de Septiembre 2016, 20:50 por Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS efecto sombra con text-shadow (CU01041D)
« Respuesta #1 en: 16 de Septiembre 2016, 02:02 »
Hola hymsoft.

Tu ejercicio hace todo lo que se pedía. Así que a por el siguiente.

Destacar tu buena estructuración del código, de esa manera es mucho mas fácil leerlo.

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