Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 18 de Septiembre 2016, 05:26
-
CSS efecto sombra con text-shadow y blur, text-overflow clip, ellipsis y line-height (interlineado) (CU01041D)
Aquí la resolución del ejercicio:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Sombras en textos</title>
<link rel="stylesheet" type="text/css" href="sombras.css">
</head>
<body>
<div id="div1">Ya <span class="sombreRojo">conocemos algunas</span> propiedades para dar formato a textos, como text-align, color, text-decoration, text-indent, white-space, etc. Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>
<div id="div2">Ya conocemos algunas propiedades para dar formato a textos, como <span class="sombreAzul">text-align, color, text-decoration, text-indent, white-space, etc.</span> Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>
<div id="div3">Ya conocemos algunas <span class="sombraVerde" title="Hola, hallaste el secreto del texto.">propiedades para dar formato a textos</span>, como text-align, color, text-decoration, text-indent, white-space, etc. Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>
</body>
</html>
Código CSS
/*DATOS GENERALES*/
*{font-family: arial; font-size: 1.05em;}
/*Clases para texto*/
.sombreRojo{font-size: 18px; text-shadow: 3px 3px 0 #F00;}
.sombreAzul{font-size: 18px; text-shadow: -5px 5px 0 #00F}
.sombraVerde{font-size: 18px; text-shadow: 0 0 5px #0F0}
/*Div*/
div{float: left; margin: 18px; padding: 8px; width: 240px; height: 300px;
border-width: 3px; border-style: solid; border-color: #0000FF;}
/*caracteristicas DIV por id*/
#div1{text-overflow: ellipsis; line-height: 105%;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#div2{overflow: hidden; line-height: 110%;}
#div3{text-align: justify; color: #8B4513; line-height: 120%;}
-
Hola Chompy129.
Todo bien.
Recuerda que es bueno intentar no escribir código de más, para recortar un poco tu código podrías haber usado las notación abreviada de "border". Aunque repito que el ejercicio está bien como está.
Saludos. ;D