CSS efecto sombra con text-shadow y blur, text-overflow clip, ellipsis y line-height (interlineado) (CU01041D)

Resumen: Entrega nº41 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01041D

 

 

CONTROL DEL TEXTO CSS

Ya conocemos algunas 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.

css

 

PROPIEDAD TEXT-OVERFLOW

Ya conocemos la propiedad overflow, que permite definir cómo debe comportarse el navegador en caso de que el contenido de una caja exceda su tamaño, por ejemplo si el texto que excede el tamaño de su caja contenedora debe permanecer visible, oculto, o accesible mediante barras de scroll.

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; gracias a lo que el text-overflow se aplicará exactamente a la parte final del texto.

PROPIEDAD CSS text-overflow
Función de la propiedad Permite generar un tratamiento específico para texto que excede el tamaño de su contenedor.
Valor por defecto clip
Aplicable a Elementos tipo block con texto
Valores posibles para esta propiedad clip (el texto se corta al llegar al borde del contenedor)
ellipsis (la parte final del texto se reemplaza con … antes de salirse del contenedor)
Una cadena, escrita entre comillas simples, por ejemplo ‘Leer más’ (no admitido por algunos navegadores)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

 

 

Supongamos que | representa el límite del contenedor. Supongamos este texto:

aprenderaprogramar.com es una w|eb para aprender programación.

Los resultados que obtendríamos para los distintos casos serían:

clip: aprenderaprogramar.com es una w|

ellipsis: aprenderaprogramar.com es una …|

‘...continúa’ : aprenderaprogramar.com …continúa |

 

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.

 

 

PROPIEDAD LINE-HEIGHT

Esta propiedad es de amplio uso para establecer la separación entre líneas cuando se muestra un texto.

PROPIEDAD CSS line-height
Función de la propiedad Permite fijar la altura ocupada por las líneas (interlineado).
Valor por defecto normal
Aplicable a Todos los elementos
Valores posibles para esta propiedad normal (el interlineado será el predeterminado por el navegador o el existente por herencia)
Un número sin especificar unidades (el interlineado será tantas veces el interlineado normal como indique el número)
Una unidad de medida relativa o absoluta (se admiten porcentajes)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {line-height: 1.3;}
.elementoJukeBox {line-height: 130%;}

 

 

Se recomienda no especificar unidades para line-height porque puede entrar en conflicto con el tamaño del texto. Por ejemplo si el texto es de 14px y especificamos line-height 10px el texto no cabría en la línea y se generaría una superposición. Otro caso problemático sería tener un elemento h1 dentro de un div y aplicar line-height: 1.1em. Al hacer esto se fuerza al h1 a que tome como interlineado 1.1 veces el tamaño de letra definido para el div, lo que puede generar distorsiones. En cambio especificando simplemente 1.1 sin unidades todos los elementos tomarán como interlineado 1.1 veces lo que sería su interlineado normal, lo cual proporciona un resultado más seguro que otra especificación basada en unidades.

 

 

PROPIEDAD TEXT-SHADOW

Esta propiedad sirve para añadir efectos de sombra a un texto, lo cual permite generar diseños atractivos. La sintaxis a emplear es la siguiente:

selectorElemento {text-shadow: valorX valorY blurOpcional colorOpcional; }
 
 
 

Donde valorX indica el tamaño o desplazamiento de la sombra respecto al texto hacia la derecha (valores positivos) o hacia la izquierda (valores negativos), expresado con una unidad de medida válida en CSS.

ValorY indica el tamaño o desplazamiento de la sombra respecto al texto hacia abajo (valores positivos) o hacia arriba (valores negativos), expresado con una unidad de medida válida en CSS.

blur es un parámetro opcional que indica un efecto de desenfoque o difuminado de la sombra, expresado con una unidad de medida válida en CSS. A mayor valor, la sombra tiene un mayor difuminado y se vuelve más clara y brillante.

El color es un parámetro opcional. Si se indica, especifica el color de la sombra. Si no se indica, el color de la sombra será el mismo que el color que tenga el texto.

Esta propiedad está disponible en todos los navegadores recientes, pero algunos más antiguos pueden no reconocerla.

PROPIEDAD CSS text-shadow
Función de la propiedad Permite definir un efecto de sombra para el texto.
Valor por defecto none
Aplicable a Todos los elementos
Valores posibles para esta propiedad none (no hay efecto de sombra)
valorX valorY blurOpcional colorOpcional (genera una sombra de acuerdo a los parámetros especificados; se permiten especificar 2 ó más sombras, separando su especificación mediante comas)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 { text-shadow: 2px 2px red;}
.elementoJukeBox { text-shadow: -6px -6px 12px blue ;}

 

 

Crea un documento HTML con este contenido para probar esta propiedad y visualiza los resultados:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial;}
h1 {padding:10px 20px;}
</style>
</head>
<body>
<h1 style="color: black; text-shadow: 2px 2px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 4px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px blue ;">aprenderaprogramar.com</h1>
<h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px 12px blue ;">aprenderaprogramar.com</h1>
</body>
</html>
 

css efecto sombra text-shadow

 

 

En la imagen anterior observamos en primer lugar una sombra sólida de color rojo con desplazamiento hacia la derecha y abajo. En segundo lugar tenemos esa misma sombra con un ligero difuminado (blur) y en tercer lugar la misma sobra con un mayor difuminado aún. En cuarto lugar tenemos dos sombras, una hacia abajo a la derecha roja y difuminada y otra hacia arriba a la izquierda azul y sólida. En quinto lugar la sombra azul anterior se ha difuminado, con lo cual observamos el efecto de dos sombras difuminadas, una roja hacia abajo a la derecha y otra azul hacia arriba a la izquierda.

 

 

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.

 

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación