Cómo crear una sombra en Dreamweaver

Una gota de sombra hace que un objeto 2-D Parece que 3-D mediante la colocación de sombreado detrás de él. El sombreado simula una fuente de luz, por lo que el objeto parece estar de pie fuera de la página en el espacio 3-D. Antes de HTML5, la última versión de lenguaje de marcas Web, y CSS 3, la última versión de hojas de estilo en cascada, los diseñadores tuvieron que crear sombras en simples editores gráficos, como Photoshop, y luego importarlos en Dreamweaver. CSS es un lenguaje de formato del elemento de página de uso común en el diseño de páginas Web. Los nuevos estándares HTML5 y CSS3 te permiten crear sombras con el código, lo que ahorra tiempo y ayuda a mantener el archivo general de las páginas Web 'en los tamaños más pequeños.

Instrucciones

1 Crear un nuevo documento HTML5 en Dreamweaver. Haga clic en el menú "Archivo" y seleccione "Nuevo". Esto muestra el cuadro de diálogo Nuevo documento. Seleccione la opción "HTML" en la lista Tipo de página, y luego elegir la opción "Ninguno" en la lista Diseño. Haga clic en el menú desplegable "tipo de documento" y elegir la opción "HTML 5," y haga clic en "Crear".

2 Haga clic en el menú "Window" y seleccione "Estilo CSS" para visualizar el panel de estilos CSS.

3 Haga clic en el botón "Agregar nueva regla" en la esquina inferior derecha del panel de estilos CSS. Esto abre el cuadro de diálogo Nueva regla CSS.

4 Tipo ".h1" en el campo "Nombre de selección" y haga clic en "Aceptar". Puede nombrar el selector de cualquier cosa que desee. Con este selector, todo el texto que se etiqueta con <h1> dará formato de acuerdo con esta regla CSS. Esto abre la definición de reglas CSS para .h1 cuadro de diálogo.

5 Seleccione "Tipo" en la lista Categoría para ver las opciones de formato de texto. Utilice estas opciones para configurar las propiedades, como la familia de la fuente, el peso de la fuente, tamaño de fuente y color de fuente para esta regla CSS.

6 Haga clic en Aceptar." Dreamweaver crea una nueva regla CSS llamado ".h1" y la muestra y sus propiedades en el panel Estilos CSS.

7 Haga clic en "Agregar propiedad" en el panel de estilos CSS, a continuación, escriba "text-shadow" en el campo Agregar propiedad. Esta propiedad crea una sombra de texto. Para crear una sombra en la caja o contenedor CSS, utilice "box-shadow".

8 Haga clic en el campo a la derecha de la nueva regla CSS. Esto muestra un cuadro de diálogo para configurar las propiedades de su sombra, como X - Offset, Y - Offset, Blur Radius y color. Estas opciones controlan la oscuridad y nitidez de la sombra de la gota. Una sombra típica gota de texto puede utilizar los siguientes ajustes:

X-- Offset = "2" píxeles

Y- Offset = "2" píxeles

Desenfoque Radius = "5" píxeles

Color = gris, o "# 333"

Se puede utilizar cualquier configuración que desea personalizar su sombra. Estos valores crean una sombra agradable, discreto caída que se ve bien con el texto.

9 Haga clic en la página Web en la que desea insertar el texto con una gota de sombra y, a continuación, haga clic en el menú desplegable "Regla de destino" en el panel Propiedades y seleccione ".h1."

10 Escribe el texto. Dreamweaver no puede mostrar la sombra en la vista Diseño. Haga clic en el botón "Live View" debajo de la barra de menús para ver la sombra de la gota.

Consejos y advertencias

• sombras pueden hacer que el texto pequeño, como el cuerpo del texto, difícil de leer. Que se debe utilizar para el texto de visualización, tales como títulos y el texto decorativo.
• No todos los navegadores Web admiten todas las propiedades HTML5 y CSS3, especialmente algunos navegadores web móviles. Puede asegurarse de que un mayor número de navegadores puede ver sus sombras mediante el uso de las extensiones del navegador. Por ejemplo, para crear una sombra para los navegadores WebKit, que muchos navegadores móviles soportan, podría escribir su propiedad sombra de la siguiente manera:
• -webkit-text-shadow: 2px 2px 5px # 333;
• La mayoría de los navegadores populares admiten extensiones. He aquí una lista de los navegadores más populares y sus extensiones:
• Microsoft Internet Explorer = -ms
• navegadores Mozilla = -moz
• Opera y Opera Mobile = -O
• navegadores WebKit = webkit
• Tenga en cuenta que Google Chrome y Firefox son los navegadores de Mozilla y Apple Safari es un navegador WebKit.