Cómo agregar sombras de gota y de texto en Dreamweaver - dummies

Puede mejorar sus diseños en Dreamweaver y darle mayor profundidad a sus páginas agregando 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 si los colores de primer plano y de fondo carecen de contraste.

Crédito: foto de iStockphoto. com

Dreamweaver CC proporciona una mejor compatibilidad e integración de sombras paralelas CSS3 y sombras de texto del nuevo panel de CSS Designer.

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

h1 {text-shadow: 2px 2px 2px # 000;}

Los números en el código especifican que la sombra de texto debe extenderse 2 píxeles hacia la derecha y 2 píxeles 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 : se requieren los dos primeros valores numéricos y especifique la horizontal y desplazamientos verticales: la distancia que la sombra paralela se extiende debajo del texto (vertical ) y a la derecha del texto (horizontal).

• radio de desenfoque : 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 definirse usando un código de color hexadecimal o un código de color RGBa.

Seleccionar un color RGBa para la opción Color le da un mayor control sobre la apariencia de la sombra porque puede agregar transparencia.

Puede agregar una sombra de texto usando el panel Propiedades en la parte inferior del panel Diseñador de CSS. Para hacerlo, siga estos pasos:

1. Desplácese hacia abajo hasta la sección Sombra de texto del panel Propiedades de CSS Designer.

2. Ingrese el tamaño de la sombra que desea visualizar usando los campos H-shadow (horizontal) y V-shadow (vertical).

3. Agregue la cantidad de desenfoque que desea para su sombra de texto ingresando un tamaño en el campo Desenfocar.

4. Haga clic en el color y seleccione el color que desea usar en la sombra de texto.