All Articles Dreamweaver
Creación de texto en Gran Con CSS3 en Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

Si usted ha estado utilizando el panel Estilos CSS con el estilo de sus páginas web en Dreamweaver, entonces usted será consciente de las restricciones impuestas a usted en lo que respecta al diseño. Los colores sólidos, fuentes, formas estándar de bloques, etc toda la capacidad CSS interesante, pero no es realmente un reto.

Así que en este Im artículo voy a mostrar un poco de CSS para agregar a sus estilos en Dreamweaver que realmente va a crear algunos diseños grandes.

Vamos a empezar por la creación de una etiqueta div que contendrá este estilo de su estupenda a punto de crear.


Paso 1 - Agregar una Div PA

A partir de un documento HTML en blanco abra el Panel Insertar y ponerlo a disposición. Desde el diseño de opciones elija Dibujar Div PA.

Div drawn

Div dibujado


Utilice la herramienta para dibujar una Div PA (que es sólo una etiqueta div con un estilo # ID aplica automáticamente que contiene los parámetros de posición y tamaño). Utilice el panel de propiedades para el tamaño de la Div PA con altura: 400px y ancho: 400px.


Paso 2 - Nombre de la Div PA

Abra el panel Elementos PA y re-nombre de la APDiv1 de MyStyle. Abra el panel de estilos CSS y ya veras que cambio de nombre de la Div PA también re-nombres del estilo MyStyle ID. Este es el estilo que se va a editar.


Paso 3 - Encuentra el código CSS

Cambiar a la vista dividida de modo que usted puede ver la imagen y el youve de código creado. Desplácese hasta la sección y podrás ver una sección de código en negrita de color rosa que dice # MyStyle {}. Este es el código CSS y todos los ajustes para lo que te va a crear se sentará en entre los dos {}.


Paso 4 - Añadir un poco de contenido

Para ahorrar tiempo de escritura, copiar y pegar sobre un párrafo de texto en la Div. haciendo clic en el trazado Div PA en la vista de diseño, por lo que el cursor se convierte en activo y pulsar Comando + V para pegar.

rounded corners

esquinas redondeadas


SUGERENCIA: Aumentar el tamaño del radio de exactamente la mitad de su anchura y la altura (por lo que en este caso 200 píxeles) y una vista previa de nuevo .... Hola a obtener un círculo perfecto!


Paso 6 - Fondo degradado

Adición de un fondo degradado es un efecto de diseño muy agradable, sin embargo siempre se debe tener en cuenta que no todas las versiones de todos los navegadores lo soportan. Así que sólo alguna vez lo utilice para mejorar una imagen. Siempre hay que diseñar las cosas con múltiples navegadores en la mente y tener un relleno sólido disponibles.

gradient background

gradiente de fondo


El siguiente código creará este fondo degradado:

background-color: # 666666;

background-image:-moz-lineal de gradiente (arriba, # 666666, # 333333 40,0%);

background-image:-webkit-lineal de gradiente (arriba, # 666666, # 333333 40,0%);

background-image:-o lineal de gradiente (arriba, # 666666, # 333333 40,0%);

background-image:-ms-lineal de gradiente (arriba, # 666666, # 333333 40,0%);

background-image: lineal de gradiente (arriba, # 666666, # 333333 40,0%);


Prueba de ello en algunos navegadores, si puede, para ver el efecto. Por último vamos a añadir un poco de ponche en el texto.


Paso 7 - Mejorar el Texto

Ive ha añadido White, en el texto, para hacer que se destaque más en contra del gradiente. También He añadido sombra al texto. Al igual que con la sombra de degradado sólo funciona con las versiones más recientes de los navegadores web dont siempre confiar en ella.

drop shadow

gota de sombra


Este código agrega el color de la sombra y soltar:

color: # FFFFFF;

text-shadow: 2px 2px 3px # 000000;


Paso 8 - Mejor Fuente?

Por último he añadido una fuente mejor y relleno de algunos, para crear algo de espacio alrededor del texto.

Better text

Mejor texto


Al añadir estas líneas:

font-weight: normal;

text-align: left;

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Aquí está el código que he añadido para lograrlo. Una vez más Su digno de la comprobación de compatibilidad con navegadores para ver donde algún código no funciona en algunos navegadores, y teniendo eso en mente cuando usted está diseñando sus páginas.

Los navegadores se actualizan todo el tiempo para apoyar CSS3 y HTML 5 así que no estar demasiado asustado para usar, basta con tener en cuenta. ¿Cuál es más, no son sólo los navegadores tradicionales que son capaces de aspirar con este código como Safari, Chrome y Firefox, etc También funciona perfectamente en iOS y Android también. Si eso no lo hace que valga la pena entonces, ¿qué hará?



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: