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%;}
Tema: CSS y HTML. text-overflow, line-height, text-shadow. Ejercicio CU01041D (Leído 2155 veces)
RSS -
WAP2