jueves, 14 de noviembre de 2013

Cómo Fundido segundo plano en una gota de sombra en HTML y CSS Tutorial Web de

Una caída de la sombra es un efecto visual que toma un objeto y dibuja colores adicionales detrás de él para dar la impresión de que el objeto tiene una sombra. En HTML, puede utilizar clases CSS para crear un efecto de sombra detrás del texto o una imagen que se desvanece en el fondo, como un gris sombra que se desvanece en un fondo blanco. También puede controlar el tamaño de la sombra mediante la adición de más clases. Por ejemplo, el uso de cuatro clases y un contenedor crea una gota de sombra que es 5 píxeles de ancho. 

SOMBRA DE ANTECEDENTES



Abra el archivo CSS. Escriba el siguiente código:



body {background: # FFFFFF;}



# Dropshadow, dropshadow drop2, # dropshadow Drop3, # dropshadow drop4, # dropshadow contenedor.... {Position: relative; izquierda:-1px; top:-1px;}



La norma establece un órgano blanco de fondo para la página Web. Las reglas dropshadow y clases especifican que cada capa adicional de la sombra debe moverse hacia arriba ya la izquierda por 1 píxel cada uno, con respecto a la capa en la que existe. Las capas más caída que usted use, más gruesa es la frontera de la sombra se vuelve.



Escriba el siguiente código:



# Dropshadow drop1 {background: # e6e6e6;}. # Dropshadow drop2 {background: # C8C8C8;}. # Dropshadow Drop3 {background: # AAAAAA;}. # Dropshadow drop4. {Background: # 8C8C8C;}



Esto crea cuatro clases de capa caída que se aplican a la regla dropshadow. Cada clase utiliza un tono distinto de gris, con ser drop1 el más ligero y el más oscuro drop4. Con el blanco de fondo en la página Web, este efecto aclarador da la impresión de que la sombra paralela se desvanece en el fondo de la página.



Escriba el siguiente código:



. # Dropshadow container {background: # FFFFFF; border: 1px solid # 6E6E6E; padding: 5px;}



Esta clase crea el cuadro actual en la que incluir el texto o la imagen en torno al cual desea agregar la sombra. El fondo blanco cubre las cajas de caída detrás de ella, y la frontera es otro tono de gris más ligero que el de la clase drop1. La propiedad padding simplemente pone un poco de espacio entre el borde interior de la caja de la gota y el objeto en su interior.



Guarde y cierre el archivo CSS. Abra el archivo HTML y escriba el siguiente código:



div id = dropshadow div class = drop1 drop2 div class = Drop3 drop4 div class = contenedor Este es el texto dentro de la caja. / Div / div / div / div



La primera línea llama la regla dropshadow, que configura el cuadro. Las siguientes dos líneas llaman las cuatro clases de la gota. La mayoría de los navegadores permiten a los elementos HTML que admiten un máximo de dos clases, para que pueda llamar a las cuatro clases de caída utilizando dos elementos. La cuarta línea crea el propio contenedor que contiene el objeto en el interior, como el texto de la quinta línea. Las últimas cuatro líneas de cerca los elementos.



Guarde y cierre el archivo HTML.



 

No hay comentarios:

Publicar un comentario