Entradas recientes Categorías
  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo añadir sombras de texto en Dreamweaver

Libro Relacionado

Por Janine Warner

Puede mejorar sus diseños en Dreamweaver y dar a sus páginas una mayor profundidad añadiendo sombras a las imágenes,

etiquetas y otros elementos. Agregar sombras de texto hace que sus palabras sean más fáciles de leer, especialmente si su diseño tiene un fondo complejo o el primer plano y los colores de fondo carecen de contraste.

Crédito: Foto de iStockphoto.comDreamweaver

CC proporciona un mejor soporte e integración de las sombras CSS3 y las sombras de texto del nuevo panel CSS Designer.

Puede crear estilos de clase o ID con sombras de texto, y puede añadir sombras de texto a elementos HTML existentes definiendo un estilo de etiqueta, como el estilo del encabezado 1 que se ve aquí. El código CSS3 que crea esa sombra de texto es

h1 {sombra de texto: 2px 2px 2px 2px #000;}

Los números en el código especifican que la sombra de texto debe extenderse 2 píxeles a la derecha y 2 píxeles por debajo del texto con un desenfoque de 2 píxeles. Además, la sombra se crea con el color negro, especificado por el código de color hexadecimal abreviado #000.

Al crear reglas para sombras de texto, puede especificar hasta cuatro valores:

  • horizontal y vertical: Los dos primeros valores numéricos son necesarios y especifican los desplazamientos horizontal y vertical – la distancia que la sombra se extiende por debajo del texto (vertical) y a la derecha del texto (horizontal).
  • radio borroso: El tercer valor especifica la cantidad de desenfoque en la sombra. Si no incluye el radio de desenfoque, el valor predeterminado es 0, lo que hace que la sombra aparezca como un color sólido.
  • color: El cuarto valor especifica el color de la sombra y puede ser definido usando un código de color hexadecimal o un código de color RGBa.

Elegir un color RGBa para la opción Color le da un mayor control sobre la apariencia de la sombra porque puede añadir transparencia.

Puede añadir una sombra de texto utilizando el panel Propiedades en la parte inferior del panel Diseñador de CSS. Para ello, siga estos pasos:

  1. Desplácese hacia abajo hasta la sección Texto-Sombra del panel Propiedades del Diseñador de CSS.
  2. Introduzca el tamaño de la sombra que desea visualizar utilizando los campos Sombra H (horizontal) y Sombra V (vertical).
  3. Añada la cantidad de desenfoque que desea para su sombra de texto introduciendo un tamaño en el campo Desenfocar.
  4. Haga clic bien en el color y seleccione el color que desea utilizar en la sombra del texto.