Cómo crear una sombra paralela en Dreamweaver

Crear una gota sombra en Dreamweaver. 

CREAR SOMBRA

Una gota sombra hace que un objeto 2D aparece 3-D mediante la colocación de sombras detrás de él. El sombreado simula una fuente de luz, por lo que el objeto parece pie de la página en el espacio 3-D. Antes de HTML5, la última versión de lenguaje de marcado Web y CSS3, la última versión de hoja de estilos en cascada, los diseñadores tuvieron que crear sombras simples editores gráficos, como Photoshop y, a continuación, importarlos en Dreamweaver. CSS es una página de elemento de lenguaje de formato utilizado 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 tamaño de los archivos generales de las páginas Web de los más pequeños.

Lo que necesita

Adobe Dreamweaver CS4 o posterior

Crear un nuevo documento HTML5 en Dreamweaver. Haga clic en el menú "Archivo" y seleccione "Nuevo". Aparecerá 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 seleccione "HTML 5", y luego haga clic en "Crear".

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

Haga clic en el botón "Add New Rule" en la esquina inferior derecha del panel de estilos CSS. Se abrirá el cuadro de diálogo Nueva regla CSS.

Tipo ". H1" en el campo "Nombre Selector" y haga clic en "Aceptar". Usted puede nombrar a la nada selector que desea. Con este selector, todo el texto que etiqueta con h1 formatea conforme a esta regla CSS. Esto abre la definición de reglas CSS para la caja de diálogo. H1.

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

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

Haga clic en "Agregar propiedad" en el panel de estilos CSS y escriba "text-shadow" en el campo para agregar propiedades. Esta propiedad crea una caída de sombra del texto. Para crear una sombra en el cuadro de CSS o contenedor, utilice "box-shadow".

Haga clic en el campo situado a la derecha de la nueva regla CSS. Aparece un cuadro de diálogo para configurar las propiedades de su sombra, como el X - Offset, Y - Offset, Blur Radius y Color. Estas opciones controlan la oscuridad y nitidez de la sombra. Un texto típico de sombra podría utilizar la siguiente configuración:

X - Offset = "2" píxeles

Y - offset = "2" píxeles

Desenfoque Radius = "5" píxeles

Color = gris, o "# 333"

Usted puede utilizar el ajuste que desea personalizar su sombra. Estos valores crean un agradable sombra discreta que se ve bien con el texto.

Haga clic en la página Web en la que desea insertar el texto con una sombra, y luego haga clic en la "Regla de destino" del menú desplegable en el panel Propiedades y seleccione ". H1."

Escriba 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.

Consejos y advertencias

Las sombras pueden hacer pequeño texto, como el cuerpo del texto, difícil de leer. Usted debe utilizar para el texto de visualización, tales como títulos y el texto decorativo.

No todos los navegadores soportan todos HTML5 y CSS3 propiedades, especialmente algunos navegadores web móviles. Puede asegurarse de que un mayor número de navegadores puede ver sus sombras por el uso de extensiones del navegador. Por ejemplo, para crear una sombra para los navegadores WebKit, que muchos apoyan navegadores móviles, podría escribir su propiedad sombra de la siguiente manera:

-Webkit-text-shadow: 2px 2px 5px # 333;

Los navegadores más populares soportan extensiones. Aquí está una lista de los navegadores más populares y sus extensiones:

Microsoft Internet Explorer =-ms

Mozilla Navegadores =-moz

Opera y Opera Mobile =-o

Navegadores WebKit-webkit =

Tenga en cuenta que Google Chrome y Firefox son los navegadores Mozilla y Apple Safari es un navegador WebKit.